From e76288341f688537c5e1f99a43cd1a8f99f910a0 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Mon, 27 May 2019 17:59:42 -0700
Subject: [PATCH] feat(v2): responsive navbar

---
 .../src/theme/DocSidebar/index.js             |  5 +-
 .../src/theme/DocSidebar/styles.css           |  2 +-
 .../src/theme/Navbar/index.js                 | 90 +++++++++++++++++--
 3 files changed, 86 insertions(+), 11 deletions(-)

diff --git a/packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/index.js b/packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/index.js
index cf2ba1dc24..4d4505f955 100644
--- a/packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/index.js
+++ b/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>
diff --git a/packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/styles.css b/packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/styles.css
index 2fd29b0d34..b7db6c4fd8 100644
--- a/packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/styles.css
+++ b/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;
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
index c01fa484b0..f6965ee7fa 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
+++ b/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>
   );
 }