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; margin-right: 2.5em;
} }
&.active, &:hover { &.active {
border-bottom: 5px solid $primary; border-bottom: 5px solid $primary;
color: white; color: white;
}
&:hover {
color: white;
}
&.active, &:hover {
a { a {
color: white; color: white;
} }

View File

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