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

View File

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