43 أسطر
1.2 KiB
TypeScript
43 أسطر
1.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useMemo } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
import { useSuperAdminSession } from "@/components/auth/session-context";
|
|
import { dashboardNav } from "@/lib/navigation";
|
|
import { matchesPermissions } from "@/lib/permissions";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function MobileNav() {
|
|
const pathname = usePathname();
|
|
const { permissions } = useSuperAdminSession();
|
|
const accessibleNav = useMemo(
|
|
() =>
|
|
dashboardNav.filter((item) =>
|
|
matchesPermissions(permissions, item.requiredPermissions, item.permissionMode),
|
|
),
|
|
[permissions],
|
|
);
|
|
|
|
return (
|
|
<div className="mb-4 flex gap-2 overflow-x-auto pb-1 lg:hidden">
|
|
{accessibleNav.map((item) => {
|
|
const active = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
"whitespace-nowrap rounded-full border px-3 py-1.5 text-xs",
|
|
active ? "border-primary/40 bg-primary/20 text-primary" : "border-border bg-card text-muted-foreground",
|
|
)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|