feat(v2): hide navbar on scroll (#2055)

* feat(v2): hide navbar on scroll * Turn on hide option * Refactor after review
facebook · Dec 12, 2019 · 5bfa5d6 · 5bfa5d6
1 parent ace93c5
commit 5bfa5d6
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 4 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -17,6 +17,7 @@ import Toggle from '@theme/Toggle';
 import classnames from 'classnames';
 
 import useTheme from '@theme/hooks/useTheme';
+import useHideableNavbar from '@theme/hooks/useHideableNavbar';
 
 import styles from './styles.module.css';
 
@@ -43,13 +44,15 @@ function NavLink({to, href, label, position, ...props}) {
 
 function Navbar() {
   const context = useDocusaurusContext();
-  const [sidebarShown, setSidebarShown] = useState(false);
-  const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
-  const [theme, setTheme] = useTheme();
   const {siteConfig = {}} = context;
   const {baseUrl, themeConfig = {}} = siteConfig;
   const {navbar = {}, disableDarkMode = false} = themeConfig;
-  const {title, logo = {}, links = []} = navbar;
+  const {title, logo = {}, links = [], hideOnScroll = false} = navbar;
+  const [sidebarShown, setSidebarShown] = useState(false);
+  const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
+  const [theme, setTheme] = useTheme();
+
+  const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
 
   const showSidebar = useCallback(() => {
     setSidebarShown(true);
@@ -71,8 +74,11 @@ function Navbar() {
         <html lang="en" data-theme={theme} />
       </Head>
       <nav
+        ref={navbarRef}
         className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', {
           'navbar-sidebar--show': sidebarShown,
+          [styles.navbarHideable]: hideOnScroll,
+          [styles.navbarHidden]: !isNavbarVisible,
         })}>
         <div className="navbar__inner">
           <div className="navbar__items">

diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
@@ -16,3 +16,11 @@
     display: none;
   }
 }
+
+.navbarHideable {
+  transition: top 0.2s ease-in-out;
+}
+
+.navbarHidden {
+  top: calc(var(--ifm-navbar-height) * -1) !important;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js b/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useState, useCallback, useEffect} from 'react'; // eslint-disable-line no-unused-vars
+
+const useHideableNavbar = hideOnScroll => {
+  const [isNavbarVisible, setIsNavbarVisible] = useState(true);
+  const [lastScrollTop, setLastScrollTop] = useState(0);
+  const [navbarHeight, setNavbarHeight] = useState(0);
+  const navbarRef = useCallback(node => {
+    if (node !== null) {
+      setNavbarHeight(node.getBoundingClientRect().height);
+    }
+  }, []);
+
+  const handleScroll = () => {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const documentHeight = document.documentElement.scrollHeight - navbarHeight;
+    const windowHeight = window.innerHeight;
+
+    if (scrollTop < navbarHeight) {
+      return;
+    }
+
+    if (lastScrollTop && scrollTop > lastScrollTop) {
+      setIsNavbarVisible(false);
+    } else if (scrollTop + windowHeight < documentHeight) {
+      setIsNavbarVisible(true);
+    }
+
+    setLastScrollTop(scrollTop);
+  };
+
+  useEffect(() => {
+    if (!hideOnScroll) {
+      return undefined;
+    }
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [lastScrollTop, navbarHeight]);
+
+  return {
+    navbarRef,
+    isNavbarVisible,
+  };
+};
+
+export default useHideableNavbar;
diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
@@ -90,6 +90,23 @@ module.exports = {
 
 Outbound links automatically get `target="_blank" rel="noopener noreferrer"`.
 
+### Auto-hide sticky navbar
+
+You can enable this cool UI feature that automatically hides the navbar when a user starts scrolling down the page, and show it again when the user scrolls up.
+
+```js
+// docusaurus/config.js
+module.exports = {
+  ...
+  themeConfig: {
+    navbar: {
+      hideOnScroll: true,
+    },
+    ...
+  },
+}
+```
+
 ## Footer
 
 ## `CodeBlock`

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -74,6 +74,7 @@ module.exports = {
       },
     },
     navbar: {
+      hideOnScroll: true,
       title: 'Docusaurus',
       logo: {
         alt: 'Docusaurus Logo',