user dropdown

app/views/layouts/application.html.haml

@@ -44,15 +44,17 @@
           %span.sub_text
             PREVIEW
 
-        #session_action
-          %ul
-            %li#global_search
-              = form_tag(people_path, :method => 'get') do
-                = text_field_tag 'q', nil, :placeholder => "Search", :type => 'search', :results => 5
+        #global_search
+          = form_tag(people_path, :method => 'get') do
+            = text_field_tag 'q', nil, :placeholder => "Search", :type => 'search', :results => 5
 
-            %li= link_to current_user.real_name, current_user.person
-            %li= link_to "settings", edit_user_path(current_user)
-            %li= link_to t('.logout.'), destroy_user_session_path
+        %ul#user_menu
+          .avatar
+            = owner_image_tag
+          = link_to current_user.real_name, '#'
+          %li= link_to "profile", current_user.person
+          %li= link_to "settings", edit_user_path(current_user)
+          %li= link_to t('.logout.'), destroy_user_session_path
 
         = render "shared/aspect_nav"
       = render "shared/sub_header"

public/stylesheets/sass/application.sass

@@ -115,6 +115,7 @@ header
 
   a
     :color #CCC
+    :text-shadow 0 1px 0 #444
 
     &:hover
       :background none
@@ -128,28 +129,58 @@ header
     :border none
     :color #fff
 
-  #session_action
+  ul#user_menu
+    :z-index 10
+    :font
+      :size 14px
+    :padding 5px 10px
+      :left 40px
+    :margin 0
+      :top -2px
+      :right -5px
+
     :position absolute
     :display inline
 
     :top 0
     :right 0
 
-    ul
-      :list
-        :style none
-      :padding 0
-      :margin 0
-      :display inline
+    :list
+      :style none
 
+    li
+      :display none
+
+      a
+        :display block
+
+    &:hover
       li
-        :display inline
-        :margin
-          :right 1em
+        :display block
 
-        &:last-child
-          :margin
-            :right 0
+    &:hover
+      :margin
+        :top -3px
+        :right -6px
+      :background
+        :color #333
+      :border 1px solid #999
+
+      :box-shadow 0 1px 2px #333
+      :-webkit-box-shadow 0 1px 2px #333
+      :-moz-box-shadow 0 1px 2px #333
+
+    .avatar
+      :height 20px
+      :width 20px
+      :position absolute
+      :left 5px 
+      :display block
+
+
+  #global_search
+    :margin
+      :left 400px
 
   #aspect_header
     :-webkit-box-shadow 0px -4px 6px -2px #777