102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { Pencil } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
import { useComposeActions } from "@/lib/compose-context"
|
|
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Icon } from "@iconify/react"
|
|
import { UltiMailLogo } from "@/components/ultimail-logo"
|
|
|
|
export function SidebarHeader({
|
|
splitView,
|
|
isExpanded,
|
|
panelSurfaceClass,
|
|
splitViewLogoHeaderClass,
|
|
splitViewLogoIconClass,
|
|
touchNav,
|
|
}: {
|
|
splitView: boolean
|
|
isExpanded: boolean
|
|
panelSurfaceClass: string
|
|
splitViewLogoHeaderClass: string
|
|
splitViewLogoIconClass: string
|
|
touchNav: boolean
|
|
}) {
|
|
const { openCompose } = useComposeActions()
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={cn(
|
|
"flex shrink-0 items-center",
|
|
panelSurfaceClass,
|
|
splitView
|
|
? cn(
|
|
splitViewLogoHeaderClass,
|
|
isExpanded ? "justify-between" : "justify-start"
|
|
)
|
|
: "justify-between px-4 pt-4 pb-4 sm:hidden"
|
|
)}
|
|
>
|
|
{splitView && !isExpanded ? (
|
|
<UltiMailLogo variant="mark" className={splitViewLogoIconClass} />
|
|
) : (
|
|
<>
|
|
<UltiMailLogo
|
|
className={cn(
|
|
"shrink-0",
|
|
splitView
|
|
? "max-w-[140px] gap-4 [&_img]:size-9"
|
|
: "min-h-8"
|
|
)}
|
|
/>
|
|
{(splitView || touchNav) && isExpanded && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-9 shrink-0 text-gray-600"
|
|
aria-label="Réglages"
|
|
onClick={() =>
|
|
useMailSettingsStore.getState().setQuickSettingsOpen(true)
|
|
}
|
|
>
|
|
<Icon icon="mdi:cog" className="size-5 shrink-0" aria-hidden />
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
"hidden shrink-0 z-10 pt-1 pl-2 max-sm:pb-3 sm:pb-0 sm:flex",
|
|
panelSurfaceClass,
|
|
isExpanded ? "pr-3.5" : "pr-2",
|
|
splitView && "!hidden"
|
|
)}
|
|
>
|
|
<button
|
|
type="button"
|
|
title={!isExpanded ? "Nouveau message" : undefined}
|
|
aria-label={!isExpanded ? "Nouveau message" : undefined}
|
|
onClick={openCompose}
|
|
className={cn(
|
|
"inline-flex h-[52px] min-w-0 shrink-0 cursor-pointer items-center rounded-2xl border border-border bg-mail-surface text-sm font-medium text-foreground shadow-sm outline-none transition-[box-shadow,background-color,border-color,color] duration-200 hover:bg-accent hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0",
|
|
isExpanded
|
|
? "w-auto max-w-full justify-start gap-3 self-start pl-4 pr-8"
|
|
: "w-[52px] justify-center px-0 py-0"
|
|
)}
|
|
>
|
|
<Pencil className="size-5 shrink-0" />
|
|
{isExpanded && (
|
|
<span className="min-w-0 truncate text-sm font-medium">
|
|
Nouveau message
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|