Dropdown styles

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

@@ -10,10 +10,11 @@ nav.navbar
         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
+            div.project-list
+                ul
+                    - 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/dependencies/mixins.scss

@@ -75,3 +75,29 @@
         width: #{$arrow-width};
     }
 }
+
+@mixin arrow($arrow-direction, $background-color, $border-color, $border-width, $border-size) {
+    &:after,
+    &:before {
+        #{$arrow-direction}: 100%;
+        left: 50%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+    }
+    &:after {
+        border-color: rgba(136, 183, 213, 0);
+        border-#{$arrow-direction}-color: $background-color;
+        border-width: $border-size;
+        margin-left: -$border-size;
+    }
+    &:before {
+        border-color: rgba(0, 0, 0, 0);
+        border-#{$arrow-direction}-color: $border-color;
+        border-width: calc($border-size + $border-width);
+        margin-left: calc(-$border-size + $border-width);
+    }
+}

app/styles/modules/common/navbar.scss

@@ -55,7 +55,7 @@ $top-icon-color: #11241f;
             svg path {
                 fill: $white;
             }
-            +.dropdown {
+            +.project-list {
                 display: block;
             }
         }
@@ -85,8 +85,6 @@ $top-icon-color: #11241f;
         position: relative;
     }
     %dropdown {
-        background: rgba($black, .85);
-        border: 1px solid $grayer;
         border-radius: 2px;
         display: none;
         left: 0;
@@ -97,5 +95,10 @@ $top-icon-color: #11241f;
     }
     .project-list {
         @extend %dropdown;
+        background: rgba($blackish, .9);
+        border: 1px solid $black;
+        ul {
+            @include arrow('bottom', rgba($blackish, .9), $black, 2px, 15px);
+        }
     }
 }