2026-09-15 23:26:24 +03:30
|
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
|
|
import Link from "next/link";
|
|
|
|
|
|
import { usePathname, useRouter } from "next/navigation";
|
2026-09-19 22:17:44 +03:30
|
|
|
|
import {
|
|
|
|
|
|
LayoutGrid,
|
|
|
|
|
|
ListTree,
|
|
|
|
|
|
MessageCircleQuestion,
|
|
|
|
|
|
LogOut,
|
|
|
|
|
|
Heart,
|
|
|
|
|
|
UserCheck,
|
|
|
|
|
|
Activity,
|
|
|
|
|
|
Database,
|
|
|
|
|
|
} from "lucide-react";
|
2026-09-15 23:26:24 +03:30
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
|
|
import { useAuth } from "@/lib/auth-context";
|
|
|
|
|
|
|
|
|
|
|
|
const navItems = [
|
|
|
|
|
|
{ href: "/", label: "داشبورد", icon: LayoutGrid },
|
|
|
|
|
|
{ href: "/users", label: "کاربران در انتظار تایید", icon: UserCheck },
|
|
|
|
|
|
{ href: "/categories", label: "دستهبندیها و گزینهها", icon: ListTree },
|
|
|
|
|
|
{ href: "/questions", label: "سوالات پروفایل", icon: MessageCircleQuestion },
|
2026-09-19 22:17:44 +03:30
|
|
|
|
{ href: "/monitoring", label: "مانیتورینگ سرور", icon: Activity },
|
|
|
|
|
|
{ href: "/backups", label: "بکآپ دیتابیس", icon: Database },
|
2026-09-15 23:26:24 +03:30
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
