feat(v2): style navbar (#1044)

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;
+}