nav-menu

clevertech · Jun 12, 2018 · b4bdebc · b4bdebc
1 parent d421bd0
commit b4bdebc
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 39 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,7 +3,7 @@
 logs
 *.log
 npm-debug.log*
-
+.DS_STORE
 *.swp
 
 # Runtime data

diff --git a/frontend/public/clevertech.svg b/frontend/public/clevertech.svg
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -22,8 +22,7 @@
     -->
   <title>React App</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
-    crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
   <script src="https://cdn.ravenjs.com/3.6.1/raven.min.js"></script>
 </head>
 

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
@@ -12,45 +12,70 @@ class App extends Component {
     const { props } = this;
     return (
       <div>
-        <nav className="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="main navigation">
-          <Link className="navbar-brand" to="/">
-            Boilerplate
-          </Link>
-          <ul className="navbar-nav mr-auto">
-            {props.user && (
-              <li className="nav-item">
-                <NavLink to="/products" className="nav-link">
+        <nav className="navbar is-transparent">
+          <div className="navbar-brand">
+            <Link className="navbar-item" to="/">
+              <img
+                src="/clevertech.svg"
+                alt="Clevertech React Boilerplate"
+                width="112"
+                height="28"
+              />
+            </Link>
+            <div className="navbar-burger burger" data-target="navbarExampleTransparentExample">
+              <span />
+              <span />
+              <span />
+            </div>
+          </div>
+
+          <div id="navbarExampleTransparentExample" className="navbar-menu">
+            <div className="navbar-start">
+              <Link className="navbar-item" to="/">
+                Home
+              </Link>
+              {props.user && (
+                <NavLink className="navbar-item" to="/products">
                   Products
                 </NavLink>
-              </li>
-            )}
-          </ul>
-          <div style={{ flexGrow: 1000 }} />
-          <ul className="navbar-nav mr-auto">
-            {props.user && (
-              <li className="nav-item">
-                <NavLink to="/account/settings" className="nav-link">
-                  Settings
-                </NavLink>
-              </li>
-            )}
-            {props.user && (
-              <li className="nav-item">
-                <a href="#!" onClick={props.logout} className="nav-link">
-                  Log Out
-                </a>
-              </li>
-            )}
-            {!props.user && (
-              <li className="nav-item">
-                <NavLink to="/account/login" className="nav-link">
-                  Sign in
-                </NavLink>
-              </li>
-            )}
-          </ul>
-        </nav>
+              )}
+            </div>
 
+            <div className="navbar-end">
+              <div className="navbar-item">
+                <div className="field is-grouped">
+                  {props.user && (
+                    <p className="control">
+                      <NavLink className="button is-light" to="/account/settings">
+                        <span className="icon">
+                          <i className="fas fa-cogs" />
+                        </span>
+                        <span>Settings</span>
+                      </NavLink>
+                    </p>
+                  )}
+                  {!props.user && (
+                    <p className="control">
+                      <NavLink className="button is-primary" to="/account/login">
+                        <span className="icon">
+                          <i className="fas fa-sign-in-alt" />
+                        </span>
+                        <span>Login</span>
+                      </NavLink>
+                    </p>
+                  )}
+                  {props.user && (
+                    <p className="control">
+                      <a href="#!" onClick={props.logout} className="navbar-item">
+                        Log Out
+                      </a>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </nav>
         <br />
         <section className="container">{props.children}</section>
       </div>