refactor(v2): use translateY instead of top to hide navbar

facebook · Feb 8, 2021 · 0a1e29a · 0a1e29a
1 parent 5871d1b
commit 0a1e29a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
@@ -18,9 +18,10 @@
 }
 
 .navbarHideable {
-  transition: top 0.2s ease-in-out;
+  transform: translateY(0);
+  transition: transform var(--ifm-transition-fast) ease;
 }
 
 .navbarHidden {
-  top: calc(var(--ifm-navbar-height) * -1) !important;
+  transform: translateY(calc(var(--ifm-navbar-height) * -1));
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.ts b/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.ts
@@ -12,7 +12,7 @@ import type {useHideableNavbarReturns} from '@theme/hooks/useHideableNavbar';
 
 const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
   const location = useLocation();
-  const [isNavbarVisible, setIsNavbarVisible] = useState(!hideOnScroll);
+  const [isNavbarVisible, setIsNavbarVisible] = useState(hideOnScroll);
   const isFocusedAnchor = useRef(false);
   const [lastScrollTop, setLastScrollTop] = useState(0);
   const [navbarHeight, setNavbarHeight] = useState(0);