Vertical Navigation bar styles

app/partials/includes/modules/navigation-bar/navbar.jade

@@ -1,22 +1,16 @@
 nav.navbar
-    div.nav-left
+        div.nav-left
-        img.logo(src="svg/logo-nav.svg", alt="Taiga")
+            a.logo(href="#", title="Dashboard")
-        a(href="#", title="Discover trending projects") Discover
+                include ../../../../svg/logo.svg
-        a(href="#", title="Taiga Support Page") Help
+            a(href="#", title="Discover trending projects") Discover
-    div.nav-right
+            a(href="#", title="Taiga Support Page") Help
-        a(href="", title="Dashboard") Dashboard
+        div.nav-right
-        a(href="", title="Projects") Projects
+            a(href="", title="Dashboard")
-            //ul.dropdown.projects-list
+               include ../../../../svg/dashboard.svg
-            //    li
+            a(href="", title="Projects")
-            //        a(href="#", title="{{ project-name }}") Project Name
+               include ../../../../svg/projects.svg
-            //    li
+            a(href="#", title="Organizations")
-            //        a(href="#", title="{{ project-name }}") Project Name
+               include ../../../../svg/organizations.svg
-            //    li
+            a.user-avatar(href="#", title="{{ user.fullname }} profile")
-            //        a(href="#", title="{{ project-name }}") Project Name
+                span Sebastián Sanchís
-            //    li
+                img(src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg", alt="{{ user.fullname }} picture")
-            //        a(href="#", title="{{ project-name }}") Project Name
-
-        a(href="#", title="Organizations") Organizations
-        a(href="#", title="{{ user.fullname }} profile")
-            span Sebastián Sanchís
-            img(src="#", alt="{{ user.fullname }} picture")

app/styles/modules/common/navbar.scss

@@ -1,6 +1,66 @@
 .navbar {
-    background: $black;
+    background: rgba($black, .2);
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+    position: relative;
+    &:after {
+        background: url('../images/menu-vert.png') center center repeat;
+        background-size: cover;
+        bottom: 0;
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 200%;
+        z-index: -1;
+    }
+    .nav-left,
+    .nav-right {
+        align-content: center;
+        align-items: center;
+        display: flex;
+    }
+    a {
+        color: $gray-light;
+        display: inline-block;
+        padding: .5rem .75rem;
+        &:hover {
+            background: rgba($gray, .3);
+            color: $fresh-taiga;
+            svg path {
+                fill: $gray-light;
+            }
+        }
+        &.user-avatar {
+            padding: 0;
+            padding-left: .75rem;
+        }
+
+    }
     .logo {
-        max-width: 35px;
+        padding: 0 2rem;
+        svg {
+            height: 2rem;
+            max-width: 2rem;
+        }
+        path {
+            fill: $white;
+        }
+    }
+    img {
+        height: 2.5rem;
+        padding-left: .3rem;
+        vertical-align: middle;
+    }
+    svg {
+        height: 1.2rem;
+        max-width: 1.2rem;
+        path {
+            fill: $gray;
+            transition: all .2s;
+        }
     }
 }

app/svg/dashboard.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22.009972 21.659925" preserveAspectRatio="xMidYMid meet">
+    <g transform="translate(-448.78 -314.69)">
+        <path d="m448.78 314.69h5.4412v5.4995h-5.4412zM457.06 314.69 457.06 314.69h5.4412v5.4995h-5.4412zM465.35 314.69h5.4412v5.4995h-5.4412zM448.78 322.8h5.4412v5.4995h-5.4412zM457.06 322.8h5.4412v5.4995h-5.4412zM465.35 322.8h5.4412v5.4995h-5.4412zM448.78 330.85h5.4412v5.4995h-5.4412zM457.06 330.85h5.4412v5.4995h-5.4412zM465.35 330.85h5.4412v5.4995h-5.4412z" class="s0"/>
+    </g>
+</svg>

app/svg/organizations.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="22.2" version="1.1" viewBox="0 0 22.2 20" preserveAspectRatio="xMidYMid meet">
+    <g transform="translate(-451.01 -314.49)">
+        <path d="m451 314.5v20h8.7v-4.8h4.8v4.8h8.6v-20h-22.2zm2 2.1h4.8v4.8h-4.8v-4.8zm6.7 0h4.8v4.8h-4.8v-4.8zm6.7 0h4.8v4.8h-4.8v-4.8zm-13.5 6.3h4.8v4.8h-4.8v-4.8zm6.7 0h4.8v4.8h-4.8v-4.8zm6.7 0h4.8v4.8h-4.8v-4.8z" />
+    </g>
+</svg>

app/svg/projects.svg

@@ -0,0 +1,7 @@
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" version="1.1" viewBox="0 0 26.27 17.81">
+    <g transform="translate(-448.94 -316.58)">
+        <g transform="matrix(1.1133 0 0 1.1133 -624.82 369.48)">
+            <path d="m964.52-43.02h17.08l2.25 8.41 2.67-9.97h-17.5l0.7-1.22h10.47l0.99-1.72h5.28s0.78-0.11 1.38 0.68c0.61 0.79 0.03 2.73 0.03 2.73l-3.37 12.59h-17z"/>
+        </g>
+    </g>
+</svg>