Dropdown menus

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

@@ -10,11 +10,13 @@ nav.navbar
         div.top-nav-dropdown
             a(href="", title="Projects")
                 include ../../../../svg/projects.svg
-            div.project-list
+            div.dropdown-project-list
                 ul
-                    - for (var x = 0; x < 5; x++)
+                    - for (var x = 0; x < 9; x++)
                         li
                             a(href="#", title="{{ project.title }}") Project 1
+                a.see-more-projects-btn.button-gray(href="#", title="See more projects") See more
+                a.create-project-btn.button-green(href="#", title="Create project") Create project
         a(href="#", title="Organizations")
             include ../../../../svg/organizations.svg
         a.user-avatar(href="#", title="{{ user.fullname }} profile")

app/styles/dependencies/colors.scss

@@ -30,3 +30,8 @@ $yellow-pear: #bbe831;
 
 $menu: #232323;
 $star-fill: #edd400;
+
+// Top menu values
+$top-icon-color: #11241f;
+$dropdown-width: 500px;
+$dropdown-color: rgba(darken($grayer, 20%), 1);

app/styles/dependencies/mixins.scss

@@ -76,7 +76,7 @@
     }
 }
 
-@mixin arrow($arrow-direction, $background-color, $border-color, $border-width, $border-size) {
+@mixin arrow($arrow-direction, $border-color, $background-color, $border-width, $border-size) {
     &:after,
     &:before {
         #{$arrow-direction}: 100%;
@@ -89,15 +89,15 @@
         pointer-events: none;
     }
     &:after {
-        border-color: rgba(136, 183, 213, 0);
+        border-color: rgba($background-color, 0);
         border-#{$arrow-direction}-color: $background-color;
-        border-width: $border-size;
-        margin-left: -$border-size;
+        border-width: #{$border-size}px;
+        margin-left: -#{$border-size}px;
     }
     &:before {
-        border-color: rgba(0, 0, 0, 0);
+        border-color: rgba($border-color, 0);
         border-#{$arrow-direction}-color: $border-color;
-        border-width: calc($border-size + $border-width);
-        margin-left: calc(-$border-size + $border-width);
+        border-width: calc(#{$border-size}px + #{$border-width}px);
+        margin-left: calc(-#{$border-size}px + #{$border-width}px);
     }
 }

app/styles/modules/common/navbar.scss

@@ -1,5 +1,3 @@
-$top-icon-color: #11241f;
-
 .navbar {
     background: rgba($black, .5);
     display: flex;
@@ -25,7 +23,7 @@ $top-icon-color: #11241f;
         display: flex;
     }
     .nav-left {
-        a {
+        >a {
             padding: .5rem 1.5rem;
             &.logo {
                 background: rgba($black, .2);
@@ -44,6 +42,11 @@ $top-icon-color: #11241f;
         a {
             padding: .5rem 2rem;
         }
+        .dropdown-project-list {
+            a {
+                padding: .8rem .5rem;
+            }
+        }
     }
     a {
         color: $white;
@@ -55,9 +58,7 @@ $top-icon-color: #11241f;
             svg path {
                 fill: $white;
             }
-            +.project-list {
-                display: block;
-            }
+
         }
         &.user-avatar {
             padding: 0;
@@ -83,22 +84,52 @@ $top-icon-color: #11241f;
     }
     .top-nav-dropdown {
         position: relative;
+        &:hover {
+            .dropdown-project-list {
+                display: block;
+            }
+        }
     }
     %dropdown {
         border-radius: 2px;
         display: none;
-        left: 0;
+        left: calc(50% - #{$dropdown-width}/2);
+        min-width: $dropdown-width;
         position: absolute;
-        top: 2rem;
-        width: 20vh;
+        top: 2.5rem;
         z-index: 99;
     }
-    .project-list {
-        @extend %dropdown;
-        background: rgba($blackish, .9);
-        border: 1px solid $black;
-        ul {
-            @include arrow('bottom', rgba($blackish, .9), $black, 2px, 15px);
+}
+
+.dropdown-project-list {
+    @extend %dropdown;
+    background: $blackish;
+    border: 1px solid $black;
+    padding: .3rem;
+    ul {
+        @include arrow('bottom', $blackish, $blackish, 1, 12);
+        margin: 0;
+        margin-bottom: .5rem;
+        padding: 0;
+    }
+    a {
+        color: $gray-light;
+        display: block;
+        &:hover {
+            background: rgba($white, .1);
+            color: $fresh-taiga;
+        }
+        &.see-more-projects-btn,
+        &.create-project-btn {
+            color: $white;
+            padding: .5rem;
+            text-align: center;
+            &:hover {
+                color: $white;
+            }
+        }
+        &.see-more-projects-btn {
+            margin-bottom: .3rem;
         }
     }
 }