361 lines
10 KiB
TypeScript
361 lines
10 KiB
TypeScript
"use client";
|
||
|
||
import { signOut } from "@/app/login/actions";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
Typography,
|
||
} from "poyraz-ui/atoms";
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuTrigger,
|
||
Tooltip,
|
||
TooltipContent,
|
||
TooltipProvider,
|
||
TooltipTrigger,
|
||
} from "poyraz-ui/molecules";
|
||
import {
|
||
SidebarBranding,
|
||
SidebarContent,
|
||
SidebarFooter,
|
||
SidebarGroup,
|
||
SidebarGroupLabel,
|
||
SidebarHeader,
|
||
SidebarMenu,
|
||
SidebarMenuItem,
|
||
SidebarPanel,
|
||
SidebarProvider,
|
||
SidebarRail,
|
||
SidebarTrigger,
|
||
SidebarUserProfile,
|
||
useSidebar,
|
||
} from "poyraz-ui/organisms";
|
||
import { ChevronUp, LogOut, Settings } from "lucide-react";
|
||
import type { LucideIcon } from "lucide-react";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { usePathname } from "next/navigation";
|
||
|
||
export type AppShellNavItem = {
|
||
title: string;
|
||
href?: string;
|
||
icon?: LucideIcon;
|
||
};
|
||
|
||
export type AppShellNavGroup = {
|
||
title: string;
|
||
items: AppShellNavItem[];
|
||
};
|
||
|
||
export type AppShellBranding = {
|
||
applicationName: string;
|
||
organizationName: string | null;
|
||
lightLogoUrl: string | null;
|
||
darkLogoUrl: string | null;
|
||
};
|
||
|
||
type ShellUser = {
|
||
email: string;
|
||
displayName: string;
|
||
shortName: string;
|
||
avatarUrl: string | null;
|
||
};
|
||
|
||
type AppShellProps = {
|
||
branding: AppShellBranding;
|
||
children: React.ReactNode;
|
||
homeHref: string;
|
||
navGroups: AppShellNavGroup[];
|
||
settingsHref: string;
|
||
user: ShellUser;
|
||
progress?: number;
|
||
};
|
||
|
||
export function AppShell({
|
||
branding,
|
||
children,
|
||
homeHref,
|
||
navGroups,
|
||
settingsHref,
|
||
user,
|
||
progress,
|
||
}: AppShellProps) {
|
||
const pathname = usePathname();
|
||
const sidebarProps = { branding, homeHref, navGroups, pathname, progress, settingsHref, user };
|
||
|
||
return (
|
||
<TooltipProvider>
|
||
<div className="min-h-screen bg-background text-foreground">
|
||
<a
|
||
href="#main-content"
|
||
className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[90] focus:rounded-md focus:bg-surface focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:shadow-lg focus:ring-2 focus:ring-focus-ring"
|
||
>
|
||
Ana içeriğe geç
|
||
</a>
|
||
|
||
<div className="flex min-h-screen">
|
||
<DesktopSidebar {...sidebarProps} />
|
||
|
||
<div className="flex min-w-0 flex-1 flex-col">
|
||
<MobileSidebar {...sidebarProps} />
|
||
<main id="main-content" className="min-w-0 flex-1 p-4 lg:p-8">
|
||
{children}
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</TooltipProvider>
|
||
);
|
||
}
|
||
|
||
type SidebarCompositionProps = {
|
||
branding: AppShellBranding;
|
||
homeHref: string;
|
||
navGroups: AppShellNavGroup[];
|
||
pathname: string;
|
||
progress?: number;
|
||
settingsHref: string;
|
||
user: ShellUser;
|
||
};
|
||
|
||
function DesktopSidebar(props: SidebarCompositionProps) {
|
||
return (
|
||
<SidebarProvider variant="collapsible">
|
||
<SidebarPanel className="sticky top-0 hidden h-screen shrink-0 self-stretch lg:flex">
|
||
<SidebarComposition {...props} />
|
||
<SidebarRail aria-label="Kenar çubuğunu daralt veya genişlet" />
|
||
</SidebarPanel>
|
||
</SidebarProvider>
|
||
);
|
||
}
|
||
|
||
function MobileSidebar(props: SidebarCompositionProps) {
|
||
return (
|
||
<SidebarProvider variant="floating">
|
||
<header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-surface/95 px-4 backdrop-blur lg:hidden">
|
||
<Link href={props.homeHref} className="min-w-0">
|
||
<MobileBrand branding={props.branding} />
|
||
</Link>
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<SidebarTrigger action="mobile" aria-label="Ana menüyü aç veya kapat" />
|
||
</TooltipTrigger>
|
||
<TooltipContent>Menü</TooltipContent>
|
||
</Tooltip>
|
||
</header>
|
||
|
||
<SidebarPanel className="h-dvh max-w-[82vw] lg:hidden">
|
||
<SidebarComposition {...props} />
|
||
</SidebarPanel>
|
||
</SidebarProvider>
|
||
);
|
||
}
|
||
|
||
function SidebarComposition({
|
||
branding,
|
||
homeHref,
|
||
navGroups,
|
||
pathname,
|
||
progress,
|
||
settingsHref,
|
||
user,
|
||
}: SidebarCompositionProps) {
|
||
return (
|
||
<>
|
||
<SidebarHeader>
|
||
<Link href={homeHref} className="min-w-0 flex-1" aria-label={`${branding.applicationName} ana sayfa`}>
|
||
<SidebarBranding
|
||
logo={<BrandMark branding={branding} />}
|
||
title={branding.applicationName}
|
||
subtitle={branding.organizationName ?? "Freelancer portalı"}
|
||
/>
|
||
</Link>
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<SidebarTrigger
|
||
className="hidden lg:inline-flex"
|
||
aria-label="Kenar çubuğunu daralt veya genişlet"
|
||
/>
|
||
</TooltipTrigger>
|
||
<TooltipContent>Kenar çubuğunu daralt</TooltipContent>
|
||
</Tooltip>
|
||
</SidebarHeader>
|
||
|
||
<SidebarContent scrollMode="fade">
|
||
<SidebarNavigation
|
||
homeHref={homeHref}
|
||
navGroups={navGroups}
|
||
pathname={pathname}
|
||
/>
|
||
</SidebarContent>
|
||
|
||
<SidebarFooter className="flex flex-col gap-3">
|
||
{typeof progress === "number" ? <ProgressSummary progress={progress} /> : null}
|
||
<AccountMenu user={user} settingsHref={settingsHref} />
|
||
</SidebarFooter>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function SidebarNavigation({
|
||
homeHref,
|
||
navGroups,
|
||
pathname,
|
||
}: Pick<SidebarCompositionProps, "homeHref" | "navGroups" | "pathname">) {
|
||
const { setMobileOpen, variant } = useSidebar();
|
||
|
||
return navGroups.map((group) => (
|
||
<SidebarGroup key={group.title}>
|
||
<SidebarGroupLabel>{group.title}</SidebarGroupLabel>
|
||
<SidebarMenu>
|
||
{group.items.map((item) => {
|
||
const active =
|
||
item.href === homeHref
|
||
? pathname === homeHref
|
||
: item.href
|
||
? pathname === item.href || pathname.startsWith(`${item.href}/`)
|
||
: false;
|
||
const Icon = item.icon;
|
||
|
||
return (
|
||
<SidebarMenuItem
|
||
key={item.href || item.title}
|
||
href={item.href || "#"}
|
||
active={active}
|
||
icon={Icon ? <Icon className="h-4 w-4" aria-hidden="true" /> : undefined}
|
||
onClick={() => {
|
||
if (variant === "floating") setMobileOpen(false);
|
||
}}
|
||
>
|
||
{item.title}
|
||
</SidebarMenuItem>
|
||
);
|
||
})}
|
||
</SidebarMenu>
|
||
</SidebarGroup>
|
||
));
|
||
}
|
||
|
||
function BrandMark({ branding }: { branding: AppShellBranding }) {
|
||
const logoUrl = branding.lightLogoUrl ?? branding.darkLogoUrl;
|
||
|
||
if (!logoUrl) {
|
||
return (
|
||
<span className="flex h-full w-full items-center justify-center text-sm font-bold text-primary">
|
||
{branding.applicationName.slice(0, 1).toLocaleUpperCase("tr-TR")}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<span className="flex h-full w-full items-center justify-center">
|
||
<Image
|
||
src={logoUrl}
|
||
alt=""
|
||
width={32}
|
||
height={32}
|
||
unoptimized
|
||
className={branding.darkLogoUrl ? "h-full w-full object-contain dark:hidden" : "h-full w-full object-contain"}
|
||
/>
|
||
{branding.darkLogoUrl ? (
|
||
<Image
|
||
src={branding.darkLogoUrl}
|
||
alt=""
|
||
width={32}
|
||
height={32}
|
||
unoptimized
|
||
className="hidden h-full w-full object-contain dark:block"
|
||
/>
|
||
) : null}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function MobileBrand({ branding }: { branding: AppShellBranding }) {
|
||
return (
|
||
<div className="flex min-w-0 items-center gap-2">
|
||
<span className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-muted">
|
||
<BrandMark branding={branding} />
|
||
</span>
|
||
<Typography component="span" variant="small" className="truncate font-semibold">
|
||
{branding.applicationName}
|
||
</Typography>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ProgressSummary({ progress }: { progress: number }) {
|
||
const normalizedProgress = Math.max(0, Math.min(100, progress));
|
||
|
||
return (
|
||
<Card variant="soft" className="w-full overflow-hidden border-primary/10 shadow-none">
|
||
<CardContent className="space-y-3 p-3">
|
||
<Typography variant="small" className="font-semibold">
|
||
Proje ilerlemesi
|
||
</Typography>
|
||
<div className="space-y-1.5">
|
||
<Typography variant="caption" className="font-medium text-primary">
|
||
%{normalizedProgress} tamamlandı
|
||
</Typography>
|
||
<div
|
||
role="progressbar"
|
||
aria-label="Proje ilerlemesi"
|
||
aria-valuemin={0}
|
||
aria-valuemax={100}
|
||
aria-valuenow={normalizedProgress}
|
||
className="h-2 w-full overflow-hidden rounded-full bg-primary-muted"
|
||
>
|
||
<div
|
||
className="h-full rounded-full bg-primary transition-[width] duration-700 ease-out motion-reduce:transition-none"
|
||
style={{ width: `${normalizedProgress}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: string }) {
|
||
return (
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<button
|
||
type="button"
|
||
aria-label="Hesap menüsünü aç"
|
||
className="flex w-full items-center gap-2 rounded-sm p-1 text-left outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||
>
|
||
<SidebarUserProfile
|
||
className="min-w-0 flex-1"
|
||
name={user.displayName}
|
||
role={user.email}
|
||
avatarUrl={user.avatarUrl ?? undefined}
|
||
initials={user.shortName}
|
||
/>
|
||
<ChevronUp className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
|
||
</button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" side="top" className="min-w-52">
|
||
<DropdownMenuItem asChild media={<Settings className="h-4 w-4" aria-hidden="true" />}>
|
||
<Link href={settingsHref}>Ayarlar</Link>
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<form action={signOut}>
|
||
<DropdownMenuItem
|
||
asChild
|
||
media={<LogOut className="h-4 w-4" aria-hidden="true" />}
|
||
className="text-destructive"
|
||
>
|
||
<button type="submit" className="w-full">
|
||
Çıkış yap
|
||
</button>
|
||
</DropdownMenuItem>
|
||
</form>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
);
|
||
}
|