fixed active/inactive detail on navbar
This commit is contained in:
parent
c0ef870956
commit
ff6d17ae90
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue