Merge pull request #26 from OpenStackweb/Home-nav

Adding "home" and logo top top nav

Author: iamweswilson

src/components/Navbar.js

@@ -35,20 +35,20 @@ const Navbar = class extends React.Component {
   render() {
     return (
       <nav
-        className="nav navbar is-transparent"
+        className="nav navbar navbar-expand-lg is-transparent"
         role="navigation"
         aria-label="main-navigation"
       >
         <div className="container">
-          <div className="nav-inner">
-            {Menu.logo &&
+          {Menu.logo &&
               <div className="nav-brand">
                 <Link to="/" title="Logo">
                   <img src={Menu.logo} alt="Your logo in the Nav" />
                 </Link>
-                {/* Hamburger menu */}
               </div>
             }
+          <div className="nav-inner">
+
             <div
               className={`navbar-burger burger ${this.state.navBarActiveClass}`}
               data-target="navMenu"
@@ -78,7 +78,7 @@ const Navbar = class extends React.Component {
                           </Link>
                         }
                       </li>
-                      {index < Menu.nav.length - 1 ? <li className="separator"> | </li> : null}
+                      {index < Menu.nav.length - 1 ? <li className="separator"> </li> : null}
                     </React.Fragment>
                   )
                 })}

src/content/navbar.json

@@ -1,6 +1,10 @@
 {
-  "logo": "/img/OSF_Logo_RGB_Horiz_Badge.svg",
+  "logo": "/img/Ironic_horizontal-white.svg",
   "nav": [
+    {
+      "text": "Home",
+      "link": "/"
+    },
     {
       "text": "Blog",
       "link": "/blog/"

src/style/modules/_nav.scss

@@ -2,28 +2,27 @@
 	Nav
 \* ------------------------------------------------------------ */
 
-
 .navbar {
   background-color: $primary-dark;
-  
+
   .container {
     min-height: 0;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
   }
 
   @media only screen and (max-width: 752px) {
     .container {
       min-height: 0;
       display: flex;
-      justify-content: flex-end;
+      // justify-content: flex-end;
     }
   }
 }
 
 .nav {
-  padding: 22px 0 22px;
-  
+  padding: 10px 0;
+
   .nav-content,
   .nav-inner,
   .nav-menu {
@@ -33,7 +32,7 @@
     ul {
       list-style-type: none;
       margin: 0;
-      color: white;      
+      color: white;
     }
   }
 
@@ -60,7 +59,7 @@
     }
 
     li + li {
-      margin-left: 44px;
+      margin-left: 30px;
     }
   }
 
@@ -70,10 +69,11 @@
     margin-left: 30px;
   }
 
-  /* .nav-brand {
+  .nav-brand {
     flex: 0 0 auto;
-    padding-right: 40px;
-  } */
+    padding-right: 0;
+    width: 9rem;
+  }
 
   .navbar-burger {
     display: none;
@@ -168,4 +168,4 @@
       }
     }
   }
-}
+}