365DevNet/Omoluabi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mobile menu functionality in Header component: add toggle behavior, close menu on link click, and adjust CSS for better visibility.

Browse Source
This commit is contained in:
becarta
2025-06-19 00:29:41 +02:00
parent f530b84499
commit 65713e5350
1 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Header.astro
View File

@@ -104,7 +104,7 @@ import '../styles/main.css';
</div>
<!-- Mobile Navigation -->
<div id="mobile-menu" class="mobile-menu">
<div id="mobile-menu" class="mobile-menu mobile-menu-hidden">
<div class="mobile-menu-content">
<a href="/home" class="mobile-nav-link">
🏠 Home
@@ -133,6 +133,7 @@ import '../styles/main.css';
const menu = document.getElementById('mobile-menu');
if (menu) {
menu.classList.toggle('mobile-menu-hidden');
console.log('Mobile menu toggled:', !menu.classList.contains('mobile-menu-hidden'));
}
}
@@ -148,6 +149,19 @@ import '../styles/main.css';
}
});
// Close mobile menu when clicking on a mobile nav link
document.addEventListener('DOMContentLoaded', function() {
const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
mobileNavLinks.forEach(link => {
link.addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
if (menu) {
menu.classList.add('mobile-menu-hidden');
}
});
});
});
// Add active state to current page
document.addEventListener('DOMContentLoaded', function() {
const currentPath = window.location.pathname;
@@ -537,12 +551,16 @@ import '../styles/main.css';
/* Mobile Menu */
.mobile-menu {
display: block;
display: none;
background: white;
border-top: 1px solid rgba(229, 229, 229, 0.5);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.mobile-menu:not(.mobile-menu-hidden) {
display: block;
}
.mobile-menu-hidden {
display: none !important;
}