feat: implement mobile menu toggle and update styles for navbar and footer

2025-06-14 19:35:29 +02:00
parent 6177803d35
commit 3b32f066f4
5 changed files with 193 additions and 74 deletions
@@ -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');
+    }
+});