From 4e800a8bd95c532f6442fc4d1116a647ab68c3ed Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 14 Jun 2026 00:04:43 +0330
Subject: [PATCH] feat(admin): group sidebar navigation

---
 src/views/AdminLayout.tsx | 121 ++++++++++++++++++++++++++++----------
 1 file changed, 90 insertions(+), 31 deletions(-)

diff --git a/src/views/AdminLayout.tsx b/src/views/AdminLayout.tsx
index e5ef9ba..caccd39 100644
--- a/src/views/AdminLayout.tsx
+++ b/src/views/AdminLayout.tsx
@@ -3,33 +3,66 @@
 import type { ReactNode } from "react";
 import { useEffect, useMemo, useState } from "react";
 import {
+  Building2,
   CalendarDays,
+  ChevronDown,
   FileText,
   FolderTree,
+  GraduationCap,
   PanelRightClose,
   PanelRightOpen,
   ShieldCheck,
   Tags,
+  TicketPercent,
   UsersRound,
 } from "lucide-react";
 import { Navigate, NavLink, useLocation } from "@/lib/router";
 import { useAuth } from "@/contexts/AuthContext";
 import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { cn } from "@/lib/utils";
 
-const navItems = [
-  { to: "/admin/users", label: "کاربران", icon: UsersRound, visibility: "staff" },
-  { to: "/admin/events", label: "رویدادها", icon: CalendarDays, visibility: "staff" },
-  { to: "/admin/blog", label: "نوشته‌های بلاگ", icon: FileText, visibility: "blog" },
-  { to: "/admin/blog/categories", label: "دسته‌بندی‌ها", icon: FolderTree, visibility: "taxonomy" },
-  { to: "/admin/blog/tags", label: "برچسب‌ها", icon: Tags, visibility: "taxonomy" },
-  { to: "/admin/authorizations", label: "دسترسی‌ها", icon: ShieldCheck, visibility: "superuser" },
+const navGroups = [
+  {
+    key: "users",
+    label: "کاربران",
+    items: [
+      { to: "/admin/users", label: "کاربران", icon: UsersRound, visibility: "staff" },
+      { to: "/admin/universities", label: "دانشگاه‌ها", icon: Building2, visibility: "staff" },
+      { to: "/admin/majors", label: "رشته‌ها", icon: GraduationCap, visibility: "staff" },
+    ],
+  },
+  {
+    key: "events",
+    label: "رویدادها",
+    items: [
+      { to: "/admin/events", label: "رویدادها", icon: CalendarDays, visibility: "staff" },
+      { to: "/admin/coupons", label: "کدهای تخفیف", icon: TicketPercent, visibility: "staff" },
+    ],
+  },
+  {
+    key: "blog",
+    label: "بلاگ و دسترسی",
+    items: [
+      { to: "/admin/blog", label: "نوشته‌های بلاگ", icon: FileText, visibility: "blog" },
+      { to: "/admin/blog/categories", label: "دسته‌بندی‌ها", icon: FolderTree, visibility: "taxonomy" },
+      { to: "/admin/blog/tags", label: "برچسب‌ها", icon: Tags, visibility: "taxonomy" },
+      { to: "/admin/authorizations", label: "دسترسی‌ها", icon: ShieldCheck, visibility: "superuser" },
+    ],
+  },
 ] as const;
 
+type NavItem = (typeof navGroups)[number]["items"][number];
+
 export default function AdminLayout({ children }: { children: ReactNode }) {
   const location = useLocation();
   const { user, isAuthenticated, loading } = useAuth();
   const [collapsed, setCollapsed] = useState(false);
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({
+    users: true,
+    events: true,
+    blog: true,
+  });
   const canAccessAdmin = useMemo(
     () => isAuthenticated && Boolean(user?.is_staff || user?.is_superuser || user?.can_access_blog_admin),
     [isAuthenticated, user?.can_access_blog_admin, user?.is_staff, user?.is_superuser],
@@ -60,18 +93,26 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
     return <Navigate to="/" replace />;
   }
 
-  const visibleNavItems = navItems.filter((item) => {
+  const canSeeItem = (item: NavItem) => {
     if (item.visibility === "staff") return Boolean(user?.is_staff || user?.is_superuser);
     if (item.visibility === "taxonomy") return Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
     if (item.visibility === "superuser") return Boolean(user?.is_superuser);
     return Boolean(user?.is_staff || user?.is_superuser || user?.can_access_blog_admin);
-  });
+  };
+
+  const visibleGroups = navGroups
+    .map((group) => ({ ...group, items: group.items.filter(canSeeItem) }))
+    .filter((group) => group.items.length > 0);
+  const visibleNavItems = visibleGroups.flatMap((group) => group.items);
 
   const isItemActive = (to: string) => {
     if (location.pathname === to) return true;
     if (to === "/admin/blog") {
       return /^\/admin\/blog\/(new|\d+)/.test(location.pathname ?? "");
     }
+    if (to === "/admin/events") {
+      return /^\/admin\/events(\/(create|\d+))?/.test(location.pathname ?? "");
+    }
     return Boolean(location.pathname?.startsWith(`${to}/`));
   };
 
@@ -95,28 +136,46 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
               {collapsed ? <PanelRightOpen className="h-5 w-5" /> : <PanelRightClose className="h-5 w-5" />}
             </Button>
           </div>
-          <nav className="flex-1 space-y-2 p-3">
-            {visibleNavItems.map((item) => {
-              const Icon = item.icon;
-              const active = isItemActive(item.to);
-              return (
-                <NavLink
-                  key={item.to}
-                  to={item.to}
-                  title={collapsed ? item.label : undefined}
-                  className={cn(
-                    "flex items-center gap-3 rounded-2xl px-3 py-3 text-sm transition",
-                    collapsed ? "justify-center" : "justify-start",
-                    active
-                      ? "bg-primary text-primary-foreground shadow"
-                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                  )}
-                >
-                  <Icon className="h-5 w-5 shrink-0" />
-                  {!collapsed ? <span className="font-medium">{item.label}</span> : null}
-                </NavLink>
-              );
-            })}
+          <nav className="flex-1 space-y-3 p-3">
+            {visibleGroups.map((group) => (
+              <Collapsible
+                key={group.key}
+                open={collapsed ? true : openGroups[group.key]}
+                onOpenChange={(open) => setOpenGroups((current) => ({ ...current, [group.key]: open }))}
+              >
+                {!collapsed ? (
+                  <CollapsibleTrigger className="mb-1 flex w-full items-center justify-between rounded-xl px-3 py-2 text-xs font-semibold text-muted-foreground hover:bg-muted/70">
+                    <span>{group.label}</span>
+                    <ChevronDown
+                      className={cn("h-4 w-4 transition-transform", openGroups[group.key] ? "rotate-180" : "")}
+                    />
+                  </CollapsibleTrigger>
+                ) : null}
+                <CollapsibleContent className="space-y-2">
+                  {group.items.map((item) => {
+                    const Icon = item.icon;
+                    const active = isItemActive(item.to);
+                    return (
+                      <NavLink
+                        key={item.to}
+                        to={item.to}
+                        title={collapsed ? item.label : undefined}
+                        className={cn(
+                          "flex items-center gap-3 rounded-2xl px-3 py-3 text-sm transition",
+                          collapsed ? "justify-center" : "justify-start",
+                          active
+                            ? "bg-primary text-primary-foreground shadow"
+                            : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                        )}
+                      >
+                        <Icon className="h-5 w-5 shrink-0" />
+                        {!collapsed ? <span className="font-medium">{item.label}</span> : null}
+                      </NavLink>
+                    );
+                  })}
+                </CollapsibleContent>
+              </Collapsible>
+            ))}
           </nav>
         </aside>