add drawer to mobile

- Functional drawer with menu icon

app/assets/javascripts/mobile.js

@@ -27,7 +27,7 @@ $(document).ready(function(){
   };
 
   /* Drawer menu */
-  $('#menu_badge').click(function(evt){
+  $('#menu_badge').bind("tap click", function(evt){
     evt.preventDefault();
     toggleDrawerMenu();
   });

app/assets/stylesheets/mobile.css.scss

@@ -37,6 +37,7 @@ h3 {
   float: right;
   display: inline-block;
   padding: 0px 10px 0px 12px;
+  margin-top: 3px;
 
   img.menu {
     height: 40px;
@@ -73,20 +74,76 @@ h3 {
   -o-transition:left 0.35s;
   transition:left 0.35s;
 
-  .navbar {
-    .navbar-inner {
+  header {
+    position: static;
     height: 45px;
-      border: none;
     border-radius: 0;
 
-      @include box-shadow(0,1px,2px,#333);
-
-      background: {
-        image: image-url("header-bg-long.jpg");
-      }
+    #global_search {
+      margin-right: 20px;
+      margin-left: 10px;
+      position: relative;
 
+      form {
+        position: absolute;
         width: 100%;
+        margin-right: 20px;
+
+        input {
+          @include box-shadow(0, 1px, 1px, #444);
+          @include border-radius(15px);
+          @include transition(width);
+          width: 100%;
+          margin-top: 7px;
+          background-color: #444;
+          border: 1px solid #222;
+          font-size: 13px;
+          padding: 4px;
+
+          color: black;
+
+          &.active {
+            background-color: $highlight-white;
+            background-color: rgba(160,160,160,0.6);
           }
+
+          &:focus {
+            outline: none;
+            background-color: white;
+          }
+
+          &::-webkit-input-placeholder { text-shadow: none; }
+          &:-moz-placeholder { text-shadow: none; }
+        }
+      }
+    }
+  }
+
+  li {
+    font-size: 25px;
+    line-height: 25px;
+    font-weight: bold;
+    color: $light-grey;
+    padding: 12px 25px;
+    border-bottom: solid rgb(53, 53, 53) 2px;
+  }
+
+  // Aspects
+  li > ul > li {
+    font-size: 14px;
+    font-weight: normal;
+    color: $text-dark-grey;
+    border-bottom: none;
+  }
+
+  a {
+    color: $light-grey;
+    text-decoration: none;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0px;
   }
 }
 
@@ -98,9 +155,17 @@ h3 {
   }
   #drawer {
     left: 20%;
+
+    -webkit-box-shadow: -2px 0px 2px 1px #333;
+    -moz-box-shadow: -2px 0px 2px 1px #333;
+    box-shadow: -2px 0px 2px 1px #333;
   }
 }
 
+.row {
+  margin-left: 20px !important;
+}
+
 .message {
   padding-left: 2px;
 }
@@ -410,7 +475,7 @@ header {
 
   #nav_badges {
     float: right;
-    margin: 4px 12px;
+    margin: 7px 12px;
     display: inline-block;
 
     .badge {

app/views/layouts/application.mobile.haml

@@ -49,11 +49,10 @@
     #app
       %header#main_nav
         = link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title')
+        - if user_signed_in?
           = link_to(image_tag('icons/menu.png', :class => 'menu'),"#", id: "menu_badge")
 
-        - if user_signed_in?
           #nav_badges
-            = link_to(image_tag('icons/my_activity.png', class: 'my_activity'), activity_stream_path, class: "badge badge-inverse", id: "my_activity_badge")
             = link_to(image_tag('icons/notifications_grey.png', height: 16, width: 16, id: 'notification-flag'), notifications_path, class: "badge badge-inverse", id: "notification_badge")
             - if current_user.unread_notifications.count > 0
               .badge_count{id: "notification"}
@@ -62,15 +61,12 @@
             - if current_user.unread_message_count > 0
               .badge_count{id: "conversation"}
                 = current_user.unread_message_count
-            = link_to(image_tag('icons/search_grey.png', height: 14, width: 14), people_path, class: "badge badge-inverse", id: "people_badge")
-            = link_to(image_tag('icons/user_grey.png', height: 16, width: 16), contacts_path, class: "badge badge-inverse", id: "contacts_badge")
             - if yield(:header_action).present?
               = yield(:header_action)
             - else
               = link_to(image_tag('icons/compose_mobile2.png', class: 'compose_icon'), new_status_message_path)
 
       #main.container{:role => "main"}
-        .row
         - if current_page?(:activity_stream)
           %h3
             = t('streams.activity.title')
@@ -80,8 +76,34 @@
         = render :partial =>'shared/footer'
 
         #drawer
-        .navbar
-          .navbar-inner
+          %header
+            #global_search
+              = form_tag('/search', method: 'get', class: 'search_form', "accept-charset" => "UTF-8") do
+                %div
+                  = hidden_field_tag "utf8", "✓"
+                  = search_field_tag "q", nil, id: "q", placeholder: t("search"), results: "5", autocomplete: "off", class: "ac_input"
+
+          .container
+            %nav
+              %ul
+                %li
+                  = link_to t("streams.activity.title"), activity_stream_path
+                %li
+                  = t('streams.aspects.title')
+                %li
+                  %ul#aspects_list
+                    %li
+                      = "One Aspect"
+                %li
+                  = link_to(t('layouts.header.profile'), user_profile_path(current_user.username))
+                %li
+                  = link_to(t('_contacts'), contacts_path)
+                %li
+                  = link_to t('layouts.header.settings'), users_edit_path
+                %li
+                  = link_to t('layouts.application.toggle'), toggle_mobile_path
+                %li
+                  = link_to t('layouts.header.logout'), destroy_user_session_path, method: :delete
 
     / javascripts at the bottom
     = jquery_include_tag

app/views/shared/_footer.mobile.haml

@@ -1,6 +1,3 @@
 %footer
   %strong
     = link_to current_user.name, current_user.person
-  = link_to t('layouts.header.settings'), users_edit_path
-  = link_to t('layouts.application.toggle'), toggle_mobile_path
-  = link_to t('layouts.header.logout'), destroy_user_session_path, method: :delete