General cool popover mixin

app/styles/components/popover.scss

@@ -0,0 +1,25 @@
+@mixin popover($width, $top:"", $left:"", $bottom:"", $right:"") {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    position: absolute;
+    background: $blackish;
+    color: $white;
+    font-family: 'DroidSans';
+    padding: 10px;
+    top: #{$top};
+    left: #{$left};
+    bottom: #{$bottom};
+    right: #{$right};
+    width: $width;
+    display: none;
+    a {
+        padding: 10px 2px;
+        display: block;
+        @extend .small;
+        border-bottom: 1px solid $grayer;
+        &:last-child {
+            border: none;
+        }
+    }
+}

app/styles/main.scss

@@ -20,6 +20,7 @@ $prefix-for-spec:      true;
 @import 'components/buttons';
 @import 'components/avatar';
 @import 'components/summary';
+@import 'components/popover';
 
 //Layout
 @import 'layout/base';

app/styles/modules/nav.scss

@@ -51,27 +51,44 @@
     }
 }
 
+.user-settings {
+
+}
+
 .user {
     width: 80px;
     padding: 0 10px;
     position: absolute;
     bottom: 1em;
-    a {
+    .popover {
-        text-align: center;
+        @include popover(150px, "", 30px, 30px);
-        color: $white;
+        a{
-        @extend .medium;
+            text-align: left;
+            @extend .small;
+            color: $white;
+            &:hover {
+                color: $freshTaiga;
+                @include transition (color .2s linear);
+            }
+        }
     }
-    img{
+    .user-settings{
-        border: 1px solid transparent;
+        position: relative;
-        &:hover {
+        img{
-            border: 2px solid $freshTaiga;
+          border: 1px solid transparent;
-            @include transition (all .6s ease-in-out);
+          width: 100%;
+          border-radius: 50%;
+          &:hover {
+              border: 2px solid $freshTaiga;
+              @include transition (all .6s ease-in-out);
+          }
         }
     }
     .settings {
         text-align: center;
         a {
             margin-right: .5em;
+            color: $whitish;
             &:hover {
                 @include transition (color .3s linear);
                 color: $freshTaiga;

app/views/modules/nav.jade

@@ -28,8 +28,16 @@ nav.menu
         span.icon.icon-video
         span.item Video
   div.user
-    a.avatar(href="", title="User preferences")
+    div.user-settings
-      img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
+        ul.popover
+            li
+                a(href="", title="Change profile photo") Change profile photo
+            li
+                a(href="", title="Account settings") Account settings
+            li
+                a(href="", title="Logout") Logout
+        a.avatar(href="", title="User preferences")
+        img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
     div.settings
       a(href="", title="User preferences") Pilar
       a(href="", title="Site preferences")