nicolo/fara-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Responsive nav (no animation...)

Browse Source
This commit is contained in:
Nicolò P
2021-08-03 19:03:27 +02:00
parent eaaa25c389
commit 499138614e
8 changed files with 148 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
js/ui.js
View File

@@ -53,21 +53,45 @@ window.addEventListener('load', () => {
}
});
});
/**
* Activate background on scroll for nav only
* if not small screen
*/
if (window.innerWidth >= 600) {
window.addEventListener('scroll', event => {
let nav = document.querySelector('#nav');
let links = document.querySelector('#links');
if (window.pageYOffset !== 0) {
nav.classList.add('bg-white', 'border');
nav.classList.remove('text-gray');
links.classList.add('nav-dark');
links.classList.remove('nav-light');
}
else {
nav.classList.add('text-gray');
nav.classList.remove('bg-white', 'border');
links.classList.add('nav-light');
links.classList.remove('nav-dark');
}
});
}
window.addEventListener('scroll', event => {
let nav = document.querySelector('#nav');
let links = document.querySelector('#links');
window.addEventListener('load', () => {
/**
* Show horizontal nav on mobile
*/
let menu = document.querySelector('i');
if (window.pageYOffset !== 0) {
nav.classList.add('bg-white', 'border');
nav.classList.remove('text-gray');
links.classList.add('nav-dark');
links.classList.remove('nav-light');
}
else {
nav.classList.add('text-gray');
nav.classList.remove('bg-white', 'border');
links.classList.add('nav-light');
links.classList.remove('nav-dark');
}
});
menu.addEventListener('click', () => {
document.querySelector('.h-nav').classList.remove('d-hide');
document.querySelector('body').classList.add('opaque');
});
let close = document.querySelector('#close-nav');
close.addEventListener('click', () => {
document.querySelector('.h-nav').classList.add('d-hide');
document.querySelector('body').classList.remove('opaque');
})
})