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

* fix(v2): reinit hideable header position when page switched * fix(v2): fix CI * refactor(v2): use react-router-dom hook instead plugin API
facebook · Jan 3, 2020 · de57ab1 · de57ab1
1 parent c494e93
commit de57ab1
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 0 deletions.
diff --git a/packages/docusaurus-theme-classic/package-lock.json b/packages/docusaurus-theme-classic/package-lock.json
diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
@@ -15,6 +15,7 @@
     "infima": "0.2.0-alpha.3",
     "parse-numeric-range": "^0.0.2",
     "prism-react-renderer": "^1.0.2",
+    "react-router-dom": "^5.1.2",
     "react-toggle": "^4.1.1"
   },
   "peerDependencies": {

diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js b/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js
@@ -6,6 +6,7 @@
  */
 
 import {useState, useCallback, useEffect} from 'react';
+import {useLocation} from 'react-router-dom';
 
 const useHideableNavbar = hideOnScroll => {
   const [isNavbarVisible, setIsNavbarVisible] = useState(true);
@@ -16,6 +17,7 @@ const useHideableNavbar = hideOnScroll => {
       setNavbarHeight(node.getBoundingClientRect().height);
     }
   }, []);
+  const location = useLocation();
 
   const handleScroll = () => {
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
@@ -47,6 +49,10 @@ const useHideableNavbar = hideOnScroll => {
     };
   }, [lastScrollTop, navbarHeight]);
 
+  useEffect(() => {
+    setIsNavbarVisible(true);
+  }, [location]);
+
   return {
     navbarRef,
     isNavbarVisible,