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

Fix blog tables (remark-gfm), update portfolio images, fix dropdown hover issues, remove contact form

Browse Source
This commit is contained in:
Kunthawat Greethong
2026-02-26 21:44:02 +07:00
parent f54c020097
commit dccfce8186
14 changed files with 196 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,6 @@ import { cn } from '@/lib/utils';
export default function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
return (
<header className="fixed top-0 left-0 right-0 z-50 bg-white shadow-md">
@@ -60,9 +59,7 @@ export default function Header() {
{mainNavigation.map((item) => (
<div
key={item.href}
className="relative"
onMouseEnter={() => item.children && setActiveDropdown(item.href)}
onMouseLeave={() => setActiveDropdown(null)}
className="relative group"
>
<Link
href={item.href}
@@ -79,33 +76,39 @@ export default function Header() {
)}
</Link>
{/* Dropdown */}
{item.children && activeDropdown === item.href && (
<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>
))}
{/* Dropdown - CSS hover with invisible bridge */}
{item.children && (
<div className="absolute top-full left-0 pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
{/* Invisible bridge to prevent gap */}
<div className="absolute -top-2 left-0 right-0 h-2" />
<div className="min-w-[600px] bg-white shadow-xl rounded-lg py-4 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/sub">
<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/sub:block absolute left-full top-0 w-56 !bg-white shadow-xl rounded-lg py-2 border border-secondary-100 max-h-96 overflow-y-auto z-50">
{/* Invisible bridge to prevent gap */}
<div className="absolute -top-2 -bottom-2 -left-2 w-2" />
{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>
)}