fix(frontend): move search to header center on mobile, nav links in hamburger only

This commit is contained in:
2026-05-29 01:08:57 +02:00
parent 6e7bf05942
commit 2199e5c66d
2 changed files with 37 additions and 40 deletions

View File

@@ -32,32 +32,11 @@ export function MainNav({ isLoggedIn }: MainNavProps) {
return (
<>
{/* Desktop nav */}
<nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
{links.map(({ href, label }) => (
<Link
key={href}
href={href}
className={cn(
"transition-colors hover:text-foreground/80",
pathname === href ? "text-foreground" : "text-foreground/60"
)}
>
{label}
</Link>
))}
<SearchInput />
</nav>
{/* Mobile hamburger */}
{/* Mobile: hamburger + search fills center */}
<div className="flex md:hidden items-center gap-2 flex-1 mx-2">
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>
<Button
variant="ghost"
size="icon"
className="md:hidden"
aria-label="Open menu"
>
<Button variant="ghost" size="icon" aria-label="Open menu" className="shrink-0">
<Menu className="h-5 w-5" />
</Button>
</SheetTrigger>
@@ -82,11 +61,29 @@ export function MainNav({ isLoggedIn }: MainNavProps) {
</Link>
))}
</nav>
<div className="mt-6">
<SearchInput />
</div>
</SheetContent>
</Sheet>
<div className="flex-1">
<SearchInput />
</div>
</div>
{/* Desktop nav */}
<nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
{links.map(({ href, label }) => (
<Link
key={href}
href={href}
className={cn(
"transition-colors hover:text-foreground/80",
pathname === href ? "text-foreground" : "text-foreground/60"
)}
>
{label}
</Link>
))}
<SearchInput />
</nav>
</>
);
}

View File

@@ -17,7 +17,7 @@ export function SearchInput() {
};
return (
<form onSubmit={handleSearch} className="relative w-full max-w-sm">
<form onSubmit={handleSearch} className="relative w-full md:max-w-sm">
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
name="q"