feat(v2): style navbar (#1044)

v2/lib/theme/Doc/index.js

@@ -5,6 +5,7 @@ import Helmet from 'react-helmet';
 
 import DocsPaginator from '@theme/DocsPaginator'; // eslint-disable-line
 import Footer from '@theme/Footer'; // eslint-disable-line
+import Navbar from '@theme/Navbar'; // eslint-disable-line
 import Sidebar from '@theme/Sidebar'; // eslint-disable-line
 
 import styles from './styles.css';
@@ -29,6 +30,7 @@ class Doc extends React.Component {
           {language && <meta name="docsearch:language" content={language} />}
           {version && <meta name="docsearch:version" content={version} />}
         </Helmet>
+        <Navbar docsMetadatas={docsMetadatas} />
         <Sidebar
           docsMetadatas={docsMetadatas}
           docsSidebars={docsSidebars}

v2/lib/theme/Footer/index.js

@@ -86,7 +86,7 @@ function Footer(props) {
             {Object.values(props.docsMetadatas).map(metadata => (
               <li key={metadata.permalink} className={styles.footerListItem}>
                 <Link className={styles.footerLink} to={metadata.permalink}>
-                  {metadata.permalink}
+                  {metadata.title}
                 </Link>
               </li>
             ))}

v2/lib/theme/Layout/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Footer from '@theme/Footer'; // eslint-disable-line
+import Navbar from '@theme/Navbar'; // eslint-disable-line
 
 import './styles.css';
 
@@ -14,6 +15,7 @@ export default class Layout extends React.Component {
     } = this.props;
     return (
       <div>
+        <Navbar docsMetadatas={docsMetadatas} />
         {children}
         <Footer
           docsMetadatas={docsMetadatas}

v2/lib/theme/Navbar/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {NavLink} from 'react-router-dom';
+
+import styles from './styles.css';
+
+function Navbar(props) {
+  return (
+    <nav className={styles.navbar}>
+      <div className={styles.navbarInner}>
+        <ul className={styles.navList}>
+          <li className={styles.navListItem}>
+            <NavLink className={styles.navBrand} to="/">
+              <img
+                alt="Docusaurus Logo"
+                className={styles.navLogo}
+                src="/img/docusaurus-logo.svg"
+              />
+              <strong>Docusaurus</strong>
+            </NavLink>
+          </li>
+          {Object.values(props.docsMetadatas).map(metadata => (
+            <li key={metadata.permalink} className={styles.navListItem}>
+              <NavLink
+                activeClassName={styles.navLinkActive}
+                className={styles.navLink}
+                to={metadata.permalink}>
+                {metadata.title}
+              </NavLink>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;

v2/lib/theme/Navbar/styles.css

@@ -0,0 +1,64 @@
+.navbar {
+  height: 60px;
+  width: 100%;
+  z-index: 1;
+}
+
+.navbarInner {
+  align-items: center;
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+  display: flex;
+  height: inherit;
+  justify-content: flex-start;
+  position: fixed;
+  width: inherit;
+}
+
+.navBrand {
+  color: #1c1e21;
+  font-size: 1.2em;
+  padding: 1em;
+  text-decoration: none;
+}
+
+.navLogo {
+  height: 40px;
+  margin-right: 12px;
+  vertical-align: middle;
+  width: 40px;
+}
+
+.navList {
+  list-style-type: none;
+  padding: 0;
+}
+
+.navListItem {
+  box-sizing: border-box;
+  display: inline-block;
+}
+
+.navLink {
+  border-radius: 6px;
+  color: #1c1e21;
+  display: block;
+  padding: 1em 1.2em;
+  text-decoration: none;
+  transition: background-color 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+}
+
+.navLink:hover {
+  background-color: #f5f6f7;
+}
+
+.navLinkActive {
+  border-bottom: 4px solid #00a388;
+  border-radius: 0;
+  color: #00a388;
+  margin-bottom: -4px;
+}
+
+.navLinkActive:hover {
+  background-color: inherit;
+}

v2/lib/theme/Sidebar/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
+import {NavLink} from 'react-router-dom';
 
 import classnames from 'classnames';
 
@@ -7,7 +7,7 @@ import styles from './styles.css';
 
 function Sidebar(props) {
   const {metadata, docsSidebars, docsMetadatas} = props;
-  const {sidebar, language, id: thisID} = metadata;
+  const {sidebar, language} = metadata;
   if (!sidebar || !docsSidebars) {
     return null;
   }
@@ -21,16 +21,15 @@ function Sidebar(props) {
         `Improper sidebars.json file, document with id '${linkID}' not found.`,
       );
     }
-    const activeItem = linkID === thisID;
+
     return (
       <li key={linkID}>
-        <Link
-          className={classnames(styles.sidebarLink, styles.sidebarItem, {
-            [styles.sidebarLinkActive]: activeItem,
-          })}
+        <NavLink
+          activeClassName={styles.sidebarLinkActive}
+          className={classnames(styles.sidebarLink, styles.sidebarItem)}
           to={linkMetadata.permalink}>
           {linkMetadata.sidebar_label || linkMetadata.title}
-        </Link>
+        </NavLink>
       </li>
     );
   };
@@ -40,7 +39,11 @@ function Sidebar(props) {
     return (
       <div className={styles.sidebarGroup} key={categoryName}>
         <h3
-          className={classnames(styles.sidebarGroupTitle, styles.sidebarItem)}>
+          className={classnames(
+            styles.sidebarItem,
+            styles.sidebarGroupTitle,
+            styles.sidebarGroupCategoryTitle,
+          )}>
           {categoryName}
         </h3>
         <ul className={styles.sidebarList}>
@@ -50,9 +53,9 @@ function Sidebar(props) {
                 <div className={styles.sidebarSubGroup} key={subCategoryName}>
                   <h4
                     className={classnames(
-                      styles.sidebarGroupTitle,
-                      styles.sidebarGroupSubtitle,
                       styles.sidebarItem,
+                      styles.sidebarGroupTitle,
+                      styles.sidebarGroupSubcategorytitle,
                     )}>
                     {subCategoryName}
                   </h4>

v2/lib/theme/Sidebar/styles.css

@@ -7,33 +7,38 @@
   position: fixed;
   overflow-x: hidden;
   overflow-y: auto;
-  top: 0;
+  top: 60px;
   width: 300px;
 }
 
-.sidebarGroupTitle {
-  font-size: 1em;
-  font-weight: 500;
-}
-
-.sidebarGroupSubtitle {
-  color: rgb(96, 103, 112);
-}
-
-.sidebarList {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0;
-}
-
 .sidebarItem {
   line-height: 20px;
   margin: 0;
   padding: 8px 12px;
 }
 
+.sidebarGroupTitle {
+  font-size: 1em;
+  font-weight: 500;
+}
+
+.sidebarGroupCategoryTitle {
+  margin-top: 0.5em;
+}
+
+.sidebarGroupSubcategorytitle {
+  color: rgb(96, 103, 112);
+  font-size: 0.875em;
+}
+
+.sidebarList {
+  margin: 0;
+  list-style-type: none;
+  padding-left: 0;
+}
+
 .sidebarLink {
-  border-radius: 4px;
+  border-radius: 6px;
   color: #717171;
   display: block;
   font-size: 0.875em;