mobiniqow
75a0ba593d
git-subtree-dir: admin git-subtree-mainline:35f5084005git-subtree-split:9f1eccd2f7
99 lines
3.5 KiB
TypeScript
99 lines
3.5 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { usePathname, useRouter } from "next/navigation";
|
||
import {
|
||
LayoutGrid,
|
||
ListTree,
|
||
MessageCircleQuestion,
|
||
LogOut,
|
||
Heart,
|
||
UserCheck,
|
||
Users,
|
||
HeartHandshake,
|
||
Images,
|
||
Activity,
|
||
Database,
|
||
} from "lucide-react";
|
||
import { cn } from "@/lib/utils";
|
||
import { useAuth } from "@/lib/auth-context";
|
||
|
||
const navItems = [
|
||
{ href: "/", label: "داشبورد", icon: LayoutGrid },
|
||
{ href: "/users", label: "کاربران در انتظار تایید", icon: UserCheck },
|
||
{ href: "/users/all", label: "همه کاربران", icon: Users },
|
||
{ href: "/matches", label: "رفقا (مچها)", icon: HeartHandshake },
|
||
{ href: "/photos", label: "نظارت بر عکسها", icon: Images },
|
||
{ href: "/categories", label: "دستهبندیها و گزینهها", icon: ListTree },
|
||
{ href: "/questions", label: "سوالات پروفایل", icon: MessageCircleQuestion },
|
||
{ href: "/monitoring", label: "مانیتورینگ سرور", icon: Activity },
|
||
{ href: "/backups", label: "بکآپ دیتابیس", icon: Database },
|
||
];
|
||
|
||
export function Sidebar() {
|
||
const pathname = usePathname();
|
||
const router = useRouter();
|
||
const { user, logout } = useAuth();
|
||
|
||
function handleLogout() {
|
||
logout();
|
||
router.push("/login");
|
||
}
|
||
|
||
return (
|
||
<aside className="w-64 shrink-0 h-dvh sticky top-0 flex flex-col bg-(--color-surface-default) border-l border-(--color-border-subtle)">
|
||
<div className="flex items-center gap-2.5 px-5 h-16 border-b border-(--color-border-subtle)">
|
||
<div className="w-8 h-8 rounded-(--radius-sm) bg-(--color-brand-500) flex items-center justify-center shadow-(--shadow-cute-sm)">
|
||
<Heart size={15} className="text-white" fill="white" />
|
||
</div>
|
||
<div>
|
||
<p className="font-[var(--font-display)] font-extrabold text-[14px] leading-none">
|
||
دلدل
|
||
</p>
|
||
<p className="text-[10px] text-(--color-content-tertiary) leading-none mt-0.5">
|
||
پنل ادمین
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<nav className="flex-1 flex flex-col gap-1 p-3">
|
||
{navItems.map((item) => {
|
||
const active = pathname === item.href;
|
||
const Icon = item.icon;
|
||
return (
|
||
<Link
|
||
key={item.href}
|
||
href={item.href}
|
||
className={cn(
|
||
"flex items-center gap-3 rounded-(--radius-sm) px-3.5 h-11 text-[14px] font-semibold transition-colors",
|
||
active
|
||
? "bg-(--color-brand-500) text-white shadow-(--shadow-cute-sm)"
|
||
: "text-(--color-content-secondary) hover:bg-(--color-bg-secondary)"
|
||
)}
|
||
>
|
||
<Icon size={17} />
|
||
{item.label}
|
||
</Link>
|
||
);
|
||
})}
|
||
</nav>
|
||
|
||
<div className="p-3 border-t border-(--color-border-subtle) flex flex-col gap-2">
|
||
<div className="px-2 py-2">
|
||
<p className="text-[11px] text-(--color-content-tertiary)">وارد شده بهعنوان</p>
|
||
<p dir="ltr" className="text-[13px] font-bold text-(--color-content-primary) text-right">
|
||
{user?.phone}
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={handleLogout}
|
||
className="flex items-center gap-3 rounded-(--radius-sm) px-3.5 h-10 text-[13px] font-semibold text-(--color-status-error) hover:bg-red-50 transition-colors"
|
||
>
|
||
<LogOut size={16} />
|
||
خروج از حساب
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|