106 lines
4.3 KiB
TypeScript
106 lines
4.3 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
|
|
const navLinks = [
|
|
{ href: '/', label: 'ပင်မစာမျက်နှာ' },
|
|
{ href: '/category/ai-news', label: 'AI သတင်းများ' },
|
|
{ href: '/category/tutorials', label: 'သင်ခန်းစာများ' },
|
|
{ href: '/category/tips-tricks', label: 'အကြံပြုချက်များ' },
|
|
{ href: '/category/upcoming', label: 'လာမည့်အရာများ' },
|
|
]
|
|
|
|
export default function Header() {
|
|
const [mobileOpen, setMobileOpen] = useState(false)
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<header className="bg-white shadow-sm sticky top-0 z-50">
|
|
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center space-x-2 flex-shrink-0">
|
|
<span className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white font-bold text-lg">B</span>
|
|
<span className="text-xl font-bold text-gray-900 font-burmese">Burmddit</span>
|
|
</Link>
|
|
|
|
{/* Desktop Nav */}
|
|
<div className="hidden md:flex items-center space-x-1">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`px-3 py-2 rounded-lg text-sm font-medium font-burmese transition-colors ${
|
|
pathname === link.href
|
|
? 'bg-primary/10 text-primary'
|
|
: 'text-gray-700 hover:text-primary hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right: Search + Mobile Hamburger */}
|
|
<div className="flex items-center space-x-1">
|
|
<Link
|
|
href="/search"
|
|
className="p-2 text-gray-600 hover:text-primary hover:bg-gray-100 rounded-lg transition-colors"
|
|
aria-label="ရှာဖွေရန်"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</Link>
|
|
|
|
{/* Hamburger */}
|
|
<button
|
|
className="md:hidden p-2 text-gray-600 hover:text-primary hover:bg-gray-100 rounded-lg transition-colors"
|
|
onClick={() => setMobileOpen(!mobileOpen)}
|
|
aria-label="Menu"
|
|
>
|
|
{mobileOpen ? (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{mobileOpen && (
|
|
<div className="md:hidden pb-4 pt-2 border-t border-gray-100 space-y-1">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setMobileOpen(false)}
|
|
className={`block px-4 py-3 rounded-lg text-sm font-medium font-burmese transition-colors ${
|
|
pathname === link.href
|
|
? 'bg-primary/10 text-primary'
|
|
: 'text-gray-700 hover:text-primary hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
href="/search"
|
|
onClick={() => setMobileOpen(false)}
|
|
className="block px-4 py-3 rounded-lg text-sm font-medium font-burmese text-gray-700 hover:text-primary hover:bg-gray-50 transition-colors"
|
|
>
|
|
🔍 ရှာဖွေရန်
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
</header>
|
|
)
|
|
}
|