feat(v2): responsive navbar

packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/index.js

@@ -56,7 +56,10 @@ function DocSidebar(props) {
       case 'link':
         return (
           <li className="menu__list-item" key={item.label}>
-            <Link className="menu__link" to={item.href}>
+            <Link
+              activeClassName="menu__link--active"
+              className="menu__link"
+              to={item.href}>
               {item.label}
             </Link>
           </li>

packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/styles.css

@@ -10,7 +10,7 @@
     border-right: 1px solid #dadde1;
     bottom: 0;
     box-sizing: border-box;
-    padding: 2rem 0.25rem 2rem 2rem;
+    padding: 0.5rem;
     left: 0;
     position: fixed;
     overflow-x: hidden;

packages/docusaurus-theme-classic/src/theme/Navbar/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {useCallback, useState} from 'react';
 
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -13,10 +13,12 @@ import withBaseUrl from '@docusaurus/withBaseUrl';
 
 import SearchBar from '@theme/SearchBar';
 
+import classnames from 'classnames';
+
 function NavLink(props) {
   return (
     <Link
-      className="navbar__link"
+      className="navbar__item navbar__link"
       {...props}
       {...(props.href
         ? {
@@ -35,15 +37,49 @@ function NavLink(props) {
 
 function Navbar() {
   const context = useDocusaurusContext();
+  const [sidebarShown, setSidebarShown] = useState(false);
   const {siteConfig = {}} = context;
   const {baseUrl, themeConfig = {}} = siteConfig;
   const {algolia, navbar = {}} = themeConfig;
   const {title, logo, links = []} = navbar;
 
+  const showSidebar = useCallback(() => {
+    setSidebarShown(true);
+  }, [setSidebarShown]);
+  const hideSidebar = useCallback(() => {
+    setSidebarShown(false);
+  }, [setSidebarShown]);
+
   return (
-    <nav className="navbar navbar--light navbar--fixed-top">
+    <nav
+      className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', {
+        'navbar--sidebar-show': sidebarShown,
+      })}>
       <div className="navbar__inner">
         <div className="navbar__items">
+          <div
+            className="navbar__toggle"
+            role="button"
+            tabIndex={0}
+            onClick={showSidebar}
+            onKeyDown={showSidebar}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              role="img"
+              focusable="false">
+              <title>Menu</title>
+              <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeMiterlimit="10"
+                strokeWidth="2"
+                d="M4 7h22M4 15h22M4 23h22"
+              />
+            </svg>
+          </div>
           <Link className="navbar__brand" to={baseUrl}>
             {logo != null && (
               <img
@@ -57,18 +93,14 @@ function Navbar() {
           {links
             .filter(linkItem => linkItem.position !== 'right')
             .map((linkItem, i) => (
-              <div className="navbar__item" key={i}>
-                <NavLink {...linkItem} />
-              </div>
+              <NavLink {...linkItem} key={i} />
             ))}
         </div>
         <div className="navbar__items navbar__items--right">
           {links
             .filter(linkItem => linkItem.position === 'right')
             .map((linkItem, i) => (
-              <div className="navbar__item" key={i}>
-                <NavLink {...linkItem} />
-              </div>
+              <NavLink {...linkItem} key={i} />
             ))}
           {algolia && (
             <div className="navbar__search" key="search-box">
@@ -77,6 +109,46 @@ function Navbar() {
           )}
         </div>
       </div>
+      <div
+        role="presentation"
+        className="navbar__sidebar__backdrop"
+        onClick={() => {
+          setSidebarShown(false);
+        }}
+      />
+      <div className="navbar__sidebar">
+        <div className="navbar__sidebar__brand">
+          <a
+            className="navbar__brand"
+            href="#!"
+            role="button"
+            onClick={hideSidebar}>
+            {logo != null && (
+              <img
+                className="navbar__logo"
+                src={withBaseUrl(logo.src)}
+                alt={logo.alt}
+              />
+            )}
+            {title != null && <strong>{title}</strong>}
+          </a>
+        </div>
+        <div className="navbar__sidebar__items">
+          <div className="menu">
+            <ul className="menu__list">
+              {links.map((linkItem, i) => (
+                <li className="menu__list-item" key={i}>
+                  <NavLink
+                    className="menu__link"
+                    {...linkItem}
+                    onClick={hideSidebar}
+                  />
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
     </nav>
   );
 }