115 lines
4.1 KiB
TypeScript
115 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { cn } from "@/lib/utils"
|
|
import {
|
|
COMPTE_SETTINGS_NAV,
|
|
isCompteSettingsNavActive,
|
|
} from "@/lib/compte-settings/settings-nav"
|
|
import {
|
|
mailNavRowClass,
|
|
MAIL_SETTINGS_MAIN_CARD_CLASS,
|
|
MAIL_SETTINGS_MAIN_INSET_CLASS,
|
|
} from "@/lib/mail-chrome-classes"
|
|
import { CompteSettingsHeader } from "@/components/compte/compte-settings-header"
|
|
|
|
export function CompteSettingsLayout({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<div
|
|
data-compte-settings-app
|
|
className="ultimail-app flex h-dvh max-h-dvh flex-col overflow-hidden bg-app-canvas"
|
|
>
|
|
<CompteSettingsHeader />
|
|
|
|
<div className="flex min-h-0 flex-1 flex-col md:flex-row">
|
|
<aside
|
|
data-compte-settings-sidebar
|
|
className="hidden w-64 shrink-0 overflow-y-auto bg-app-canvas p-3 md:block lg:w-72"
|
|
>
|
|
<nav className="space-y-1" aria-label="Sections du compte">
|
|
{COMPTE_SETTINGS_NAV.map((item) => {
|
|
const active = isCompteSettingsNavActive(pathname, item)
|
|
const Icon = item.icon
|
|
return (
|
|
<Link
|
|
key={item.id}
|
|
href={item.href}
|
|
aria-current={active ? "page" : undefined}
|
|
className={cn(
|
|
"flex w-full items-start gap-3 rounded-lg px-3 py-2.5 transition-colors",
|
|
active
|
|
? "bg-mail-nav-selected"
|
|
: "hover:bg-mail-nav-hover"
|
|
)}
|
|
>
|
|
<Icon
|
|
className={cn(
|
|
"mt-0.5 size-4 shrink-0 opacity-70",
|
|
active ? "text-mail-nav-selected" : "text-muted-foreground"
|
|
)}
|
|
/>
|
|
<span className="min-w-0 flex-1">
|
|
<span
|
|
className={cn(
|
|
"block text-sm font-medium",
|
|
active ? "text-mail-nav-selected" : "text-muted-foreground"
|
|
)}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
<span className="block text-xs font-normal text-muted-foreground">
|
|
{item.description}
|
|
</span>
|
|
</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
|
|
<div className={MAIL_SETTINGS_MAIN_INSET_CLASS}>
|
|
<div data-compte-settings-main className={MAIL_SETTINGS_MAIN_CARD_CLASS}>
|
|
<nav
|
|
className="shrink-0 border-b border-border px-2 py-2 md:hidden"
|
|
aria-label="Sections du compte"
|
|
>
|
|
<div className="flex gap-1 overflow-x-auto">
|
|
{COMPTE_SETTINGS_NAV.map((item) => {
|
|
const active = isCompteSettingsNavActive(pathname, item)
|
|
const Icon = item.icon
|
|
return (
|
|
<Link
|
|
key={item.id}
|
|
href={item.href}
|
|
aria-label={item.label}
|
|
aria-current={active ? "page" : undefined}
|
|
className={cn(
|
|
"flex shrink-0 items-center rounded-lg",
|
|
active
|
|
? cn("gap-2 px-3 py-2", mailNavRowClass({ isSelected: true }))
|
|
: cn("size-9 justify-center", mailNavRowClass({ isSelected: false }))
|
|
)}
|
|
>
|
|
<Icon className="size-4 shrink-0 opacity-70" />
|
|
{active ? (
|
|
<span className="text-sm font-medium">{item.label}</span>
|
|
) : null}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="min-h-0 flex-1 overflow-y-auto px-4 py-5 sm:px-8">
|
|
<div className="mx-auto w-full max-w-3xl">{children}</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|