feat: Finished initial individual post layout
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 5s
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 5s
This commit is contained in:
38
public/js/navbar.js
Normal file
38
public/js/navbar.js
Normal file
@ -0,0 +1,38 @@
|
||||
const mobileNav = document.getElementById('mobile-nav');
|
||||
|
||||
function toggleMobileNav() {
|
||||
if (mobileNav.classList.contains('show')) {
|
||||
removeBackdrop()
|
||||
} else {
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'mobile-nav-backdrop';
|
||||
document.body.appendChild(backdrop);
|
||||
backdrop.addEventListener('click', () => {
|
||||
mobileNav.classList.remove('show');
|
||||
removeBackdrop();
|
||||
});
|
||||
setTimeout(() => backdrop.classList.add('show'), 10);
|
||||
}
|
||||
mobileNav.classList.toggle('show');
|
||||
}
|
||||
|
||||
function removeBackdrop() {
|
||||
const backdrop = document.querySelector('.mobile-nav-backdrop');
|
||||
if (backdrop) {
|
||||
backdrop.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
backdrop.remove();
|
||||
}, 250);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
if (mobileNav.classList.contains('show')) {
|
||||
mobileNav.classList.remove('show');
|
||||
removeBackdrop();
|
||||
}
|
||||
}
|
||||
});
|
||||
document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
|
||||
document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav);
|
||||
Reference in New Issue
Block a user