diff options
| -rw-r--r-- | assets/css/partials/header.scss | 9 | ||||
| -rw-r--r-- | assets/js/navbar.js | 8 | ||||
| -rw-r--r-- | layouts/partials/header.html | 2 |
3 files changed, 16 insertions, 3 deletions
diff --git a/assets/css/partials/header.scss b/assets/css/partials/header.scss index e35d9ec..656a912 100644 --- a/assets/css/partials/header.scss +++ b/assets/css/partials/header.scss @@ -40,6 +40,9 @@ header { align-items: flex-start; padding-inline-start: 2.5rem; + + transition: max-height 0.2s linear; + max-height: 100vh; } #nav-socials { @@ -48,6 +51,9 @@ header { display: flex; gap: 1.5rem; + transition: max-height 0.2s linear; + max-height: 100vh; + a { font-size: 1.5rem; transition: color 0.2s ease-in-out; @@ -84,7 +90,8 @@ header { #nav-pages, #nav-socials { - display: none; + max-height: 0; + overflow: hidden; } } } diff --git a/assets/js/navbar.js b/assets/js/navbar.js index 902ed8f..c609e1a 100644 --- a/assets/js/navbar.js +++ b/assets/js/navbar.js @@ -4,7 +4,13 @@ const header = document.querySelector('body > header'); const toggleButton = document.querySelector('button#mobile-menu'); function toggleNavbar() { - header.classList.toggle('collapsed'); + const present = header.classList.toggle('collapsed'); + + if (present) { + header.setAttribute('aria-expanded', 'true'); + } else { + header.setAttribute('aria-expanded', 'false'); + } } toggleButton.addEventListener('click', toggleNavbar);
\ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index e3b55c7..c65c1e4 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,6 +1,6 @@ <header class="collapsed"> <div id="brand"> - <button id="mobile-menu" type="button"> + <button id="mobile-menu" type="button" aria-controls="nav-pages nav-socials"> <img src="/icons/menu-2.svg" alt="Menu" width="24" height="24" /> </button> |