104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Logo } from "@/components/brand/logo";
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuBadge,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarRail,
|
|
useSidebar,
|
|
} from "@/components/ui/sidebar";
|
|
import { tr } from "@/i18n/tr";
|
|
import { ADMIN_NAV, MAIN_NAV, isActivePath, isAvailable, type NavItem } from "./nav-config";
|
|
|
|
function NavList({ items, pathname }: { items: NavItem[]; pathname: string }) {
|
|
const { setOpenMobile } = useSidebar();
|
|
return (
|
|
<SidebarMenu>
|
|
{items.map((item) => {
|
|
const Icon = item.icon;
|
|
if (!isAvailable(item)) {
|
|
return (
|
|
<SidebarMenuItem key={item.href}>
|
|
<SidebarMenuButton
|
|
aria-disabled
|
|
disabled
|
|
tooltip={`${item.label} · ${tr.common.comingSoon}`}
|
|
>
|
|
<Icon />
|
|
<span>{item.label}</span>
|
|
</SidebarMenuButton>
|
|
<SidebarMenuBadge className="text-[0.65rem] opacity-70">
|
|
{tr.common.comingSoon}
|
|
</SidebarMenuBadge>
|
|
</SidebarMenuItem>
|
|
);
|
|
}
|
|
const active = isActivePath(pathname, item.href);
|
|
return (
|
|
<SidebarMenuItem key={item.href}>
|
|
<SidebarMenuButton asChild isActive={active} tooltip={item.label}>
|
|
<Link
|
|
href={item.href}
|
|
aria-current={active ? "page" : undefined}
|
|
onClick={() => setOpenMobile(false)}
|
|
>
|
|
<Icon />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
);
|
|
})}
|
|
</SidebarMenu>
|
|
);
|
|
}
|
|
|
|
/** Masaüstünde sabit yan menü; mobilde "Daha fazla" ile açılan Sheet. */
|
|
export function AppSidebar({ isAdmin, version }: { isAdmin: boolean; version: string }) {
|
|
const pathname = usePathname();
|
|
return (
|
|
<Sidebar collapsible="icon">
|
|
<SidebarHeader className="h-14 justify-center px-3">
|
|
<Link
|
|
href="/dashboard"
|
|
aria-label={tr.nav.dashboard}
|
|
className="group-data-[collapsible=icon]:hidden"
|
|
>
|
|
<Logo />
|
|
</Link>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>{tr.nav.main}</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<NavList items={MAIN_NAV} pathname={pathname} />
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
{isAdmin ? (
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>{tr.nav.admin}</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<NavList items={ADMIN_NAV} pathname={pathname} />
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
) : null}
|
|
</SidebarContent>
|
|
<SidebarFooter className="px-4 pb-3 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden">
|
|
{tr.app.name} · {tr.app.version} {version}
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
);
|
|
}
|