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

60
src/components/Header.astro
View File

@@ -94,7 +94,7 @@ import '../styles/main.css';
</a> </a>
<!-- Mobile menu button --> <!-- 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"> <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> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg> </svg>
@@ -130,27 +130,48 @@ import '../styles/main.css';
<script> <script>
function toggleMobileMenu() { function toggleMobileMenu() {
console.log('toggleMobileMenu function called');
const menu = document.getElementById('mobile-menu'); const menu = document.getElementById('mobile-menu');
console.log('Menu element:', menu);
if (menu) { if (menu) {
const wasHidden = menu.classList.contains('mobile-menu-hidden');
menu.classList.toggle('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!');
} }
} }
// Close mobile menu when clicking outside // Initialize mobile menu functionality
document.addEventListener('click', function(event) {
const mobileMenu = document.getElementById('mobile-menu');
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
if (mobileMenu && mobileMenuBtn &&
!mobileMenu.contains(event.target as Node) &&
!mobileMenuBtn.contains(event.target as Node)) {
mobileMenu.classList.add('mobile-menu-hidden');
}
});
// Close mobile menu when clicking on a mobile nav link
document.addEventListener('DOMContentLoaded', function() { 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.getElementById('mobile-menu-btn');
if (mobileMenu && mobileMenuBtn &&
!mobileMenu.contains(event.target as Node) &&
!mobileMenuBtn.contains(event.target as Node)) {
mobileMenu.classList.add('mobile-menu-hidden');
}
});
// Close mobile menu when clicking on a mobile nav link
const mobileNavLinks = document.querySelectorAll('.mobile-nav-link'); const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
mobileNavLinks.forEach(link => { mobileNavLinks.forEach(link => {
link.addEventListener('click', function() { link.addEventListener('click', function() {
@@ -160,13 +181,10 @@ import '../styles/main.css';
} }
}); });
}); });
});
// Add active state to current page // Add active state to current page
document.addEventListener('DOMContentLoaded', function() {
const currentPath = window.location.pathname; const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll('.nav-link'); const navLinks = document.querySelectorAll('.nav-link');
const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
// Desktop navigation active state // Desktop navigation active state
navLinks.forEach(link => { navLinks.forEach(link => {
@@ -561,10 +579,6 @@ import '../styles/main.css';
display: block; display: block;
} }
.mobile-menu-hidden {
display: none !important;
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.mobile-menu { .mobile-menu {
display: none !important; display: none !important;