From e0836b880260623b85f8c5eef5330cd0b17a0447 Mon Sep 17 00:00:00 2001 From: John Jago Date: Tue, 20 Aug 2024 16:20:43 -0500 Subject: [PATCH] Create a mobile menu instead of hiding nav links on mobile --- assets/style.css | 12 +++++ layouts/partials/header-home.html | 9 ++-- layouts/partials/header.html | 9 ++-- layouts/partials/mobile-nav.html | 45 +++++++++++++++++++ .../scripts/navigation/scroll-home.html | 5 ++- static/images/close.svg | 7 +++ static/images/menu.svg | 4 ++ 7 files changed, 82 insertions(+), 9 deletions(-) create mode 100644 layouts/partials/mobile-nav.html create mode 100644 static/images/close.svg create mode 100644 static/images/menu.svg diff --git a/assets/style.css b/assets/style.css index 7756c5b..e2e313f 100644 --- a/assets/style.css +++ b/assets/style.css @@ -8,6 +8,18 @@ mask-repeat: no-repeat; } +#menu-icon { + mask-image: url(/images/menu.svg); + mask-size: contain; + mask-repeat: no-repeat; +} + +#menu-close-icon { + mask-image: url(/images/close.svg); + mask-size: contain; + mask-repeat: no-repeat; +} + .star { mask-image: url(/images/star.svg); mask-size: contain; diff --git a/layouts/partials/header-home.html b/layouts/partials/header-home.html index 5255db8..e0871e8 100644 --- a/layouts/partials/header-home.html +++ b/layouts/partials/header-home.html @@ -1,15 +1,15 @@ diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 96af98a..c305c58 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,15 +1,15 @@ diff --git a/layouts/partials/mobile-nav.html b/layouts/partials/mobile-nav.html new file mode 100644 index 0000000..ddb262d --- /dev/null +++ b/layouts/partials/mobile-nav.html @@ -0,0 +1,45 @@ + + + diff --git a/layouts/partials/scripts/navigation/scroll-home.html b/layouts/partials/scripts/navigation/scroll-home.html index 8db7600..5aa8913 100644 --- a/layouts/partials/scripts/navigation/scroll-home.html +++ b/layouts/partials/scripts/navigation/scroll-home.html @@ -2,12 +2,14 @@ window.addEventListener('scroll', function() { const navbar = document.querySelector('#navbar'); const logo = document.querySelector('#nav-logo'); - const links = document.querySelectorAll('nav a'); + const menuIcon = document.querySelector('#menu-icon'); + const links = document.querySelectorAll('nav#desktop-nav a'); const downloadLink = document.querySelector('#nav-download-link'); if (window.scrollY > 50) { navbar.classList.add('bg-[#ffffff56]', 'shadow-sm'); logo.classList.add('bg-gray-800') + menuIcon.classList.add('bg-gray-800') for (const link of links) { link.classList.add('text-gray-800'); } @@ -16,6 +18,7 @@ } else { navbar.classList.remove('bg-[#ffffff56]', 'shadow-sm'); logo.classList.remove('bg-gray-800') + menuIcon.classList.remove('bg-gray-800') for (const link of links) { link.classList.remove('text-gray-800'); } diff --git a/static/images/close.svg b/static/images/close.svg new file mode 100644 index 0000000..ec98603 --- /dev/null +++ b/static/images/close.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/static/images/menu.svg b/static/images/menu.svg new file mode 100644 index 0000000..19383a4 --- /dev/null +++ b/static/images/menu.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file