From 55120a6e441b8ebb64a02921fbaf4efe364c5333 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 15 Apr 2015 16:38:32 +0200
Subject: [PATCH] First dropdown draft

---
 .../modules/navigation-bar/navbar.jade        | 33 +++++++++++--------
 app/styles/modules/common/navbar.scss         | 21 +++++++++++-
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/app/partials/includes/modules/navigation-bar/navbar.jade b/app/partials/includes/modules/navigation-bar/navbar.jade
index fa10a591..d80605c2 100644
--- a/app/partials/includes/modules/navigation-bar/navbar.jade
+++ b/app/partials/includes/modules/navigation-bar/navbar.jade
@@ -1,16 +1,21 @@
 nav.navbar
-        div.nav-left
-            a.logo(href="#", title="Dashboard")
-                include ../../../../svg/logo.svg
-            a(href="#", title="Discover trending projects") Discover
-            a(href="#", title="Taiga Support Page") Help
-        div.nav-right
-            a(href="", title="Dashboard")
-               include ../../../../svg/dashboard.svg
+    div.nav-left
+        a.logo(href="#", title="Dashboard")
+            include ../../../../svg/logo.svg
+        a(href="#", title="Discover trending projects") Discover
+        a(href="#", title="Taiga Support Page") Help
+    div.nav-right
+        a(href="", title="Dashboard")
+            include ../../../../svg/dashboard.svg
+        div.top-nav-dropdown
             a(href="", title="Projects")
-               include ../../../../svg/projects.svg
-            a(href="#", title="Organizations")
-               include ../../../../svg/organizations.svg
-            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 ../../../../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")
+            span Sebastián Sanchís
+            img(src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg", alt="{{ user.fullname }} picture")
diff --git a/app/styles/modules/common/navbar.scss b/app/styles/modules/common/navbar.scss
index c893cf2e..f572f39c 100644
--- a/app/styles/modules/common/navbar.scss
+++ b/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;
+    }
 }