Dropdown Lists for organizations and users

app/partials/includes/modules/navigation-bar/dropdown-organization-list.jade

@@ -0,0 +1,6 @@
+div.navbar-dropdown.dropdown-organization-list
+    ul
+        - for (var x = 0; x < 4; x++)
+            li
+                a(href="#", title="{{ project.title }}") Organization 1
+    a.create-organization-btn.button-green(href="#", title="Create Organization") Create Organization

app/partials/includes/modules/navigation-bar/dropdown-project-list.jade

@@ -0,0 +1,7 @@
+div.navbar-dropdown.dropdown-project-list
+    ul
+        - 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

app/partials/includes/modules/navigation-bar/dropdown-user.jade

@@ -0,0 +1,19 @@
+div.navbar-dropdown.dropdown-user
+    ul
+        li
+            a(href="#", title="{{ user.fullname }} profile") View Profile
+        li
+            a(href="#", title="Edit your profile") Edit Profile
+        li
+            a(href="#", title="Edit your organizations") Edit Organizations
+        li
+            a(href="#", title="Edit your settings") Settings
+        li
+            a(href="#", title="Edit your notifications") Notifications
+        li
+            a(href="#", title="Send feedback") Feedback
+        li
+            a(href="#", title="Go to support") Help
+        li
+            a(href="#", title="Logout") Logout
+

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

@@ -7,18 +7,18 @@ nav.navbar
     div.nav-right
         a(href="", title="Dashboard")
             include ../../../../svg/dashboard.svg
-        div.top-nav-dropdown
+        div.topnav-dropdown-wrapper
             a(href="", title="Projects")
                 include ../../../../svg/projects.svg
-            div.dropdown-project-list
+            include dropdown-project-list
-                ul
+
-                    - for (var x = 0; x < 9; x++)
+        div.topnav-dropdown-wrapper
-                        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
+            include dropdown-organization-list
+
+        div.topnav-dropdown-wrapper
             a.user-avatar(href="#", title="{{ user.fullname }} profile")
                 span Sebastián Sanchís
                 img(src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg", alt="{{ user.fullname }} picture")
+             include dropdown-user

app/styles/dependencies/colors.scss

@@ -33,5 +33,5 @@ $star-fill: #edd400;
 
 // Top menu values
 $top-icon-color: #11241f;
-$dropdown-width: 500px;
+$dropdown-width: 350px;
 $dropdown-color: rgba(darken($grayer, 20%), 1);

app/styles/modules/common/navbar.scss

@@ -42,7 +42,7 @@
         a {
             padding: .5rem 2rem;
         }
-        .dropdown-project-list {
+        .navbar-dropdown {
             a {
                 padding: .8rem .5rem;
             }
@@ -82,10 +82,10 @@
             transition: all .2s;
         }
     }
-    .top-nav-dropdown {
+    .topnav-dropdown-wrapper {
         position: relative;
         &:hover {
-            .dropdown-project-list {
+            .navbar-dropdown {
                 display: block;
             }
         }
@@ -101,11 +101,18 @@
     }
 }
 
-.dropdown-project-list {
+.navbar-dropdown {
     @extend %dropdown;
     background: $blackish;
     border: 1px solid $black;
     padding: .3rem;
+    &.dropdown-user {
+        left: calc(50% - 230px/2);
+        min-width: 230px;
+        ul {
+            margin-bottom: 0;
+        }
+    }
     ul {
         @include arrow('bottom', $blackish, $blackish, 1, 12);
         margin: 0;
@@ -120,6 +127,7 @@
             color: $fresh-taiga;
         }
         &.see-more-projects-btn,
+        &.create-organization-btn,
         &.create-project-btn {
             color: $white;
             padding: .5rem;
@@ -133,3 +141,10 @@
         }
     }
 }
+
+// Generated with Bounce.js. Edit at http://goo.gl/yZlDYR
+
+@keyframes dropdownFade {
+    0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+    100% { opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -400, 0, 0, 1); }
+}