fix(v2): reinit hideable header position when page switched

[lex111]

Motivation

Auto-hide header has an unpleasant bug at the moment: when clicking to a new page, header position is not recalculated - header remains hidden, although it should be displayed (see test plan). I tried to fix it via a custom event, I'm not sure how much is correct, so maybe there is a better solution.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Before	After

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit eae3456

https://deploy-preview-2160--docusaurus-2.netlify.com

[yangshun]

If we have to fall back to a non-React way of event handling, then I think it's better to not use the plugin API instead. You can access the current route through a more React-ish approach (Router.Context ?) I believe.

[lex111]

@yangshun I do not quite understand how to do this via context, could you help me?

[yangshun]

I need to look into the code to tell you exactly how to do so. React Router stores the current routing state in context and I think we should be able to access it. Otherwise, maybe try out useLocation() and you can respond to the location changes - https://reacttraining.com/react-router/web/api/Hooks/uselocation

@endiliey would know better.

[endiliey]

i can only say that client side routing is pretty limited in this scope and isnt perfect

[lex111]

As a proof-of-concept, I used the useLocation hook instead of the plugin API - it works fine! But it needs to be moved somewhere else deeper?

[yangshun]

I think this is much cleaner but I'm not sure if we want to expose react-router-dom like this. We make people import router through @docusaurus/router. Not opposed to this though since I don't think we'll move away from React Router. Thoughts @endiliey?