78 lines
2.4 KiB
React
78 lines
2.4 KiB
React
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import Image from "next/image";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
import { useSelector } from "react-redux";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { dashboardRoutes, canAccessRoute } from "@/lib/routes";
|
||
|
|
|
||
|
|
import backgroundImageSidebar from "@/assets/img/sidebar-4.jpg";
|
||
|
|
import logo from "@/assets/img/MAM2.png";
|
||
|
|
|
||
|
|
export default function Sidebar({ onNavigate }) {
|
||
|
|
const pathname = usePathname();
|
||
|
|
const user = useSelector((state) => state.auth.user);
|
||
|
|
|
||
|
|
const links = dashboardRoutes.filter(
|
||
|
|
(route) =>
|
||
|
|
route.showInSidebar !== false && canAccessRoute(route, user?.role),
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative flex h-full flex-col overflow-hidden text-sidebar-foreground">
|
||
|
|
<Image
|
||
|
|
src={backgroundImageSidebar}
|
||
|
|
alt=""
|
||
|
|
fill
|
||
|
|
priority
|
||
|
|
sizes="256px"
|
||
|
|
className="object-cover"
|
||
|
|
/>
|
||
|
|
<div className="absolute inset-0 bg-sidebar/85" />
|
||
|
|
|
||
|
|
<div className="relative z-10 flex h-full flex-col">
|
||
|
|
<Link href="/" className="flex items-center gap-2 px-5 py-5">
|
||
|
|
<div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-md bg-white/10">
|
||
|
|
<Image
|
||
|
|
src={logo}
|
||
|
|
alt="Logo"
|
||
|
|
fill
|
||
|
|
sizes="36px"
|
||
|
|
className="object-contain"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<span className="text-sm font-semibold tracking-wide">
|
||
|
|
TÜBİTAK MAM
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<nav className="flex-1 space-y-0.5 px-3 py-2">
|
||
|
|
{links.map((route) => {
|
||
|
|
const Icon = route.icon;
|
||
|
|
const active = pathname === route.href;
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={route.href}
|
||
|
|
href={route.href}
|
||
|
|
onClick={onNavigate}
|
||
|
|
className={cn(
|
||
|
|
"flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
|
||
|
|
active
|
||
|
|
? "bg-white/10 text-sidebar-active"
|
||
|
|
: "text-sidebar-muted hover:bg-white/10 hover:text-sidebar-foreground",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon className="h-4 w-4 shrink-0" />
|
||
|
|
{route.label}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className="px-5 py-4 text-[11px] text-sidebar-muted"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|