From f54c020097a528e0feb7d5505324b24d0670ea60 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@gmailcom>
Date: Thu, 26 Feb 2026 10:31:41 +0700
Subject: [PATCH] Fix Header.tsx syntax error, add all products to navigation
 menu

- Fixed truncated Header.tsx with missing closing tags
- Updated navigation to include all 38 products in 7 categories
- Added 2-column dropdown grid layout for desktop
- Added nested sub-categories for mobile menu
---
 src/components/layout/Header.tsx | 120 ++++++++++++++++++++-----------
 src/data/site-config.ts          |   8 ++-
 2 files changed, 86 insertions(+), 42 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 2352a8586..8fa58ec4a 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -81,30 +81,32 @@ export default function Header() {
                 
                 {/* Dropdown */}
                 {item.children && activeDropdown === item.href && (
-                  <div className="absolute top-full left-0 w-64 bg-white shadow-lg rounded-lg py-2 mt-1 border border-secondary-100">
-                    {item.children.map((child) => (
-                      <div key={child.href} className="relative group">
-                        <Link
-                          href={child.href}
-                          className="block px-4 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-700 transition-colors"
-                        >
-                          {child.label}
-                        </Link>
-                        {child.children && (
-                          <div className="hidden group-hover:block absolute left-full top-0 w-56 bg-white shadow-lg rounded-lg py-2 border border-secondary-100">
-                            {child.children.map((subChild) => (
-                              <Link
-                                key={subChild.href}
-                                href={subChild.href}
-                                className="block px-4 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-700"
-                              >
-                                {subChild.label}
-                              </Link>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    ))}
+                  <div className="absolute top-full left-1/2 -translate-x-1/2 min-w-[600px] bg-white shadow-xl rounded-lg py-4 mt-2 border border-secondary-100">
+                    <div className="grid grid-cols-2 gap-1 px-4">
+                      {item.children.map((child) => (
+                        <div key={child.href} className="relative group">
+                          <Link
+                            href={child.href}
+                            className="block px-3 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-700 transition-colors rounded font-medium"
+                          >
+                            {child.label}
+                          </Link>
+                          {child.children && (
+                            <div className="hidden group-hover:block absolute left-full top-0 ml-2 w-56 bg-white shadow-xl rounded-lg py-2 border border-secondary-100 max-h-96 overflow-y-auto">
+                              {child.children.map((subChild) => (
+                                <Link
+                                  key={subChild.href}
+                                  href={subChild.href}
+                                  className="block px-4 py-2 text-secondary-600 hover:bg-primary-50 hover:text-primary-700 text-sm"
+                                >
+                                  {subChild.label}
+                                </Link>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
                   </div>
                 )}
               </div>
@@ -131,28 +133,66 @@ export default function Header() {
 
         {/* Mobile Menu */}
         {mobileMenuOpen && (
-          <div className="lg:hidden py-4 border-t border-secondary-200">
+          <div className="lg:hidden py-4 border-t border-secondary-200 max-h-[80vh] overflow-y-auto">
             {mainNavigation.map((item) => (
               <div key={item.href}>
-                <Link
-                  href={item.href}
-                  className="block px-4 py-2 text-secondary-700 hover:text-primary-600"
-                  onClick={() => setMobileMenuOpen(false)}
-                >
-                  {item.label}
-                </Link>
+                {item.children ? (
+                  <div className="border-b border-secondary-100">
+                    <div className="px-4 py-3 font-semibold text-secondary-900 bg-secondary-50">
+                      {item.label}
+                    </div>
+                    <div className="pl-4">
+                      {item.children.map((child) => (
+                        <div key={child.href}>
+                          <Link
+                            href={child.href}
+                            className="block px-4 py-2 text-secondary-700 hover:text-primary-600 hover:bg-primary-50"
+                            onClick={() => setMobileMenuOpen(false)}
+                          >
+                            {child.label}
+                          </Link>
+                          {child.children && (
+                            <div className="pl-4 bg-secondary-50">
+                              {child.children.map((subChild) => (
+                                <Link
+                                  key={subChild.href}
+                                  href={subChild.href}
+                                  className="block px-4 py-2 text-secondary-600 hover:text-primary-600 text-sm"
+                                  onClick={() => setMobileMenuOpen(false)}
+                                >
+                                  {subChild.label}
+                                </Link>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <Link
+                    href={item.href}
+                    className="block px-4 py-3 text-secondary-700 hover:text-primary-600 font-medium"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    {item.label}
+                  </Link>
+                )}
               </div>
             ))}
-            <Link
-              href="/contact-us"
-              className="block mx-4 mt-4 btn-primary text-center"
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              ติดต่อเรา
-            </Link>
+            <div className="p-4">
+              <Link
+                href="/contact-us"
+                className="btn-primary block text-center"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                ติดต่อเรา
+              </Link>
+            </div>
           </div>
         )}
+
       </nav>
     </header>
   );
-}
+}
\ No newline at end of file
diff --git a/src/data/site-config.ts b/src/data/site-config.ts
index 7fbb3a6fa..34d254c42 100644
--- a/src/data/site-config.ts
+++ b/src/data/site-config.ts
@@ -543,7 +543,7 @@ export const featuredProducts = [
   productCategories.find(p => p.id === 'valve')!,
 ];
 
-// Main Navigation - matching original site structure
+// Main Navigation - matching original site structure with ALL products
 export const mainNavigation: NavItem[] = [
   { label: 'หน้าแรก', labelEn: 'Home', href: '/' },
   { label: 'เกี่ยวกับเรา', labelEn: 'About Us', href: '/about-us/' },
@@ -572,6 +572,7 @@ export const mainNavigation: NavItem[] = [
         labelEn: 'Valve',
         href: '/วาล์ว-valve/',
         children: [
+          { label: 'วาล์ว Valve', labelEn: 'Valve', href: '/วาล์ว-valve/' },
           { label: 'Groove Coupling', labelEn: 'Groove Coupling', href: '/groove-coupling/' },
           { label: 'Pipe Coupling', labelEn: 'Pipe Coupling', href: '/pipe-coupling/' },
           { label: 'DUKELARRSEN', labelEn: 'DUKELARRSEN', href: '/dukelarrsen/' },
@@ -583,6 +584,7 @@ export const mainNavigation: NavItem[] = [
         labelEn: 'Hangers',
         href: '/แฮงเกอร์-แคล้ม-โบลท์-แหว/',
         children: [
+          { label: 'แฮงเกอร์ แคล้ม โบลท์ แหวน', labelEn: 'Hanger Clamp Bolt', href: '/แฮงเกอร์-แคล้ม-โบลท์-แหว/' },
           { label: 'เควิสแฮงเกอร์', labelEn: 'Clevis Hanger', href: '/เควิสแฮงเกอร์/' },
           { label: 'สปริทริงแฮงเกอร์ SR19', labelEn: 'Split Ring Hanger', href: '/สปริทริงแฮงเกอร์-sr19-adjustable-split-ring-hanger/' },
           { label: 'แคล้มฟันจระเข้', labelEn: 'Beam Clamp', href: '/แคล้มฟันจระเข้-beam-clamp/' },
@@ -591,6 +593,7 @@ export const mainNavigation: NavItem[] = [
           { label: 'ยูโบลท์', labelEn: 'U-Bolt', href: '/ยูโบลท์-u-bolt/' },
           { label: 'สตัดเกลียวตลอด', labelEn: 'Threaded Rod', href: '/สตัดเกลียวตลอด-เหล็ก-threaded-rod/' },
           { label: 'พุกต่างๆ', labelEn: 'Anchors', href: '/พุกต่างๆ/' },
+          { label: 'พุกเหล็ก Sleeve Anchor', labelEn: 'Sleeve Anchor', href: '/พุกเหล็ก-sleeve-anchor-bolt/' },
         ],
       },
       {
@@ -609,8 +612,8 @@ export const mainNavigation: NavItem[] = [
         labelEn: 'Fire Protection',
         href: '/อุปกรณ์ดับเพลิง/',
         children: [
-          { label: 'ท่อสแตนเลส Realflex', labelEn: 'Realflex', href: '/realflex/' },
           { label: 'อุปกรณ์ดับเพลิง', labelEn: 'Fire Extinguishers', href: '/อุปกรณ์ดับเพลิง/' },
+          { label: 'ท่อสแตนเลส Realflex', labelEn: 'Realflex', href: '/realflex/' },
         ],
       },
       {
@@ -618,6 +621,7 @@ export const mainNavigation: NavItem[] = [
         labelEn: 'Fencing',
         href: '/ระบบรั้ว/',
         children: [
+          { label: 'ระบบรั้ว', labelEn: 'Fencing System', href: '/ระบบรั้ว/' },
           { label: 'รั้วเทวดา', labelEn: 'Tevada Fence', href: '/รั้วเทวดา/' },
         ],
       },