red dot if there are unread notifications

app/assets/stylesheets/application.scss.erb

@@ -854,8 +854,10 @@ label {
 .accountListItem:hover a {
     color: #424242;
 }
+.accountNotifications {
+    position: relative;
+}
 .accountNotifications.unread a {
-    color: #424242;
     font-weight: 900;
 }
 .accountListItem:hover .accountIcon {
@@ -865,6 +867,16 @@ li.accountInvite span {
     display: block;
     padding: 9px 0 9px 62px;
 }
+$unread_notifications_dot_size: 8px;
+.unread-notifications-dot {
+  width: $unread_notifications_dot_size;
+  height: $unread_notifications_dot_size;
+  background-color: #e22;
+  border-radius: $unread_notifications_dot_size / 2;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
 .accountImage {
     background-image: url(<%= asset_data_uri 'user.png' %>);
     background-size: 84px 84px;

app/helpers/application_helper.rb

@@ -39,11 +39,12 @@ module ApplicationHelper
   end
 
   def user_has_unread_notifications?
-    return false if current_user.nil?
+    return @user_has_unread_notifications unless @user_has_unread_notifications.nil?
+    return (@user_has_unread_notifications = false) if current_user.nil?
     current_user.mailboxer_notification_receipts.each do |receipt|
-      return true if receipt.is_read == false
+      return (@user_has_unread_notifications = true) if receipt.is_read == false
     end
-    false
+    @user_has_unread_notifications = false
   end
 
   def user_unread_notification_count

app/views/layouts/_account.html.erb

@@ -24,7 +24,11 @@
     </li>
     <% if current_user.present? %>
       <li class="accountListItem accountNotifications <%= user_has_unread_notifications? ? 'unread' : 'read' %>">
-        <div class="accountIcon"></div>
+        <div class="accountIcon">
+          <% if user_has_unread_notifications? %>
+            <div class="unread-notifications-dot"></div>
+          <% end %>
+        </div>
         <%= link_to "Notifications", notifications_path %>
       </li>
     <% end %>

app/views/layouts/_upperelements.html.erb

@@ -74,6 +74,9 @@
   <!-- Account / Sign in -->
   <% if !(controller_name == "sessions" && action_name == "new") %>
   <div class="sidebarAccount upperRightEl">
+    <% if user_has_unread_notifications? %>
+      <div class="unread-notifications-dot"></div>
+    <% end %>
     <div class="sidebarAccountIcon"><div class="tooltipsUnder">Account</div>
       <% if current_user && current_user.image %>
         <%= image_tag current_user.image.url(:thirtytwo), :size => "32x32" %>