From ff6d17ae909bc0d479d1c374b4772fed6133b58a Mon Sep 17 00:00:00 2001
From: Beatrice Olivera <beatriceolivera1999@gmail.com>
Date: Sat, 1 Sep 2018 18:27:12 +0100
Subject: [PATCH] fixed active/inactive detail on navbar

---
 .../stylesheets/components/_navbar.scss       |  8 +++-
 app/javascript/packs/application.js           | 41 +++++++++++--------
 app/views/layouts/application.html.erb        |  1 -
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/components/_navbar.scss b/app/assets/stylesheets/components/_navbar.scss
index b5e7e45..196b8df 100644
--- a/app/assets/stylesheets/components/_navbar.scss
+++ b/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;
           }
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 24e5b70..d7551ce 100644
--- a/app/javascript/packs/application.js
+++ b/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);
+}
+
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 4a5ea09..b6c48d2 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -22,6 +22,5 @@
     <%= yield %>
     <%= javascript_include_tag 'application' %>
     <%= javascript_pack_tag 'application' %>
-
   </body>
 </html>