fixed active/inactive detail on navbar

This commit is contained in:
Beatrice Olivera 2018-09-01 18:27:12 +01:00
parent c0ef870956
commit ff6d17ae90
3 changed files with 32 additions and 18 deletions

View File

@ -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;
}

View File

@ -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);
}

View File

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