114 lines
4.3 KiB
Plaintext
114 lines
4.3 KiB
Plaintext
---
|
|
const navLinks = [
|
|
{ href: '/products', label: 'สินค้า' },
|
|
{ href: '/vendors', label: 'ร้านค้า' },
|
|
];
|
|
|
|
const currentPath = Astro.url.pathname;
|
|
---
|
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-40">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- Logo -->
|
|
<a href="/" class="flex items-center gap-2">
|
|
<span class="text-2xl font-bold text-blue-600">ร้านของเรา</span>
|
|
</a>
|
|
|
|
<!-- Desktop Nav -->
|
|
<nav class="hidden md:flex items-center gap-6">
|
|
{navLinks.map(link => (
|
|
<a
|
|
href={link.href}
|
|
class={`text-gray-600 hover:text-blue-600 transition-colors ${
|
|
currentPath.startsWith(link.href) ? 'text-blue-600 font-medium' : ''
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<!-- Search -->
|
|
<div class="hidden md:flex flex-1 max-w-md mx-8">
|
|
<form action="/products" method="GET" class="w-full">
|
|
<div class="relative">
|
|
<input
|
|
type="search"
|
|
name="q"
|
|
placeholder="ค้นหาสินค้า..."
|
|
class="w-full border border-gray-200 rounded-lg pl-10 pr-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
<svg class="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- Wishlist -->
|
|
<a href="/wishlist" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
|
|
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Account -->
|
|
<a href="/account" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
|
|
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Cart (handled by CartBadge) -->
|
|
<div id="cart-button"></div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<button class="md:hidden p-2 hover:bg-gray-100 rounded-lg" id="mobile-menu-btn">
|
|
<svg class="w-6 h-6 text-gray-600" 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>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div class="md:hidden hidden" id="mobile-menu">
|
|
<div class="py-4 space-y-2">
|
|
<form action="/products" method="GET" class="px-2 pb-4">
|
|
<input
|
|
type="search"
|
|
name="q"
|
|
placeholder="ค้นหาสินค้า..."
|
|
class="w-full border border-gray-200 rounded-lg px-4 py-2"
|
|
/>
|
|
</form>
|
|
{navLinks.map(link => (
|
|
<a
|
|
href={link.href}
|
|
class={`block px-4 py-2 ${
|
|
currentPath.startsWith(link.href) ? 'text-blue-600 bg-blue-50' : 'text-gray-600'
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
<hr class="my-2" />
|
|
<a href="/wishlist" class="block px-4 py-2 text-gray-600">สินค้าที่ชอบ</a>
|
|
<a href="/account" class="block px-4 py-2 text-gray-600">บัญชีของฉัน</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
const menuBtn = document.getElementById('mobile-menu-btn');
|
|
const menu = document.getElementById('mobile-menu');
|
|
|
|
menuBtn?.addEventListener('click', () => {
|
|
menu?.classList.toggle('hidden');
|
|
});
|
|
</script>
|