From bb7007aa88a0f1c73abd7ef705cf3279edaefdfd Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@Kunthawats-MacBook-Pro.local>
Date: Thu, 11 Jun 2026 11:09:15 +0700
Subject: [PATCH] feat(mobile-menu): add collapsible products dropdown matching
 desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mobile menu previously had only flat links (หน้าแรก, เกี่ยวกับเรา,
สินค้าทั้งหมด, ผลงาน, ติดต่อเรา) while the desktop menu had a mega
dropdown with 7 product categories (ระบบท่อ, ฉนวนหุ้มท่อ, เครื่องเชื่อมท่อ,
ระบบน้ำ, อุปกรณ์ปรับอากาศ, อุปกรณ์ดับเพลิง, ระบบรั้ว) and 27
subcategory links.

Updated mobile menu in BaseLayout.astro to mirror the desktop
structure: "สินค้าทั้งหมด" is now a collapsible button that
expands to show all 7 categories and their 27 subcategory links,
plus a "ดูสินค้าทั้งหมด →" CTA at the bottom.

Toggle behavior:
- Click button: opens submenu, rotates chevron 180°, sets
  aria-expanded="true"
- Click again: closes submenu, returns chevron
- aria-controls="mobile-products-submenu" for accessibility

Reverted Header.astro changes — that file is not actually used
by the site (BaseLayout.astro has its own inline header with the
real desktop mega menu and mobile menu).

Mobile menu now has parity with desktop navigation structure.
---
 src/components/common/Header.astro | 12 +++++++++
 src/layouts/BaseLayout.astro       | 41 +++++++++++++++++++++++++++++-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Header.astro b/src/components/common/Header.astro
index 0858486..d89fdc7 100644
--- a/src/components/common/Header.astro
+++ b/src/components/common/Header.astro
@@ -133,4 +133,16 @@ const currentPath = Astro.url.pathname;
   menuToggle?.addEventListener('click', () => {
     mobileMenu?.classList.toggle('hidden');
   });
+
+  // Mobile products dropdown toggle
+  const dropdownToggle = document.querySelector('[data-mobile-dropdown-toggle]');
+  const dropdown = document.querySelector('[data-mobile-dropdown]');
+  const dropdownIcon = document.querySelector('[data-mobile-dropdown-icon]');
+
+  dropdownToggle?.addEventListener('click', () => {
+    const isOpen = !dropdown?.classList.contains('hidden');
+    dropdown?.classList.toggle('hidden');
+    dropdownIcon?.classList.toggle('rotate-180', isOpen ? false : true);
+    dropdownToggle.setAttribute('aria-expanded', String(!isOpen));
+  });
 </script>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index b12cc37..a2f0ce8 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -423,7 +423,34 @@ const productLinks = [
         <a href="/" class="block text-neutral-600 hover:text-primary-600 font-medium py-2">หน้าแรก</a>
         <a href="/about-us" class="block text-neutral-600 hover:text-primary-600 font-medium py-2">เกี่ยวกับเรา</a>
         <a href="/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1" class="block text-neutral-600 hover:text-primary-600 font-medium py-2">บทความ</a>
-        <a href="/all-products" class="block text-neutral-600 hover:text-primary-600 font-medium py-2">สินค้าทั้งหมด</a>
+
+        <!-- Mobile Products dropdown (collapsible) -->
+        <div>
+          <button
+            id="mobile-products-toggle"
+            type="button"
+            class="w-full flex items-center justify-between text-neutral-600 hover:text-primary-600 font-medium py-2"
+            aria-expanded="false"
+            aria-controls="mobile-products-submenu"
+          >
+            <span>สินค้าทั้งหมด</span>
+            <svg id="mobile-products-icon" class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          <div id="mobile-products-submenu" class="hidden pl-4 mt-2 space-y-4 border-l-2 border-neutral-100">
+            {categories.map((cat) => (
+              <div class="space-y-1">
+                <a href={cat.slug} class="block text-sm font-semibold text-primary-600 py-1.5">{cat.name}</a>
+                {cat.subcategories.map((sub) => (
+                  <a href={sub.slug} class="block text-sm text-neutral-600 hover:text-primary-600 py-1 pl-2">{sub.name}</a>
+                ))}
+              </div>
+            ))}
+            <a href="/all-products" class="block text-sm font-semibold text-primary-600 hover:bg-primary-50 py-2 mt-2">ดูสินค้าทั้งหมด →</a>
+          </div>
+        </div>
+
         <a href="/portfolio" class="block text-neutral-600 hover:text-primary-600 font-medium py-2">ผลงาน</a>
         <a href="/contact-us" class="block bg-primary-600 text-white text-center py-3 rounded-lg font-medium mt-4">ติดต่อเรา</a>
       </div>
@@ -731,6 +758,18 @@ const productLinks = [
       mobileMenu?.classList.toggle('hidden');
     });
 
+    // Mobile products dropdown
+    const mobileProductsToggle = document.getElementById('mobile-products-toggle');
+    const mobileProductsSubmenu = document.getElementById('mobile-products-submenu');
+    const mobileProductsIcon = document.getElementById('mobile-products-icon');
+
+    mobileProductsToggle?.addEventListener('click', () => {
+      const isOpen = !mobileProductsSubmenu?.classList.contains('hidden');
+      mobileProductsSubmenu?.classList.toggle('hidden');
+      mobileProductsIcon?.classList.toggle('rotate-180', !isOpen);
+      mobileProductsToggle.setAttribute('aria-expanded', String(!isOpen));
+    });
+
     // ============================================
     // MAGNETIC BUTTON EFFECT
     // ============================================