63 lines
1.7 KiB
JavaScript
63 lines
1.7 KiB
JavaScript
import {useEvent} from "../../core";
|
|
import {removeModules} from "../../core/removeModules";
|
|
|
|
let keydownHandler = null;
|
|
let clickHandler = null;
|
|
|
|
export function init() {
|
|
const el = document.getElementById("sidebar-menu");
|
|
const button = document.getElementById('menu-toggle');
|
|
const aside = document.getElementById('sidebar');
|
|
const backdrop = document.querySelector('.backdrop');
|
|
|
|
const footer = document.querySelector('footer');
|
|
const headerLink = document.querySelector('header a');
|
|
|
|
|
|
useEvent(button, 'click', (e) => {
|
|
aside.classList.toggle('show');
|
|
//aside.toggleAttribute('inert')
|
|
|
|
let isVisible = aside.classList.contains('show');
|
|
|
|
if (isVisible) {
|
|
backdrop.classList.add('visible');
|
|
|
|
footer.setAttribute('inert', 'true');
|
|
headerLink.setAttribute('inert', 'true');
|
|
} else {
|
|
backdrop.classList.remove('visible');
|
|
|
|
footer.removeAttribute('inert');
|
|
headerLink.removeAttribute('inert');
|
|
}
|
|
})
|
|
|
|
keydownHandler = (e) => {
|
|
if(e.key === 'Escape'){
|
|
if(aside.classList.contains('show')){
|
|
aside.classList.remove('show');
|
|
backdrop.classList.remove('visible');
|
|
}
|
|
}
|
|
}
|
|
|
|
useEvent(document, 'keydown', keydownHandler)
|
|
|
|
clickHandler = (e) => {
|
|
aside.classList.remove('show');
|
|
backdrop.classList.remove('visible');
|
|
|
|
footer.removeAttribute('inert');
|
|
headerLink.removeAttribute('inert');
|
|
}
|
|
|
|
useEvent(backdrop, 'click' , clickHandler)
|
|
}
|
|
|
|
export function destroy() {
|
|
/*document.removeEventListener('keydown', keydownHandler);
|
|
document.removeEventListener('click', clickHandler);*/
|
|
removeModules('sidebar');
|
|
}
|