notification dot for mobile

app/assets/stylesheets/mobile.scss.erb

@@ -213,6 +213,15 @@
   line-height: 50px;
 }
 
+#menu_icon .unread-notifications-dot {
+  top: 5px;
+  left: 29px;
+  width: 12px;
+  height: 12px;
+  border: 3px solid #eee;
+  border-radius: 9px;
+}
+
 #mobile_menu {
   display: none;
   background: #EEE;
@@ -223,29 +232,19 @@
   width: 200px;
   box-shadow: 3px 3px 3px rgba(0,0,0,0.23), 3px 3px 3px rgba(0,0,0,0.16);
 
-  #menu_icon .unread-notifications-dot {
-    top: 5px;
-    left: 29px;
-    width: 12px;
-    height: 12px;
-    border: 3px solid #eee;
-  }
-
   li {
     padding: 10px;
     list-style: none;
 
     &.notifications {
       position: relative;
-    }
 
-    .unread-notifications-dot {
-      top: 4px;
-      right: 4px;
+      .unread-notifications-dot {
+        top: 17px;
+        left: 0px;
+      }
     }
   }
-
-
 }
 
 /*

app/views/layouts/_account.html.erb

@@ -8,6 +8,16 @@
   <%= image_tag account.image.url(:sixtyfour), :size => "48x48", :class => "sidebarAccountImage" %>
   <h3 class="accountHeader"><%= account.name.split[0...1][0] %></h3>
   <ul>
+    <% if current_user.present? %>
+      <li class="accountListItem accountNotifications <%= user_has_unread_notifications? ? 'unread' : 'read' %>">
+        <div class="accountIcon">
+          <% if user_has_unread_notifications? %>
+            <div class="unread-notifications-dot"></div>
+          <% end %>
+        </div>
+        <%= link_to "Notifications", notifications_path %>
+      </li>
+    <% end %>
     <li class="accountListItem accountSettings">
       <div class="accountIcon"></div>
       <%= link_to "Account", edit_user_url(account) %>
@@ -22,16 +32,6 @@
       <div class="accountIcon"></div>
       <%= link_to "Apps", oauth_authorized_applications_path %>
     </li>
-    <% if current_user.present? %>
-      <li class="accountListItem accountNotifications <%= user_has_unread_notifications? ? 'unread' : 'read' %>">
-        <div class="accountIcon">
-          <% if user_has_unread_notifications? %>
-            <div class="unread-notifications-dot"></div>
-          <% end %>
-        </div>
-        <%= link_to "Notifications", notifications_path %>
-      </li>
-    <% end %>
     <li class="accountListItem accountInvite openLightbox" data-open="invite">
       <div class="accountIcon"></div>
       <span>Share Invite</span>

app/views/layouts/_mobilemenu.html.erb

@@ -2,7 +2,11 @@
   <div id="header_content">
     <%= yield(:mobile_title) %>
   </div>
-  <div id="menu_icon"></div>
+  <div id="menu_icon">
+    <% if user_has_unread_notifications? %>
+      <div class="unread-notifications-dot"></div>
+    <% end %>
+  </div>
 </div>
 <div id="mobile_menu">
   <ul>
@@ -49,6 +53,12 @@
       <li>
         <%= link_to "Account", edit_user_url(current_user) %>
       </li>
+      <li class="notifications">
+        <%= link_to "Notifications", notifications_path %>
+        <% if user_has_unread_notifications? %>
+          <div class="unread-notifications-dot"></div>
+        <% end %>
+      </li>
       <li>
         <%= link_to "Sign Out", "/logout", id: "Logout" %>
       </li>