Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initiate variables for navbar class names

This commit is contained in:
Helen Chong 2024-06-10 19:35:27 +08:00
parent 3c5f7f68a4
commit 9969d0e36f
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/_includes/global/navbar.njk
View File

@ -91,16 +91,18 @@
{# Accessible hamburger menu navigation script based on: {# Accessible hamburger menu navigation script based on:
https://accessibleweb.dev/navigation #} https://accessibleweb.dev/navigation #}
const navbarToggle = document.querySelector(".navbar__toggle"); const navbarToggle = document.querySelector(".navbar__toggle");
const navbarLinks = document.querySelector(".navbar__links"); const navbarLinksClass = ".navbar__links";
const navbarLinkItems = document.querySelectorAll(".navbar__links li a"); const navbarLinks = document.querySelector(navbarLinksClass);
const showNavLinksClass = "navbar__links--show";
const navbarLinkItems = document.querySelectorAll(navbarLinksClass + " li a");
const openNavigation = () => { const openNavigation = () => {
navbarLinks.classList.add("navbar__links--show"); navbarLinks.classList.add(showNavLinksClass);
navbarToggle.ariaExpanded = "true"; navbarToggle.ariaExpanded = "true";
}; };
const closeNavigation = () => { const closeNavigation = () => {
navbarLinks.classList.remove("navbar__links--show"); navbarLinks.classList.remove(showNavLinksClass);
navbarToggle.ariaExpanded = "false"; navbarToggle.ariaExpanded = "false";
}; };
@ -119,7 +121,7 @@
}); });
const handleBlur = (event) => { const handleBlur = (event) => {
const navList = event.currentTarget.closest(".navbar__links"); const navList = event.currentTarget.closest(navbarLinksClass);
if (!event.relatedTarget || !navList.contains(event.relatedTarget)) { if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
closeNavigation(); closeNavigation();
} }