Initial import of AbelBirdNest Stock
This commit is contained in:
191
src/components/layout/sidebar.tsx
Normal file
191
src/components/layout/sidebar.tsx
Normal file
@ -0,0 +1,191 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ChevronDown, ChevronRight, CircleHelp, KeyRound, LogOut } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
||||
import { AppLogo } from "@/components/branding/app-logo";
|
||||
import { LogoutButton } from "@/components/auth/logout-button";
|
||||
import { useLocale } from "@/components/providers/locale-provider";
|
||||
import { getNavigationForRole, isNavGroup } from "@/config/navigation";
|
||||
import type { SessionUser } from "@/lib/auth";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type SidebarProps = {
|
||||
pathname: string;
|
||||
user: SessionUser;
|
||||
};
|
||||
|
||||
function matchesPath(currentPath: string, href: string) {
|
||||
return currentPath === href || currentPath.startsWith(`${href}/`);
|
||||
}
|
||||
|
||||
export function Sidebar({ pathname, user }: SidebarProps) {
|
||||
const { dict } = useLocale();
|
||||
const navigation = useMemo(() => getNavigationForRole(user.role as never), [user.role]);
|
||||
const buildOpenGroups = () => {
|
||||
const grouped = navigation.filter(isNavGroup);
|
||||
return grouped.reduce<Record<string, boolean>>((acc, item) => {
|
||||
const isGroupActive = item.children.some(
|
||||
(child) => matchesPath(pathname, child.href)
|
||||
);
|
||||
acc[item.key] = isGroupActive;
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
|
||||
const [openGroups, setOpenGroups] = useState<Record<string, boolean>>(buildOpenGroups);
|
||||
|
||||
useEffect(() => {
|
||||
setOpenGroups((current) => {
|
||||
const next = { ...current };
|
||||
navigation.filter(isNavGroup).forEach((item) => {
|
||||
const isGroupActive = item.children.some(
|
||||
(child) => matchesPath(pathname, child.href)
|
||||
);
|
||||
if (isGroupActive) {
|
||||
next[item.key] = true;
|
||||
}
|
||||
});
|
||||
return next;
|
||||
});
|
||||
}, [pathname, navigation]);
|
||||
|
||||
return (
|
||||
<aside className="hidden h-screen w-64 shrink-0 border-r border-line/70 bg-slate-50 xl:fixed xl:left-0 xl:top-0 xl:block">
|
||||
<div className="flex h-full min-h-0 flex-col py-4">
|
||||
<div className="mb-8 flex shrink-0 items-center gap-3 px-6">
|
||||
<AppLogo size={48} className="h-12 w-12 rounded-lg object-contain" priority />
|
||||
<div>
|
||||
<p className="whitespace-nowrap text-[14px] font-black leading-none text-moss">
|
||||
AbelBirdnest Stock
|
||||
</p>
|
||||
<p className="mt-1 text-[11px] font-medium text-slate-500">
|
||||
{user.role} · {user.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-3">
|
||||
<nav className="space-y-1 pr-1">
|
||||
{navigation.map((item) => {
|
||||
if (isNavGroup(item)) {
|
||||
const isGroupActive = item.children.some(
|
||||
(child) => matchesPath(pathname, child.href)
|
||||
);
|
||||
const isOpen = openGroups[item.key] ?? isGroupActive;
|
||||
|
||||
return (
|
||||
<div key={item.key} className="rounded-lg">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setOpenGroups((current) => ({
|
||||
...current,
|
||||
[item.key]: !isOpen
|
||||
}))
|
||||
}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-3 rounded px-3 py-2 text-left text-[13px] font-medium transition-all duration-150",
|
||||
isGroupActive
|
||||
? "bg-white text-moss shadow-panel"
|
||||
: "text-slate-500 hover:bg-slate-100 hover:text-moss"
|
||||
)}
|
||||
>
|
||||
<item.icon className="h-[18px] w-[18px]" />
|
||||
<span>
|
||||
{dict.navigationGroups?.[
|
||||
item.key as keyof typeof dict.navigationGroups
|
||||
] ?? item.label}
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"ml-auto h-4 w-4 transition-transform",
|
||||
isOpen ? "rotate-180" : ""
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
{isOpen ? (
|
||||
<div className="mt-1 space-y-1 pl-3">
|
||||
{item.children.map((child) => {
|
||||
const isActive =
|
||||
matchesPath(pathname, child.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={child.href}
|
||||
href={child.href}
|
||||
className={cn(
|
||||
"group flex items-center gap-3 rounded px-3 py-2 text-[13px] font-medium transition-all duration-150 active:scale-[0.98]",
|
||||
isActive
|
||||
? "border-r-4 border-moss bg-white text-moss shadow-panel"
|
||||
: "text-slate-500 hover:bg-slate-100 hover:text-moss"
|
||||
)}
|
||||
>
|
||||
<child.icon className="h-[16px] w-[16px]" />
|
||||
<span>
|
||||
{dict.navigation[child.href as keyof typeof dict.navigation] ??
|
||||
child.label}
|
||||
</span>
|
||||
<ChevronRight className="ml-auto h-4 w-4 opacity-0 transition group-hover:opacity-40" />
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isActive =
|
||||
matchesPath(pathname, item.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"group flex items-center gap-3 rounded px-3 py-2 text-[13px] font-medium transition-all duration-150 active:scale-[0.98]",
|
||||
isActive
|
||||
? "border-r-4 border-moss bg-white text-moss shadow-panel"
|
||||
: "text-slate-500 hover:bg-slate-100 hover:text-moss"
|
||||
)}
|
||||
>
|
||||
<item.icon className="h-[18px] w-[18px]" />
|
||||
<span>
|
||||
{dict.navigation[item.href as keyof typeof dict.navigation] ?? item.label}
|
||||
</span>
|
||||
<ChevronRight className="ml-auto h-4 w-4 opacity-0 transition group-hover:opacity-40" />
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 shrink-0 px-3">
|
||||
<div className="space-y-1 border-t border-line/70 pt-4">
|
||||
<Link
|
||||
href="/change-password"
|
||||
className="flex items-center gap-3 rounded px-3 py-2 text-[13px] font-medium text-slate-500 transition hover:bg-slate-100 hover:text-moss"
|
||||
>
|
||||
<KeyRound className="h-[16px] w-[16px]" />
|
||||
<span>{dict.common.changePassword}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/help"
|
||||
className="flex items-center gap-3 rounded px-3 py-2 text-[13px] font-medium text-slate-500 transition hover:bg-slate-100 hover:text-moss"
|
||||
>
|
||||
<CircleHelp className="h-[16px] w-[16px]" />
|
||||
<span>{dict.common.help}</span>
|
||||
</Link>
|
||||
<LogoutButton
|
||||
className="flex w-full items-center gap-3 rounded px-3 py-2 text-left text-[13px] font-medium text-red-600 transition hover:bg-red-50"
|
||||
label={dict.common.logout}
|
||||
icon={<LogOut className="h-[16px] w-[16px]" />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user