Basic Navbar working

app/assets/stylesheets/components/_navbar.scss

@@ -1,77 +1,59 @@
-/* Main navbar */
-.navbar-wagon {
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03);
-  background: white;
-  transition: all 0.3s ease;
-  height: 70px;
-  padding: 0px 30px;
+.polyglot-navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-}
+  width: 100vw;
+  height: 3.5em;
+  background: $navbar-background;
 
-/* Logo */
-.navbar-wagon-brand img {
-  height: 50px;
-}
+  .logo {
+    color: $primary;
+    margin-left: 1em;
 
-/* User Avatar */
-.navbar-wagon .avatar {
-  height: 35px;
-  width: 35px;
-  border-radius: 50%;
-}
+    font-size: 2em;
+    font-weight: bold;
+  }
 
-/* Right section */
-.navbar-wagon-right {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
 
-/* Basic navbar item */
-.navbar-wagon-item {
-  cursor: pointer;
-  padding: 0 20px;
-}
+  .right-align {
+    height: 100%;
+    width: 16em;
+    margin-right: 5em;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .links {
+      display: flex;
+      height: inherit;
+      div {
+        height: inherit;
+        display: flex;
+        align-items: center;
+        border-bottom: 5px solid transparent;
 
-/* Navbar link */
-.navbar-wagon-link {
-  color: #616668;
-  font-size: 14px;
-}
-.navbar-wagon-link:hover {
-  color: #da552f;
-  text-decoration: none;
-}
+        &:first-child {
+          margin-right: 1em;
+        }
 
-/* Dropdown menu */
-.navbar-wagon-dropdown-menu {
-  margin-top: 15px;
-  box-shadow: 1px 1px 4px #E6E6E6;
-  border-color: #E6E6E6;
-}
-.navbar-wagon-dropdown-menu li > a {
-  transition: color 0.3s ease;
-  font-weight: lighter !important;
-  color: #999999 !important;
-  font-size: 15px !important;
-  line-height: 22px !important;
-  padding: 10px 20px;
-}
-.navbar-wagon-dropdown-menu li > a:hover {
-  background: transparent !important;
-  color: black !important;
-}
-.navbar-wagon-dropdown-menu:before {
-  content: ' ';
-  height: 10px;
-  width: 10px;
-  position: absolute;
-  right: 10px;
-  top: -6px;
-  background-color: white;
-  transform: rotate(45deg);
-  border-left: 1px solid #E6E6E6;
-  border-top: 1px solid #E6E6E6;
+        &.active {
+          border-bottom: 5px solid $primary;
+          color: white;
+
+           a {
+            color: white;
+           }
+        }
+        a {
+          color: #C4C4C4;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  .profile {
+    img {
+      width: 3.25em;
+    }
+  }
 }