mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-17 12:20:01 +02:00
michaelschal
9f4993f719
Adjust header layout, button styling, and spacing in topbar.tsx for better mobile experience. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/pCkJ6mk
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import { Menu, Search } from "lucide-react";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
interface TopBarProps {
|
|
onMenuClick: () => void;
|
|
}
|
|
|
|
export default function TopBar({ onMenuClick }: TopBarProps) {
|
|
return (
|
|
<header className="bg-card/50 backdrop-blur-xl border-b border-border/50 sticky top-0 z-10">
|
|
<div className="flex items-center justify-between px-4 sm:px-6 lg:px-8 py-4 sm:py-5">
|
|
<div className="flex items-center gap-3 sm:gap-6 flex-1">
|
|
<button
|
|
className="lg:hidden text-foreground hover:text-primary transition-all hover:scale-110 active:scale-95 p-2 hover:bg-primary/10 rounded-xl"
|
|
onClick={onMenuClick}
|
|
data-testid="button-menu"
|
|
aria-label="Toggle menu"
|
|
>
|
|
<Menu className="w-6 h-6" />
|
|
</button>
|
|
<div className="flex-1 max-w-md hidden md:block">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Rechercher des publications, pages, médias..."
|
|
className="pl-10 bg-muted/30 border-muted focus:border-primary/50 rounded-xl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|