fix(frontend): move search to header center on mobile, nav links in hamburger only
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user