feat(v2): style navbar (#1044)

v2/docs/foo/baz.md

@@ -1,6 +1,6 @@
 ---
 id: baz
-title: Test Markdown
+title: Markdown
 ---
 
 ## Images
@@ -17,12 +17,10 @@ With a reference later in the document defining the URL location:
 
 [link text](http://dev.nodeca.com)
 
-[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+[link with title](http://nodeca.github.io/pica/demo/ 'title text!')
 
 Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 
-
-
 ## Footnotes
 
 Footnote 1 link[^first].
@@ -35,21 +33,19 @@ Duplicated footnote reference[^second].
 
 [^first]: Footnote **can have markup**
 
-    and multiple paragraphs.
+  and multiple paragraphs.
 
 [^second]: Footnote text.
 
-
 ## Definition lists
 
 Term 1
 
-:   Definition 1
-with lazy continuation.
+: Definition 1 with lazy continuation.
 
-Term 2 with *inline markup*
+Term 2 with _inline markup_
 
-:   Definition 2
+: Definition 2
 
         { some code, part of Definition 2 }
 
@@ -57,13 +53,9 @@ Term 2 with *inline markup*
 
 _Compact style:_
 
-Term 1
-  ~ Definition 1
-
-Term 2
-  ~ Definition 2a
-  ~ Definition 2b
+Term 1 ~ Definition 1
 
+Term 2 ~ Definition 2a ~ Definition 2b
 
 ## Abbreviations
 
@@ -71,4 +63,4 @@ This is HTML abbreviation example.
 
 It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
 
-*[HTML]: Hyper Text Markup Language
+\*[HTML]: Hyper Text Markup Language

v2/docs/hello.md

@@ -1,15 +1,13 @@
 ---
 id: hello
-title: Hello, World !
+title: Hello, World!
 ---
 
 ## Relative links
 
-Replace this
-[highlight](highlight.md) [docusaurus](docusaurus.md)
+Replace this [highlight](highlight.md) [docusaurus](docusaurus.md)
 
-Can't replace this
-[file](file.md)
+Can't replace this [file](file.md)
 
 Do not replace below
 
@@ -20,21 +18,22 @@ Do not replace below
 ## Blockquotes
 
 > Blockquotes can also be nested...
->> ...by using additional greater-than signs right next to each other...
+>
+> > ...by using additional greater-than signs right next to each other...
+> >
 > > > ...or with spaces between arrows.
 
-
 ## Lists
 
 Unordered
 
-+ Create a list by starting a line with `+`, `-`, or `*`
-+ Sub-lists are made by indenting 2 spaces:
+- Create a list by starting a line with `+`, `-`, or `*`
+- Sub-lists are made by indenting 2 spaces:
   - Marker character change forces new list start:
-    * Ac tristique libero volutpat at
-    + Facilisis in pretium nisl aliquet
+    - Ac tristique libero volutpat at
+    * Facilisis in pretium nisl aliquet
     - Nulla volutpat aliquam velit
-+ Very easy!
+- Very easy!
 
 Ordered
 
@@ -42,9 +41,8 @@ Ordered
 2. Consectetur adipiscing elit
 3. Integer molestie lorem at massa
 
-
-1. You can use sequential numbers...
-1. ...or keep all the numbers as `1.`
+1) You can use sequential numbers...
+1) ...or keep all the numbers as `1.`
 
 Start numbering with offset:
 

v2/docs/highlight.md

@@ -1,6 +1,6 @@
 ---
-id: highlight
-title: Syntax highlighting demo
+id: code
+title: Code
 ---
 
 ```cpp
@@ -11,7 +11,6 @@ int main() {
     cout << "Hello world\n";
     return 0;
 }
-
 ```
 
 ```cpp
@@ -41,4 +40,4 @@ int main()
 
   return 0;
 }
-```
+```

v2/docs/intro.md

@@ -1,6 +1,6 @@
 ---
-id: docusaurus
-title: docusaurus
+id: intro
+title: Introduction
 ---
 
 <h1 align="center">
@@ -21,6 +21,6 @@ title: docusaurus
 
 Docusaurus is a project for easily building, deploying, and maintaining open source project websites.
 
-* **Simple to Start** Docusaurus is built to be easy to [get up and running](https://docusaurus.io/docs/en/installation.html) in as little time possible. We've built Docusaurus to handle the website build process so you can focus on your project.
-* **Localizable** Docusaurus ships with [localization support](https://docusaurus.io/docs/en/translation.html) via CrowdIn. Empower and grow your international community by translating your documentation.
-* **Customizable** While Docusaurus ships with the key pages and sections you need to get started, including a home page, a docs section, a [blog](https://docusaurus.io/docs/en/blog.html), and additional support pages, it is also [customizable](https://docusaurus.io/docs/en/custom-pages.html) as well to ensure you have a site that is [uniquely yours](https://docusaurus.io/docs/en/api-pages.html).
+- **Simple to Start** Docusaurus is built to be easy to [get up and running](https://docusaurus.io/docs/en/installation.html) in as little time possible. We've built Docusaurus to handle the website build process so you can focus on your project.
+- **Localizable** Docusaurus ships with [localization support](https://docusaurus.io/docs/en/translation.html) via CrowdIn. Empower and grow your international community by translating your documentation.
+- **Customizable** While Docusaurus ships with the key pages and sections you need to get started, including a home page, a docs section, a [blog](https://docusaurus.io/docs/en/blog.html), and additional support pages, it is also [customizable](https://docusaurus.io/docs/en/custom-pages.html) as well to ensure you have a site that is [uniquely yours](https://docusaurus.io/docs/en/api-pages.html).

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;

v2/website/sidebars.json

@@ -1,13 +1,9 @@
 {
   "docs": {
-    "Foo": {
-      "bar": ["foo/bar"],
-      "baz": ["foo/baz"]
+    "Category 1": {
+      "Subcategory 1": ["foo/bar", "foo/baz"],
+      "Subcategory 2": ["hello"]
     },
-    "Endi": [
-      "docusaurus",
-      "highlight",
-      "hello"
-    ]
+    "Category 2": ["intro", "code"]
   }
 }