Add current state to nav bar links properly (#8045)

app/assets/javascripts/initializePage.js.erb

@@ -24,6 +24,7 @@ function callInitalizers(){
       }
     }
   },1)
+  initializeSpecialNavigationFunctionality()
   initializeBaseTracking();
   initializeTouchDevice();
   initializeCommentsPage();

app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js

@@ -0,0 +1,23 @@
+function initializeSpecialNavigationFunctionality() {
+  var connectLink = document.getElementById('connect-link');
+  var notificationsLink = document.getElementById('notifications-link');
+  var moderationLink = document.getElementById('moderation-link')
+  if (document.getElementById('notifications-container')) {
+    notificationsLink.blur();
+    notificationsLink.classList.add('top-bar__link--current');
+  } else {
+    notificationsLink.classList.remove('top-bar__link--current');
+  }
+  if (document.getElementById('chat')) {
+    connectLink.blur();
+    connectLink.classList.add('top-bar__link--current');
+  } else {
+    connectLink.classList.remove('top-bar__link--current');
+  }
+  if (document.getElementById('moderation-page')) {
+    moderationLink.blur();
+    moderationLink.classList.add('top-bar__link--current');
+  } else {
+    moderationLink.classList.remove('top-bar__link--current');
+  }
+}

app/assets/stylesheets/top-bar.scss

@@ -100,7 +100,10 @@
     --indicator-outline: var(--header-bg-current);
 
     color: var(--header-icons-color-hover);
-    background: var(--header-bg-current);
+    background: var(--header-bg-current) !important;
+    .crayons-indicator {
+      display: none;
+    }
   }
 }
 

app/views/layouts/_top_bar.html.erb

@@ -26,7 +26,7 @@
     <div class="top-bar__links">
       <a href="/new" class="crayons-btn hidden mr-2 s:block">Write a post</a>
 
-      <a class="top-bar__link trusted-visible-block" aria-label="Modeartion" href="<%= mod_path %>">
+      <a id="moderation-link" class="top-bar__link trusted-visible-block" aria-label="Moderation" href="<%= mod_path %>">
         <%= inline_svg_tag("mod.svg", aria: true, class: "crayons-icon", title: "Moderation") %>
       </a>
 

app/views/moderations/index.html.erb

@@ -1,5 +1,6 @@
 <% title "Moderate" %>
 
+<div id="moderation-page"></div>
 <% if current_user&.trusted %>
   <% if @tag %>
   <style>