kunthawat/dealplustech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Header.tsx syntax error, add all products to navigation menu

Browse Source 
- 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
This commit is contained in:
Kunthawat Greethong
2026-02-26 10:31:41 +07:00
parent e7adbd8e98
commit f54c020097
2 changed files with 86 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/layout/Header.tsx
View File

@@ -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>
);
}
}