Mobile Menu : not working

index.html

@@ -1361,68 +1361,82 @@ alt="Dynamics 365 Logistics Dashboard"
       </div>
     </div>
   </footer>
-<script> 
-  // Init animations and handle mobile menu functionality after scripts loaded
-  document.addEventListener('DOMContentLoaded', () => {
-    // Initialize AOS (Animation On Scroll)
-    if (window.AOS) {
-      AOS.init({
-        duration: 800,
-        easing: 'ease-in-out',
-        once: true,
-        mirror: false,
-        offset: 120,
-        disable: window.innerWidth < 768
-      });
-    }
-
-    // Replace Feather icons
-    if (window.feather) {
-      feather.replace();
-    }
-
-    // Mobile menu toggle functionality
-    const mobileMenuButton = document.getElementById('mobile-menu-button');
-    const mobileMenu = document.getElementById('mobile-menu');
-
-    if (mobileMenuButton && mobileMenu) {
-      mobileMenuButton.addEventListener('click', () => {
-        // Toggle the mobile menu visibility
-        mobileMenu.classList.toggle('hidden');
-
-        // Change icon from menu to close (or vice versa)
-        const icon = mobileMenuButton.querySelector('i');
-        if (mobileMenu.classList.contains('hidden')) {
-          feather.icons.menu.replace(); // Show menu icon
-        } else {
-          feather.icons.x.replace(); // Show close (X) icon
-        }
-      });
-    }
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize AOS
+  if (window.AOS) {
+    AOS.init({
+      duration: 800,
+      easing: 'ease-in-out',
+      once: true,
+      mirror: false,
+      offset: 120,
+      disable: window.innerWidth < 768
+    });
+  }
 
-    // Function to toggle mobile dropdowns
-    window.toggleMobileDropdown = function(id) {
-      const dropdown = document.getElementById(id);
-      dropdown.classList.toggle('hidden');
+  // Replace Feather icons
+  if (window.feather) {
+    feather.replace();
+  }
 
-      // Update chevron icon
-      const button = dropdown.previousElementSibling;
-      const icon = button.querySelector('i');
-      if (dropdown.classList.contains('hidden')) {
-        feather.icons['chevron-down'].replace(); // Show down arrow
+  // Mobile menu functionality
+  const mobileMenuButton = document.getElementById('mobile-menu-button');
+  const mobileMenu = document.getElementById('mobile-menu');
+
+  if (mobileMenuButton && mobileMenu) {
+    mobileMenuButton.addEventListener('click', function() {
+      const isExpanded = mobileMenu.classList.toggle('hidden');
+      mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
+      
+      // Change icon
+      const icon = mobileMenuButton.querySelector('i');
+      if (isExpanded) {
+        icon.setAttribute('data-feather', 'menu');
       } else {
-        feather.icons['chevron-up'].replace(); // Show up arrow
+        icon.setAttribute('data-feather', 'x');
       }
-    };
+      feather.replace();
+    });
+  }
 
+  // Toggle dropdown functionality
+  window.toggleMobileDropdown = function(id) {
+    const dropdown = document.getElementById(id);
+    const isExpanded = dropdown.classList.toggle('hidden');
+    
+    // Find the button and icon
+    const button = dropdown.previousElementSibling;
+    const icon = button.querySelector('i');
+    
+    if (isExpanded) {
+      icon.setAttribute('data-feather', 'chevron-down');
+    } else {
+      icon.setAttribute('data-feather', 'chevron-up');
+    }
+    feather.replace();
+  };
+
+  // Close menu when clicking outside
+  document.addEventListener('click', function(event) {
+    if (!mobileMenu.classList.contains('hidden') && 
+        !mobileMenu.contains(event.target) && 
+        event.target !== mobileMenuButton &&
+        !mobileMenuButton.contains(event.target)) {
+      mobileMenu.classList.add('hidden');
+      mobileMenuButton.querySelector('i').setAttribute('data-feather', 'menu');
+      mobileMenuButton.setAttribute('aria-expanded', 'false');
+      feather.replace();
+    }
   });
 
-  // Refresh AOS on window resize (guard if AOS is present)
+  // AOS refresh on resize
   window.addEventListener('resize', function() {
     if (window.AOS && AOS.refreshHard) {
       AOS.refreshHard();
     }
   });
+});
 </script>
 </body>
 </html>

style.css

@@ -24,6 +24,13 @@ p {
 /* Mobile menu styles */
 #mobile-menu {
   transition: all 0.3s ease;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 50;
   max-height: 0;
   overflow: hidden;
 }
@@ -39,27 +46,25 @@ p {
   overflow: hidden;
   transition: max-height 0.3s ease;
   padding-left: 1rem;
+  background-color: #f9fafb;
 }
 
 #mobile-menu [id$="-dropdown"]:not(.hidden) {
   max-height: 1000px;
 }
 
-/* Mobile menu content */
-#mobile-menu-content {
-  padding: 1rem;
-}
-
 /* Mobile menu links */
 #mobile-menu a {
   display: block;
   padding: 0.75rem 1rem;
+  color: #374151;
   border-radius: 0.375rem;
   transition: background-color 0.2s;
 }
 
 #mobile-menu a:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: #f3f4f6;
+  color: #1f2937;
 }
 
 /* Dropdown buttons */
@@ -67,12 +72,23 @@ p {
   width: 100%;
   text-align: left;
   padding: 0.75rem 1rem;
+  color: #374151;
   border-radius: 0.375rem;
   transition: background-color 0.2s;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 #mobile-menu button[onclick^="toggleMobileDropdown"]:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: #f3f4f6;
+  color: #1f2937;
+}
+
+/* CTA button in mobile menu */
+#mobile-menu .bg-\\[\\#002060\\] {
+  margin: 1rem;
+  text-align: center;
 }
 .card p:last-child {
 	margin-bottom: 0;