First dropdown draft

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

@@ -7,8 +7,13 @@ nav.navbar
     div.nav-right
         a(href="", title="Dashboard")
             include ../../../../svg/dashboard.svg
+        div.top-nav-dropdown
             a(href="", title="Projects")
                 include ../../../../svg/projects.svg
+            ul.project-list
+                - for (var x = 0; x < 5; x++)
+                    li
+                        a(href="#", title="{{ project.title }}") Project 1
         a(href="#", title="Organizations")
             include ../../../../svg/organizations.svg
         a.user-avatar(href="#", title="{{ user.fullname }} profile")

app/styles/modules/common/navbar.scss

@@ -4,7 +4,6 @@ $top-icon-color: #11241f;
     background: rgba($black, .5);
     display: flex;
     justify-content: space-between;
-    overflow: hidden;
     position: relative;
     &:after {
         background: url('../images/menu-vert.png') repeat top left;
@@ -56,6 +55,9 @@ $top-icon-color: #11241f;
             svg path {
                 fill: $white;
             }
+            +.dropdown {
+                display: block;
+            }
         }
         &.user-avatar {
             padding: 0;
@@ -79,4 +81,21 @@ $top-icon-color: #11241f;
             transition: all .2s;
         }
     }
+    .top-nav-dropdown {
+        position: relative;
+    }
+    %dropdown {
+        background: rgba($black, .85);
+        border: 1px solid $grayer;
+        border-radius: 2px;
+        display: none;
+        left: 0;
+        position: absolute;
+        top: 2rem;
+        width: 20vh;
+        z-index: 99;
+    }
+    .project-list {
+        @extend %dropdown;
+    }
 }