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

Refactor mobile menu implementation in Header component: update button ID, enhance toggle functionality with detailed logging, and streamline event listeners for improved user experience.

Browse Source
This commit is contained in:
becarta
2025-06-19 00:31:59 +02:00
parent 65713e5350
commit 063b5edbaa
1 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Header.astro
View File

@@ -94,7 +94,7 @@ import '../styles/main.css';
</a>
<!-- Mobile menu button -->
<button class="mobile-menu-btn" onclick="toggleMobileMenu()">
<button class="mobile-menu-btn" id="mobile-menu-btn">
<svg class="mobile-menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
@@ -130,17 +130,39 @@ import '../styles/main.css';
<script>
function toggleMobileMenu() {
console.log('toggleMobileMenu function called');
const menu = document.getElementById('mobile-menu');
console.log('Menu element:', menu);
if (menu) {
const wasHidden = menu.classList.contains('mobile-menu-hidden');
menu.classList.toggle('mobile-menu-hidden');
console.log('Mobile menu toggled:', !menu.classList.contains('mobile-menu-hidden'));
const isNowHidden = menu.classList.contains('mobile-menu-hidden');
console.log('Menu was hidden:', wasHidden, 'Menu is now hidden:', isNowHidden);
console.log('Menu classes:', menu.className);
} else {
console.log('Menu element not found!');
}
}
// Initialize mobile menu functionality
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM loaded, setting up mobile menu');
// Add click event to mobile menu button
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
console.log('Mobile menu button:', mobileMenuBtn);
if (mobileMenuBtn) {
mobileMenuBtn.addEventListener('click', function(e) {
console.log('Mobile menu button clicked!');
e.preventDefault();
toggleMobileMenu();
});
}
// Close mobile menu when clicking outside
document.addEventListener('click', function(event) {
const mobileMenu = document.getElementById('mobile-menu');
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
if (mobileMenu && mobileMenuBtn &&
!mobileMenu.contains(event.target as Node) &&
@@ -150,7 +172,6 @@ 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() {
@@ -160,13 +181,10 @@ import '../styles/main.css';
}
});
});
});
// Add active state to current page
document.addEventListener('DOMContentLoaded', function() {
const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll('.nav-link');
const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
// Desktop navigation active state
navLinks.forEach(link => {
@@ -561,10 +579,6 @@ import '../styles/main.css';
display: block;
}
.mobile-menu-hidden {
display: none !important;
}
@media (min-width: 1024px) {
.mobile-menu {
display: none !important;