fixed active/inactive detail on navbar

app/assets/stylesheets/components/_navbar.scss

@@ -36,10 +36,16 @@
           margin-right: 2.5em;
         }
 
-        &.active, &:hover {
+        &.active {
           border-bottom: 5px solid $primary;
           color: white;
+        }
 
+        &:hover {
+          color: white;
+        }
+
+        &.active, &:hover {
           a {
             color: white;
           }

app/javascript/packs/application.js

@@ -4,26 +4,35 @@ import { triggerModalEvent } from "../components/modal.js";
 
 triggerModalEvent();
 
-const links = document.querySelector('links');
-const linksList = document.querySelectorAll('.links div');
+const settingsPage = document.getElementById('settings-page');
+const contactsPage = document.getElementById('contacts-page');
 
-const getSiblings = function (elem) {
+const getSiblings = (element) => {
   const siblings = [];
-  let sibling = elem.parentNode.firstChild;
-  const skipMe = elem;
+  let sibling = element.parentNode.firstChild;
+  const skipMe = element;
   for ( ; sibling; sibling = sibling.nextSibling )
-    if ( sibling.nodeType == 1 && sibling != elem )
+    if ( sibling.nodeType == 1 && sibling != element )
       siblings.push( sibling );
   return siblings;
 }
 
-linksList.forEach(link => {
-  link.addEventListener('click', event => {
-    // event.preventDefault()
-    link.classList.add('active')
-    const siblings = getSiblings(link)
-    siblings.forEach(sibling => {
-      sibling.classList.remove('active');
-    })
-  })
-})
+const removeActiveClass = (element) => {
+  const siblings = getSiblings(element);
+  siblings.forEach(sibling => {
+    sibling.classList.remove('active');
+  });
+}
+
+if (settingsPage) {
+  const settings = document.getElementById('settings')
+  settings.classList.add('active');
+  removeActiveClass(settings);
+}
+
+if (contactsPage) {
+  const contacts = document.getElementById('contacts')
+  contacts.classList.add('active');
+  removeActiveClass(contacts);
+}
+

app/views/layouts/application.html.erb

@@ -22,6 +22,5 @@
     <%= yield %>
     <%= javascript_include_tag 'application' %>
     <%= javascript_pack_tag 'application' %>
-
   </body>
 </html>