feat: implement responsive mobile menu and navigation enhancements across all pages

scripts/main.js

@@ -1512,9 +1512,9 @@ function initQuoteBadge() {
   // Calculate total count
   const count = quoteItems.reduce((total, item) => total + item.quantity, 0);
 
-  // Update quote badge
-  const quoteLink = document.querySelector('a[href="quote.html"]');
-  if (quoteLink) {
+  // Update quote badge on all quote links (desktop nav, mobile button, mobile menu)
+  const quoteLinks = document.querySelectorAll('a[href="quote.html"]');
+  quoteLinks.forEach((quoteLink) => {
     // Remove existing badge
     const existingBadge = quoteLink.querySelector(".quote-badge");
     if (existingBadge) {
@@ -1530,7 +1530,7 @@ function initQuoteBadge() {
       quoteLink.style.position = "relative";
       quoteLink.appendChild(badge);
     }
-  }
+  });
 }
 
 // Initialize Add To Quote functionality on product detail pages
@@ -1721,6 +1721,7 @@ document.addEventListener("DOMContentLoaded", function () {
   initQuoteBadge();
   initAddToQuote();
   initHeroCarousel();
+  initMobileMenu();
 });
 
 // Hero Carousel Functionality
@@ -1827,4 +1828,65 @@ function initHeroCarousel() {
   }, 5000);
 }
 
-// Version: 4.7 - Use original image height as standard for carousel uniformity
+// Mobile Menu Functionality
+function initMobileMenu() {
+  const mobileMenuButton = document.getElementById("mobile-menu-button");
+  const mobileMenuClose = document.getElementById("mobile-menu-close");
+  const mobileMenu = document.getElementById("mobile-menu");
+  const mobileMenuOverlay = document.getElementById("mobile-menu-overlay");
+
+  if (
+    !mobileMenuButton ||
+    !mobileMenuClose ||
+    !mobileMenu ||
+    !mobileMenuOverlay
+  ) {
+    console.log("Mobile menu elements not found");
+    return;
+  }
+
+  // Function to open mobile menu
+  function openMobileMenu() {
+    mobileMenu.classList.remove("translate-x-full");
+    mobileMenuOverlay.classList.remove("hidden");
+    document.body.style.overflow = "hidden"; // Prevent background scrolling
+  }
+
+  // Function to close mobile menu
+  function closeMobileMenu() {
+    mobileMenu.classList.add("translate-x-full");
+    mobileMenuOverlay.classList.add("hidden");
+    document.body.style.overflow = ""; // Restore scrolling
+  }
+
+  // Event listeners
+  mobileMenuButton.addEventListener("click", openMobileMenu);
+  mobileMenuClose.addEventListener("click", closeMobileMenu);
+  mobileMenuOverlay.addEventListener("click", closeMobileMenu);
+
+  // Close menu when clicking on navigation links
+  const mobileNavLinks = mobileMenu.querySelectorAll("a");
+  mobileNavLinks.forEach((link) => {
+    link.addEventListener("click", closeMobileMenu);
+  });
+
+  // Close menu on escape key
+  document.addEventListener("keydown", (e) => {
+    if (
+      e.key === "Escape" &&
+      !mobileMenu.classList.contains("translate-x-full")
+    ) {
+      closeMobileMenu();
+    }
+  });
+
+  // Handle window resize - close menu if screen becomes large
+  window.addEventListener("resize", () => {
+    if (window.innerWidth >= 640) {
+      // sm breakpoint
+      closeMobileMenu();
+    }
+  });
+}
+
+// Version: 4.8 - Added mobile hamburger menu functionality

scripts/quote.js

@@ -306,9 +306,9 @@ class QuoteManager {
   // Update quote badge in navigation
   updateQuoteBadge() {
     const count = this.getQuoteCount();
-    const quoteLink = document.querySelector('a[href="quote.html"]');
+    const quoteLinks = document.querySelectorAll('a[href="quote.html"]');
 
-    if (quoteLink) {
+    quoteLinks.forEach((quoteLink) => {
       // Remove existing badge
       const existingBadge = quoteLink.querySelector(".quote-badge");
       if (existingBadge) {
@@ -324,7 +324,7 @@ class QuoteManager {
         quoteLink.style.position = "relative";
         quoteLink.appendChild(badge);
       }
-    }
+    });
   }
 
   // Show success message when item is added