"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { getStoredUser } from "@/src/lib/auth";
import Logo from "@/src/utils/logo";
const navSections = [
{
label: "الرئيسية",
items: [
{ href: "/dashboard", label: "Dashboard", icon: "ti-layout-dashboard", permission: "read-dashboard" },
{ href: "/dashboard/users", label: "Users", icon: "ti-users", permission: "read-user" },
],
},
{
label: "الأسطول",
items: [
{ href: "/dashboard/cars", label: "Cars", icon: "ti-car", permission: "read-car" },
{ href: "/dashboard/drivers", label: "Drivers", icon: "ti-steering-wheel",permission: "read-driver" },
{ href: "/dashboard/trips", label: "Trips", icon: "ti-route", permission: "read-trip" },
],
},
{
label: "العمليات",
items: [
{ href: "/dashboard/orders", label: "Orders", icon: "ti-package", permission: "read-order" },
{ href: "/dashboard/clients", label: "Clients", icon: "ti-users-group", permission: "read-client" },
{ href: "/dashboard/branches", label: "Branches", icon: "ti-building", permission: "read-branch" },
{ href: "/dashboard/roles", label: "Roles", icon: "ti-shield", permission: "read-role" },
{ href: "/dashboard/role_permission", label: "Roles & Permission", icon: "ti-shield", permission: "manage-role-permissions" },
{ href: "/dashboard/audit", label: "Audit", icon: "ti-clipboard-list", permission: "read-audit" },
],
},
];
export function Sidebar() {
const pathname = usePathname();
const user = getStoredUser();
const permissions = user?.permissions ?? navSections.flatMap(s => s.items.map(i => i.permission));
return (
<>
{/*
Full sidebar — visible lg+.
No `left`/`right` is set anywhere: placement comes purely from
document order + `dir="rtl"` on . A flex row in RTL lays
its first child against the inline-start edge, which is
physically the RIGHT of the screen. Because is
still the first child in DashboardLayout, it now renders on
the right automatically — no positional CSS to flip.
*/}
{/*
Compact icon rail — md and below (replaces the old behavior of
hiding the sidebar entirely under `lg`). Fixed to the
inline-end... no: fixed to the RIGHT edge explicitly, because a
`position: fixed` element takes no part in flex flow and so
gets no automatic RTL placement from document order. This is
exactly the kind of element logical properties exist for:
`inset-inline-end: 0` means "right in RTL, left in LTR"
without a manual swap if direction ever toggles.
*/}
);
}
function SidebarContent({
pathname,
permissions,
user,
compact,
}: {
pathname: string;
permissions: string[];
user: ReturnType;
compact: boolean;
}) {
return (
<>
{/* Logo */}
{/* Nav sections */}
{/* User badge — collapses to an avatar dot in compact mode */}
{compact ? (