From 3b32f066f47ea634bb32a3ac9f770036291fd396 Mon Sep 17 00:00:00 2001 From: Tobias Feigel Date: Sat, 14 Jun 2025 19:35:29 +0200 Subject: [PATCH] feat: implement mobile menu toggle and update styles for navbar and footer --- assets/js/navbar.js | 33 ++++++++ site/snippets/footer.php | 162 ++++++++++++++++++++++++++----------- site/snippets/header.php | 7 +- site/snippets/navbar.php | 2 +- site/templates/default.php | 63 +++++++++------ 5 files changed, 193 insertions(+), 74 deletions(-) create mode 100644 assets/js/navbar.js diff --git a/assets/js/navbar.js b/assets/js/navbar.js new file mode 100644 index 0000000..12b1879 --- /dev/null +++ b/assets/js/navbar.js @@ -0,0 +1,33 @@ +// Mobile Menu Toggle +const mobileMenuButton = document.getElementById('mobile-menu-button'); +const mobileMenu = document.getElementById('mobile-menu'); +const menuIcon = document.getElementById('menu-icon'); +const closeIcon = document.getElementById('close-icon'); + +mobileMenuButton.addEventListener('click', () => { + mobileMenu.classList.toggle('hidden'); + menuIcon.classList.toggle('hidden'); + closeIcon.classList.toggle('hidden'); +}); + +// Mobile Dropdown Toggle +const mobileDropdownBtns = document.querySelectorAll('.mobile-dropdown-btn'); + +mobileDropdownBtns.forEach(btn => { + btn.addEventListener('click', () => { + const content = btn.nextElementSibling; + const arrow = btn.querySelector('.mobile-dropdown-arrow'); + + content.classList.toggle('hidden'); + arrow.classList.toggle('rotate-180'); + }); +}); + +// Close mobile menu when clicking outside +document.addEventListener('click', (e) => { + if (!mobileMenuButton.contains(e.target) && !mobileMenu.contains(e.target)) { + mobileMenu.classList.add('hidden'); + menuIcon.classList.remove('hidden'); + closeIcon.classList.add('hidden'); + } +}); \ No newline at end of file diff --git a/site/snippets/footer.php b/site/snippets/footer.php index f8ea386..1ba17f3 100644 --- a/site/snippets/footer.php +++ b/site/snippets/footer.php @@ -8,75 +8,143 @@ More about snippets: https://getkirby.com/docs/guide/templates/snippets */ + ?> -