From cde008c0a9c347f99edd8e1e4a8fcb84cd92566b Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Mon, 25 May 2020 12:00:21 -0400
Subject: [PATCH] Add current state to nav bar links properly (#8045)

---
 app/assets/javascripts/initializePage.js.erb  |  1 +
 ...nitializeSpecialNavigationFunctionality.js | 23 +++++++++++++++++++
 app/assets/stylesheets/top-bar.scss           |  5 +++-
 app/views/layouts/_top_bar.html.erb           |  2 +-
 app/views/moderations/index.html.erb          |  1 +
 5 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js

diff --git a/app/assets/javascripts/initializePage.js.erb b/app/assets/javascripts/initializePage.js.erb
index 3269e1274..7bb906f81 100644
--- a/app/assets/javascripts/initializePage.js.erb
+++ b/app/assets/javascripts/initializePage.js.erb
@@ -24,6 +24,7 @@ function callInitalizers(){
       }
     }
   },1)
+  initializeSpecialNavigationFunctionality()
   initializeBaseTracking();
   initializeTouchDevice();
   initializeCommentsPage();
diff --git a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js b/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js
new file mode 100644
index 000000000..7218446d4
--- /dev/null
+++ b/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');
+  }
+}
diff --git a/app/assets/stylesheets/top-bar.scss b/app/assets/stylesheets/top-bar.scss
index 92519a4c7..8c018e1d1 100644
--- a/app/assets/stylesheets/top-bar.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/app/views/layouts/_top_bar.html.erb b/app/views/layouts/_top_bar.html.erb
index c753f32ef..4e87b1450 100644
--- a/app/views/layouts/_top_bar.html.erb
+++ b/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>
 
diff --git a/app/views/moderations/index.html.erb b/app/views/moderations/index.html.erb
index 121ca8fff..741536c55 100644
--- a/app/views/moderations/index.html.erb
+++ b/app/views/moderations/index.html.erb
@@ -1,5 +1,6 @@
 <% title "Moderate" %>
 
+<div id="moderation-page"></div>
 <% if current_user&.trusted %>
   <% if @tag %>
   <style>