From 93238b11930e25ae835f56e6dfad84bae2f97a6b Mon Sep 17 00:00:00 2001 From: Ariel Costas <94913521+arielcostas@users.noreply.github.com> Date: Sat, 3 Feb 2024 00:56:09 +0100 Subject: Add transition and max-height to header and nav-socials --- assets/css/partials/header.scss | 9 ++++++++- assets/js/navbar.js | 8 +++++++- 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 @@