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

Refactor navigation toggle function

This commit is contained in:
Helen Chong 2024-06-08 00:36:30 +08:00
parent 4ef8ebd499
commit 5117609be4
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -91,15 +91,22 @@
<script defer>
const navbarToggle = document.querySelector('.navbar__toggle');
const navbarLinks = document.querySelector(".navbar__links");
const navbarLinkItems = document.querySelectorAll(".navbar__links li a");
navbarToggle.addEventListener('click', () => {
const showClass = "navbar__links--show";
navbarLinks.classList.toggle(showClass);
const openNavigation = () => {
navbarLinks.classList.add("navbar__links--show");
navbarToggle.ariaExpanded = "true";
};
if (navbarToggle.ariaExpanded === "false") {
navbarToggle.ariaExpanded = "true";
} else {
navbarToggle.ariaExpanded = "false";
}
});
const closeNavigation = () => {
navbarLinks.classList.remove("navbar__links--show");
navbarToggle.ariaExpanded = "false";
};
const toggleNavigation = () => {
const open = navbarToggle.getAttribute("aria-expanded");
open === "false" ? openNavigation() : closeNavigation();
}
navbarToggle.addEventListener('click', toggleNavigation);
</script>