ben7sys/web7sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Successfully implemented the following improvements:

Browse Source 
Mobile Menu Optimization ✓
Fixed duplicate script loading issue
Improved menu closing behavior after item selection
Added smooth scroll for anchor links
Enhanced touch targets for better mobile usability
Added proper ARIA attributes for accessibility
Implemented fade animation for menu transitions
Responsive Design Improvements ✓
Adjusted menu height to use viewport units
Added proper padding for notched phones
Improved touch target sizes
Enhanced menu item spacing and interaction feedback
Fixed menu scrolling on long content
Performance & Accessibility Enhancements ✓
Added meta description for SEO
Implemented proper aria-expanded states
Added smooth animations with performance considerations
Improved event listener efficiency
Added empty favicon to prevent 404 errors
Code Quality Improvements ✓
Removed duplicate code
Improved event handling
Enhanced error handling
Better organization of CSS media queries
Added proper touch device detection
All changes maintain existing functionality while improving user experience, accessibility, and performance. The mobile menu now behaves more naturally, with proper closing behavior and smooth transitions.
This commit is contained in:
ben7sys
2024-11-17 05:09:53 +01:00
parent ebb5cdd978
commit d596aacfad
4 changed files with 124 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
public/js/components.js
View File

@@ -1,6 +1,3 @@
// Custom event for when components are fully loaded
const COMPONENTS_LOADED_EVENT = new Event('componentsLoaded');
document.addEventListener('DOMContentLoaded', function() {
// Helper function to handle component loading
async function loadComponent(url, insertPosition) {
@@ -28,7 +25,7 @@ document.addEventListener('DOMContentLoaded', function() {
]).then(results => {
if (results.every(Boolean)) {
// Dispatch custom event when all components are loaded
document.dispatchEvent(COMPONENTS_LOADED_EVENT);
document.dispatchEvent(new Event('componentsLoaded'));
}
}).catch(error => {
console.warn('Error loading components:', error);
@@ -55,16 +52,44 @@ document.addEventListener('DOMContentLoaded', function() {
const mobileMenuToggle = header.querySelector('.mobile-menu-toggle');
const navMenu = header.querySelector('.nav-menu');
function closeMenu() {
navMenu.classList.remove('active');
const menuIcon = mobileMenuToggle.querySelector('i');
if (menuIcon) {
menuIcon.className = 'fas fa-bars';
}
mobileMenuToggle.setAttribute('aria-expanded', 'false');
}
// Mobile menu toggle
if (mobileMenuToggle && navMenu) {
mobileMenuToggle.setAttribute('aria-expanded', 'false');
mobileMenuToggle.addEventListener('click', () => {
const isExpanded = navMenu.classList.contains('active');
navMenu.classList.toggle('active');
const menuIcon = mobileMenuToggle.querySelector('i');
if (menuIcon) {
menuIcon.className = navMenu.classList.contains('active')
? 'fas fa-times'
: 'fas fa-bars';
menuIcon.className = isExpanded ? 'fas fa-bars' : 'fas fa-times';
}
mobileMenuToggle.setAttribute('aria-expanded', (!isExpanded).toString());
});
// Add click handlers for nav items
navMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', (e) => {
// Only close menu if it's a same-page anchor link
if (link.getAttribute('href').startsWith('#')) {
e.preventDefault();
const targetId = link.getAttribute('href').slice(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
closeMenu();
targetElement.scrollIntoView({ behavior: 'smooth' });
}
}
closeMenu();
});
});
// Close menu when clicking outside
@@ -72,11 +97,7 @@ document.addEventListener('DOMContentLoaded', function() {
if (navMenu.classList.contains('active') &&
!e.target.closest('.nav-menu') &&
!e.target.closest('.mobile-menu-toggle')) {
navMenu.classList.remove('active');
const menuIcon = mobileMenuToggle.querySelector('i');
if (menuIcon) {
menuIcon.className = 'fas fa-bars';
}
closeMenu();
}
});
}