feat: replace menu opacity hack with proper overlay
- Add #menu-overlay div (fixed, full screen, z-index below menu) - Overlay fades in/out via opacity+visibility transition (cursor: pointer) - Click on overlay closes the menu - Remove opacity: 0.1 hack on main/footer/etc. when menu-open Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
ca17be69be
commit
da2abad099
4 changed files with 27 additions and 7 deletions
|
|
@ -1,10 +1,16 @@
|
|||
export function headerToggle() {
|
||||
const header = document.getElementById("site-header");
|
||||
const buttonToggle = document.querySelector("#menu-toggle");
|
||||
const overlay = document.getElementById("menu-overlay");
|
||||
|
||||
if (!header || !buttonToggle) return;
|
||||
|
||||
buttonToggle.addEventListener("click", () => {
|
||||
const isOpen = document.body.classList.toggle("menu-open");
|
||||
document.body.classList.toggle("menu-open");
|
||||
});
|
||||
|
||||
overlay?.addEventListener("click", () => {
|
||||
document.body.classList.remove("menu-open");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue