78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { Menu, Search } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { UltiMailLogo } from "@/components/ultimail-logo"
|
|
import { MailSearchBar } from "@/components/gmail/mail-search-bar"
|
|
import { HeaderAccountActions } from "@/components/gmail/header-account-actions"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface HeaderProps {
|
|
onToggleSidebar: () => void
|
|
sidebarCollapsed: boolean
|
|
isXs?: boolean
|
|
hideSearch?: boolean
|
|
onOpenMobileSearch?: () => void
|
|
}
|
|
|
|
export function Header({
|
|
onToggleSidebar,
|
|
sidebarCollapsed,
|
|
isXs = false,
|
|
hideSearch = false,
|
|
onOpenMobileSearch,
|
|
}: HeaderProps) {
|
|
return (
|
|
<header className="flex h-16 w-full min-w-0 items-center gap-0 bg-app-canvas pl-0 pr-4 sm:gap-2">
|
|
{/* Rail width = page spacer so search left edge lines up with `<main>`. */}
|
|
<div
|
|
className={cn(
|
|
"flex h-full min-w-0 shrink-0 items-center",
|
|
isXs
|
|
? "w-auto justify-start gap-0 pl-2"
|
|
: sidebarCollapsed
|
|
? "w-[68px] justify-center px-0"
|
|
: "w-60 gap-2 pl-4"
|
|
)}
|
|
>
|
|
<Button variant="ghost" size="icon" className="shrink-0 text-gray-600" onClick={onToggleSidebar}>
|
|
<Menu className="h-5 w-5" />
|
|
</Button>
|
|
{!sidebarCollapsed && !isXs && (
|
|
<div className="flex min-w-0 items-center">
|
|
<UltiMailLogo variant="mark" className="h-8 w-8 shrink-0 sm:hidden" />
|
|
<UltiMailLogo className="min-h-8 shrink-0 hidden sm:flex" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-12 shrink-0 rounded-full border border-[#d3e3fd] bg-[#eaf1fb] text-gray-500 hover:bg-[#dfe9f7] sm:hidden"
|
|
aria-label="Rechercher dans les messages"
|
|
onClick={onOpenMobileSearch}
|
|
>
|
|
<Search className="size-5 shrink-0 ml-0.5" />
|
|
</Button>
|
|
{!hideSearch ? (
|
|
<div className="hidden min-w-0 flex-1 max-w-3xl overflow-visible sm:flex">
|
|
<MailSearchBar />
|
|
</div>
|
|
) : (
|
|
<div className="hidden min-w-0 flex-1 sm:block" aria-hidden />
|
|
)}
|
|
|
|
<div className="ml-auto flex shrink-0 items-center gap-1 pl-4">
|
|
{sidebarCollapsed && (
|
|
<div className="mr-1 flex min-w-0 max-w-[min(100%,400px)] items-center pr-2">
|
|
<UltiMailLogo variant="mark" className="h-8 w-8 shrink-0 sm:hidden" />
|
|
<UltiMailLogo className="min-h-8 shrink-0 hidden sm:flex" />
|
|
</div>
|
|
)}
|
|
<HeaderAccountActions />
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|