feat(v2): nav dropdown (#2487)

* feat(v2): allow nav dropdown

* docs(v2): document navbar links

* fix bug

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

@@ -26,7 +26,6 @@ function NavLink({activeBasePath, to, href, label, position, ...props}) {
 
   return (
     <Link
-      className="navbar__item navbar__link"
       {...(href
         ? {
             target: '_blank',
@@ -49,6 +48,58 @@ function NavLink({activeBasePath, to, href, label, position, ...props}) {
   );
 }
 
+function NavItem({items, position, ...props}) {
+  if (!items) {
+    return <NavLink className="navbar__item navbar__link" {...props} />;
+  }
+
+  return (
+    <div
+      className={classnames('navbar__item', 'dropdown', 'dropdown--hoverable', {
+        'dropdown--left': position === 'left',
+        'dropdown--right': position === 'right',
+      })}>
+      <NavLink className="navbar__item navbar__link" {...props}>
+        {props.label}
+      </NavLink>
+      <ul className="dropdown__menu">
+        {items.map((linkItemInner, i) => (
+          <NavLink
+            className="navbar__item navbar__link"
+            {...linkItemInner}
+            key={i}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function MobileNavItem({items, ...props}) {
+  if (!items) {
+    return (
+      <li className="menu__list-item">
+        <NavLink className="menu__link" {...props} />
+      </li>
+    );
+  }
+
+  return (
+    <li className="menu__list-item">
+      <NavLink className="menu__link menu__link--sublist" {...props}>
+        {props.label}
+      </NavLink>
+      <ul className="menu__list">
+        {items.map((linkItemInner, i) => (
+          <li className="menu__list-item">
+            <NavLink className="menu__link" {...linkItemInner} key={i} />
+          </li>
+        ))}
+      </ul>
+    </li>
+  );
+}
+
 function Navbar() {
   const {
     siteConfig: {
@@ -133,16 +184,16 @@ function Navbar() {
             )}
           </Link>
           {links
-            .filter(linkItem => linkItem.position !== 'right')
+            .filter(linkItem => linkItem.position === 'left')
             .map((linkItem, i) => (
-              <NavLink {...linkItem} key={i} />
+              <NavItem {...linkItem} key={i} />
             ))}
         </div>
         <div className="navbar__items navbar__items--right">
           {links
             .filter(linkItem => linkItem.position === 'right')
             .map((linkItem, i) => (
-              <NavLink {...linkItem} key={i} />
+              <NavItem {...linkItem} key={i} />
             ))}
           {!disableDarkMode && (
             <Toggle
@@ -194,13 +245,7 @@ function Navbar() {
           <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>
+                <MobileNavItem {...linkItem} onClick={hideSidebar} key={i} />
               ))}
             </ul>
           </div>

website/docs/theme-classic.md

@@ -98,9 +98,9 @@ module.exports = {
     navbar: {
       links: [
         {
-          to: 'docs/docusaurus.config.js',
-          label: 'docusaurus.config.js',
-          position: 'left',
+          to: 'docs/introduction',
+          label: 'Introduction',
+          position: 'left', // or 'right'
           // To apply the active class styling on all
           // routes starting with this path.
           activeBasePath: 'docs',
@@ -115,6 +115,38 @@ module.exports = {
 
 Outbound links automatically get `target="_blank" rel="noopener noreferrer"` attributes.
 
+### Navbar Dropdown
+
+Navbar items can also be dropdown items by specifying the `items`, an inner array of navbar links.
+
+```js {9-19} title="docusaurus.config.js"
+module.exports = {
+  ...
+  themeConfig: {
+    navbar: {
+      links: [
+        {
+          label: 'Community',
+          position: 'left', // or 'right'
+          items: [
+            {
+              label: 'Facebook',
+              href: '...',
+            },
+            {
+              label: 'GitHub',
+              href: '...',
+            },
+            // ... more items
+          ],
+        },
+      ],
+    },
+    ...
+  },
+}
+```
+
 ### 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.

website/docusaurus.config.js

@@ -91,25 +91,29 @@ module.exports = {
       },
       links: [
         {
-          to: 'versions',
-          label: `${versions[0].substr(6)}`,
-          position: 'left',
-          style: {
-            whiteSpace: 'nowrap',
-            padding: '0.25rem 0.5rem 0.2rem 0.25rem',
-            fontSize: 'calc(0.9 * var(--ifm-font-size-base))',
-            textDecoration: 'underline',
-          },
-        },
-        {
-          to: 'docs/introduction',
-          activeBasePath: 'docs',
           label: 'Docs',
           position: 'left',
+          activeBasePath: 'docs',
+          items: [
+            {
+              label: versions[0],
+              to: `docs/introduction`,
+            },
+          ].concat(
+            versions.slice(1).map(version => ({
+              label: version,
+              to: `docs/${version}/introduction`,
+            })),
+          ),
         },
         {to: 'blog', label: 'Blog', position: 'left'},
         {to: 'showcase', label: 'Showcase', position: 'left'},
         {to: 'feedback', label: 'Feedback', position: 'left'},
+        {
+          to: 'versions',
+          label: `v${versions[0]}`,
+          position: 'right',
+        },
         {
           href: 'https://github.com/facebook/docusaurus',
           label: 'GitHub',

website/src/css/custom.css

@@ -20,18 +20,6 @@ html[data-theme='dark'] {
   --ifm-color-feedback-background: #f0f8ff;
 }
 
-@media screen and (max-width: 996px) {
-  :root {
-    --ifm-font-size-base: 15px;
-  }
-}
-
-@media screen and (min-width: 997px) {
-  :root {
-    --ifm-font-size-base: 17px;
-  }
-}
-
 .docusaurus-highlight-code-line {
   background-color: rgb(0, 0, 0, 0.1);
   display: block;

website/src/pages/index.js

@@ -141,7 +141,6 @@ function Home() {
                 <h2 className={classnames(styles.featureHeading)}>
                   Built Using React
                 </h2>
-                quotes
                 <p className="padding-horiz--md">
                   Extend or customize your project's layout by reusing React.
                   Docusaurus can be extended while reusing the same header and