121 lines
4.3 KiB
TypeScript
121 lines
4.3 KiB
TypeScript
"use client"
|
|
|
|
import { useRef, useState } from "react"
|
|
import Link from "next/link"
|
|
import { Icon } from "@iconify/react"
|
|
import { AccountAvatar } from "@/components/suite/account-avatar"
|
|
import { AccountSwitcherDropdown } from "@/components/suite/account-switcher-dropdown"
|
|
import { SuiteFavoritesMenu } from "@/components/suite/suite-favorites-menu"
|
|
import { Button } from "@/components/ui/button"
|
|
import { useChromeIdentity } from "@/lib/hooks/use-chrome-identity"
|
|
import { getAuthentikEnrollmentUrl } from "@/lib/auth/oidc-config"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const NAV_LINKS = [
|
|
{ label: "Démo", href: "#demo" },
|
|
{ label: "Applications", href: "#applications" },
|
|
{ label: "Fonctionnalités", href: "#fonctionnalites" },
|
|
{ label: "Souveraineté", href: "#souverainete" },
|
|
]
|
|
|
|
export function LandingHeader({ scrolled }: { scrolled: boolean }) {
|
|
const identity = useChromeIdentity()
|
|
const [accountMenuOpen, setAccountMenuOpen] = useState(false)
|
|
const accountMenuRef = useRef<HTMLDivElement>(null)
|
|
|
|
return (
|
|
<header
|
|
className={cn(
|
|
"sticky top-0 z-40 transition-[background-color,border-color,box-shadow,backdrop-filter] duration-300",
|
|
scrolled
|
|
? "landing-glass-strong shadow-[0_8px_30px_-18px_rgba(0,0,0,0.35)]"
|
|
: "border-b border-transparent"
|
|
)}
|
|
>
|
|
<div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-4 px-4 sm:px-6">
|
|
<Link
|
|
href="/"
|
|
className="flex min-w-0 items-center gap-2.5 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
|
|
aria-label="Ulti Suite — Accueil"
|
|
>
|
|
<img
|
|
src="/ultisuite-mark.svg"
|
|
alt=""
|
|
width={48}
|
|
height={48}
|
|
draggable={false}
|
|
className="h-8 w-8 shrink-0 object-contain select-none"
|
|
aria-hidden
|
|
/>
|
|
<span className="truncate text-lg font-semibold tracking-tight">
|
|
Ulti<span className="landing-gradient-text">Suite</span>
|
|
</span>
|
|
</Link>
|
|
|
|
<nav className="hidden items-center gap-1 md:flex" aria-label="Sections">
|
|
{NAV_LINKS.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="rounded-full px-3.5 py-1.5 text-sm font-medium text-[var(--landing-muted)] transition-colors hover:bg-[var(--landing-chip)] hover:text-[var(--landing-fg)]"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
{identity ? (
|
|
<>
|
|
<Link
|
|
href="/mail/inbox"
|
|
className="landing-cta landing-cta--primary hidden h-9 px-4 text-sm sm:inline-flex"
|
|
>
|
|
Ouvrir Ultimail
|
|
<Icon icon="mdi:arrow-right" className="size-4" aria-hidden />
|
|
</Link>
|
|
<SuiteFavoritesMenu onOpen={() => setAccountMenuOpen(false)} />
|
|
<div className="relative" ref={accountMenuRef}>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-lg"
|
|
className="size-10 overflow-hidden rounded-full p-0"
|
|
aria-label={`Compte : ${identity.email}`}
|
|
aria-expanded={accountMenuOpen}
|
|
aria-haspopup="dialog"
|
|
onClick={() => setAccountMenuOpen((open) => !open)}
|
|
>
|
|
<AccountAvatar
|
|
account={{ name: identity.name, email: identity.email }}
|
|
size="md"
|
|
/>
|
|
</Button>
|
|
<AccountSwitcherDropdown
|
|
open={accountMenuOpen}
|
|
onOpenChange={setAccountMenuOpen}
|
|
containerRef={accountMenuRef}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<a
|
|
href={getAuthentikEnrollmentUrl()}
|
|
className="landing-cta landing-cta--ghost hidden h-9 px-4 text-sm sm:inline-flex"
|
|
>
|
|
Créer un compte
|
|
</a>
|
|
<Link
|
|
href="/login"
|
|
className="landing-cta landing-cta--primary h-9 px-4 text-sm"
|
|
>
|
|
Se connecter
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|