opencode-skill/skills/thai-frontend-dev/scripts/templates/components/common/Header.astro

---
const navItems = [
  { name: 'หน้าแรก', href: '/' },
  { name: 'เกี่ยวกับเรา', href: '/about' },
  { name: 'บริการ', href: '/services' },
  { name: 'ติดต่อเรา', href: '/contact' },
];

const categories = [
  { name: 'สินค้า', href: '/products', hasDropdown: true },
];
---

<header id="header-component" class="fixed w-full top-0 z-40 bg-white shadow-md">
  <nav id="navbar" class="container-custom">
    <div id="navbar-container" class="flex items-center justify-between h-16 md:h-20">
      <!-- Logo -->
      <div id="logo-container">
        <a id="logo-link" href="/" class="flex items-center">
          <img id="logo-image" src="/images/logo.png" alt="Logo" class="h-10 md:h-12" />
        </a>
      </div>
      
      <!-- Desktop Navigation -->
      <div id="desktop-nav" class="hidden md:flex items-center space-x-6">
        <div id="nav-items-container">
          {navItems.map((item) => (
            <a id={`nav-${item.name.replace(' ', '-').toLowerCase()}`} href={item.href} class="nav-link text-secondary-700 hover:text-primary-600 font-medium transition-colors">
              {item.name}
            </a>
          ))}
        </div>
        
        <!-- Categories Dropdown -->
        <div id="categories-dropdown" class="relative group">
          <button id="categories-btn" class="nav-link flex items-center text-secondary-700 hover:text-primary-600 font-medium transition-colors">
            สินค้า
            <svg id="categories-chevron" class="w-4 h-4 ml-1" 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="categories-menu" class="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-left">
            <div id="categories-menu-container" class="py-2">
              <a id="category-all-products" href="/products" class="block px-4 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-600">
                สินค้าทั้งหมด
              </a>
              <a id="category-pipes" href="/products/pipes" class="block px-4 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-600">
                ท่อ
              </a>
              <a id="category-valves" href="/products/valves" class="block px-4 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-600">
                วาล์ว
              </a>
              <a id="category-fittings" href="/products/fittings" class="block px-4 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-600">
                ข้อต่อ
              </a>
            </div>
          </div>
        </div>
        
        <!-- CTA Button -->
        <div id="cta-container">
          <a id="cta-button" href="/contact" class="btn-primary px-4 py-2 rounded-lg font-medium">
            ติดต่อเรา
          </a>
        </div>
      </div>
      
      <!-- Mobile Menu Button -->
      <div id="mobile-menu-btn-container" class="md:hidden">
        <button id="mobile-menu-btn" class="p-2 text-secondary-700 hover:text-primary-600" aria-label="เมนู">
          <svg id="menu-icon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
    
    <!-- Mobile Menu -->
    <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
      <div id="mobile-menu-container" class="px-4 py-4 space-y-2">
        {navItems.map((item, index) => (
          <a id={`mobile-nav-${index}`} href={item.href} class="block py-2 text-secondary-700 hover:text-primary-600 font-medium">
            {item.name}
          </a>
        ))}
        <div id="mobile-categories-container">
          <button id="mobile-categories-btn" class="flex items-center justify-between w-full py-2 text-secondary-700 font-medium">
            สินค้า
            <svg id="mobile-chevron" class="w-4 h-4" 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-categories-menu" class="hidden pl-4 space-y-2">
            <a id="mobile-all-products" href="/products" class="block py-2 text-secondary-600">- สินค้าทั้งหมด</a>
            <a id="mobile-pipes" href="/products/pipes" class="block py-2 text-secondary-600">- ท่อ</a>
            <a id="mobile-valves" href="/products/valves" class="block py-2 text-secondary-600">- วาล์ว</a>
            <a id="mobile-fittings" href="/products/fittings" class="block py-2 text-secondary-600">- ข้อต่อ</a>
          </div>
        </div>
        <a id="mobile-cta" href="/contact" class="block w-full text-center btn-primary px-4 py-3 rounded-lg font-medium mt-4">
          ติดต่อเรา
        </a>
      </div>
    </div>
  </nav>
</header>

<script>
  // Mobile Menu Toggle
  const mobileMenuBtn = document.getElementById('mobile-menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  const mobileCategoriesBtn = document.getElementById('mobile-categories-btn');
  const mobileCategoriesMenu = document.getElementById('mobile-categories-menu');
  
  mobileMenuBtn?.addEventListener('click', () => {
    mobileMenu?.classList.toggle('hidden');
  });
  
  mobileCategoriesBtn?.addEventListener('click', () => {
    mobileCategoriesMenu?.classList.toggle('hidden');
  });
</script>