Fixed the hamburger icon not showing close button (#68)

Rakesh9100 · Jan 15, 2025 · fba7631 · fba7631
1 parent c8f4eee
commit fba7631
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 8 deletions.
diff --git a/assets/about/about.html b/assets/about/about.html
@@ -47,8 +47,9 @@
                 <img src="../images/logos/logo1.png" alt="Logo" class="logo">
                 <span class="logo-text">Eventica</span>
             </a>
-            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
+            <button class="mobile-menu-btn" aria-label="Toggle mobile menu" aria-expanded="false">
                 <i class="fas fa-bars"></i>
+                <i class="fas fa-times"></i>
             </button>
             <div class="nav-items">
                 <ul class="nav-links">

diff --git a/assets/contact/contact.html b/assets/contact/contact.html
@@ -47,8 +47,9 @@
                 <img src="../images/logos/logo1.png" alt="Logo" class="logo">
                 <span class="logo-text">Eventica</span>
             </a>
-            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
+            <button class="mobile-menu-btn" aria-label="Toggle mobile menu" aria-expanded="false">
                 <i class="fas fa-bars"></i>
+                <i class="fas fa-times"></i>
             </button>
             <div class="nav-items">
                 <ul class="nav-links">

diff --git a/assets/contributors/contributor.html b/assets/contributors/contributor.html
@@ -47,8 +47,9 @@
                 <img src="../images/logos/logo1.png" alt="Logo" class="logo">
                 <span class="logo-text">Eventica</span>
             </a>
-            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
+            <button class="mobile-menu-btn" aria-label="Toggle mobile menu" aria-expanded="false">
                 <i class="fas fa-bars"></i>
+                <i class="fas fa-times"></i>
             </button>
             <div class="nav-items">
                 <ul class="nav-links">

diff --git a/assets/pastevents/pastevents.html b/assets/pastevents/pastevents.html
@@ -47,8 +47,9 @@
                 <img src="../images/logos/logo1.png" alt="Logo" class="logo">
                 <span class="logo-text">Eventica</span>
             </a>
-            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
+            <button class="mobile-menu-btn" aria-label="Toggle mobile menu" aria-expanded="false">
                 <i class="fas fa-bars"></i>
+                <i class="fas fa-times"></i>
             </button>
             <div class="nav-items">
                 <div class="search-container">

diff --git a/index.html b/index.html
@@ -51,8 +51,9 @@
                 <img src="./assets/images/logos/logo1.png" alt="Logo" class="logo">
                 <span class="logo-text">Eventica</span>
             </a>
-            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
+            <button class="mobile-menu-btn" aria-label="Toggle mobile menu" aria-expanded="false">
                 <i class="fas fa-bars"></i>
+                <i class="fas fa-times"></i>
             </button>
             <div class="nav-items">
                 <div class="search-container">

diff --git a/script.js b/script.js
@@ -238,13 +238,32 @@ const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
 const navItems = document.querySelector('.nav-items');
 
 mobileMenuBtn.addEventListener('click', () => {
+    mobileMenuBtn.classList.toggle('active');
     navItems.classList.toggle('active');
+
+    // Update accessibility attributes
+    const isOpen = navItems.classList.contains('active');
+    mobileMenuBtn.setAttribute('aria-expanded', isOpen);
+    mobileMenuBtn.setAttribute('aria-label', isOpen ? 'Close mobile menu' : 'Open mobile menu');
 });
 
 // Close mobile menu when clicking outside
 document.addEventListener('click', (e) => {
-    if (!navItems.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
+    if (!navItems.contains(e.target) && !mobileMenuBtn.contains(e.target) && navItems.classList.contains('active')) {
+        mobileMenuBtn.classList.remove('active');
         navItems.classList.remove('active');
+        mobileMenuBtn.setAttribute('aria-expanded', 'false');
+        mobileMenuBtn.setAttribute('aria-label', 'Open mobile menu');
+    }
+});
+
+// Close mobile menu when window is resized
+window.addEventListener('resize', () => {
+    if (window.innerWidth > 1024 && navItems.classList.contains('active')) {
+        mobileMenuBtn.classList.remove('active');
+        navItems.classList.remove('active');
+        mobileMenuBtn.setAttribute('aria-expanded', 'false');
+        mobileMenuBtn.setAttribute('aria-label', 'Open mobile menu');
     }
 });
 

diff --git a/style.css b/style.css
@@ -621,7 +621,35 @@ body.dark-mode footer {
     border: none;
     cursor: pointer;
     padding: 1rem;
-    transform: scale(1.4);
+    z-index: 1000;
+    position: relative;
+    width: 40px;
+    height: 40px;
+}
+
+.mobile-menu-btn i {
+    font-size: 24px;
+    color: var(--text-color);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.mobile-menu-btn .fa-times {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.mobile-menu-btn.active .fa-bars {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.mobile-menu-btn.active .fa-times {
+    opacity: 1;
+    visibility: visible;
 }
 
 /* Testimonials Section Css */
@@ -1035,8 +1063,9 @@ footer {
         width: 100%;
         text-align: center;
         padding: 1rem 0;
-        border-bottom: 1px solid #eeeeee;
         margin-left: 0;
+        transition: all 0.3s ease;
+        border-bottom: 1px solid #eeeeee;
     }
 
     body.dark-mode .nav-links a {