notifications bar

app/assets/stylesheets/clean.css.erb

@@ -781,6 +781,10 @@
     background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: -96px 0;
 }
+.exploreMapsCenter .notificationsLink .exploreMapsIcon {
+    background-image: url(<%= asset_path 'user_sprite.png' %>);
+    background-position: 0 -128px;
+}
 .authedApps:hover .exploreMapsIcon, .authedApps.active .exploreMapsIcon {
     background-position-x: -32px;
 }
@@ -799,6 +803,9 @@
 .sharedMaps:hover .exploreMapsIcon, .sharedMaps.active .exploreMapsIcon {
     background-position: -128px -32px;
 }
+.notificationsLink:hover .exploreMapsIcon, .notificationsLink.active .exploreMapsIcon {
+    background-position-x: -32px;
+}
 
 .mapsWrapper {
 	/*overflow-y: auto; */

app/assets/stylesheets/notifications.scss

@@ -3,3 +3,9 @@
     list-style: none;
   }
 }
+
+$menu_bar_height: 6em;
+.notificationsPage {
+  margin: 1em;
+  margin-top: 1em + $menu_bar_height;
+}

app/views/notifications/_header.html.erb

@@ -0,0 +1,18 @@
+<div id="exploreMapsHeader">
+  <div class="exploreMapsBar exploreElement">
+    <div class="exploreMapsMenu">
+      <div class="exploreMapsCenter">
+        <a href="<%= notifications_path %>" class="notificationsLink exploreMapsButton active">
+          <div class="exploreMapsIcon"></div>Notifications
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+<p id="toast" class="toast">
+  <% if devise_error_messages? %>
+    <%= devise_error_messages! %>
+  <% elsif notice %>
+    <%= notice %>
+  <% end %>
+</p>

app/views/notifications/index.html.erb

@@ -2,7 +2,7 @@
 <% content_for :mobile_title, 'Notifications' %>
 
 <div id="yield">
-  <div class="centerContent">
+  <div class="centerContent notificationsPage">
     <h4>Notifications</h4>
     <ul class="notifications">
       <% @notifications.each do |notification| %>
@@ -26,3 +26,5 @@
     </ul>
   </div>
 </div>
+
+<%= render partial: 'notifications/header' %>

app/views/notifications/show.html.erb

@@ -10,3 +10,5 @@
     <%= link_to 'Back', notifications_path %>
   </div>
 </div>
+
+<%= render partial: 'notifications/header' %>