refactor(admin): simplify grouped navigation

src/views/AdminLayout.tsx

@@ -1,17 +1,15 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import {
   Building2,
   CalendarDays,
-  ChevronDown,
   FileText,
   FolderTree,
   GraduationCap,
   LayoutDashboard,
-  PanelRightClose,
+  Menu,
-  PanelRightOpen,
   ShieldCheck,
   Tags,
   TicketPercent,
@@ -20,7 +18,7 @@ import {
 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 { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
 
 const navGroups = [
@@ -65,31 +63,11 @@ 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>>({
-    dashboard: true,
-    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],
   );
 
-  useEffect(() => {
-    const saved = window.localStorage.getItem("admin-sidebar-collapsed");
-    if (saved) setCollapsed(saved === "true");
-  }, []);
-
-  const toggleCollapsed = () => {
-    setCollapsed((current) => {
-      const next = !current;
-      window.localStorage.setItem("admin-sidebar-collapsed", String(next));
-      return next;
-    });
-  };
-
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center text-muted-foreground" dir="rtl">
@@ -112,7 +90,6 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
   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;
@@ -129,38 +106,16 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
     <div className="min-h-screen bg-muted/15" dir="rtl">
       <div className="flex min-h-screen">
         <aside
-          className={cn(
+          className="sticky top-0 hidden h-screen w-72 shrink-0 border-l bg-background/95 shadow-sm backdrop-blur lg:flex lg:flex-col"
-            "sticky top-0 hidden h-screen shrink-0 border-l bg-background/95 shadow-sm backdrop-blur transition-[width] duration-300 ease-in-out lg:flex lg:flex-col",
-            collapsed ? "w-20" : "w-72",
-          )}
         >
-          <div className="flex items-center justify-between gap-2 border-b p-4">
+          <div className="border-b p-4 text-right">
-            {!collapsed ? (
-              <div className="text-right">
             <h1 className="text-lg font-bold">پنل مدیریت</h1>
             <p className="text-xs text-muted-foreground">انجمن علمی مهندسی کامپیوتر</p>
           </div>
-            ) : null}
-            <Button variant="ghost" size="icon" onClick={toggleCollapsed} aria-label="باز و بسته کردن منوی مدیریت">
-              {collapsed ? <PanelRightOpen className="h-5 w-5" /> : <PanelRightClose className="h-5 w-5" />}
-            </Button>
-          </div>
           <nav className="flex-1 space-y-3 p-3">
             {visibleGroups.map((group) => (
-              <Collapsible
+              <div key={group.key} className="space-y-2">
-                key={group.key}
+                <p className="px-3 py-2 text-xs font-semibold text-muted-foreground">{group.label}</p>
-                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);
@@ -168,69 +123,84 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
                     <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}
+                      <span className="font-medium">{item.label}</span>
                     </NavLink>
                   );
                 })}
-                </CollapsibleContent>
+              </div>
-              </Collapsible>
             ))}
           </nav>
         </aside>
 
         <div className="min-w-0 flex-1">
           <div className="border-b bg-background/90 lg:hidden">
-            <div className="px-4 py-3 text-right">
+            <div className="flex items-center justify-between gap-3 px-4 py-3">
+              <div className="text-right">
                 <h1 className="text-lg font-bold">پنل مدیریت</h1>
                 <p className="text-xs text-muted-foreground">مدیریت بخش‌های سامانه</p>
               </div>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="outline" size="sm" className="gap-2 rounded-2xl">
+                    <Menu className="h-4 w-4" />
+                    منو
+                  </Button>
+                </SheetTrigger>
+                <SheetContent
+                  side="bottom"
+                  className="max-h-[82vh] overflow-y-auto rounded-t-[2rem] border-t p-4 pb-[calc(env(safe-area-inset-bottom)+1rem)]"
+                  dir="rtl"
+                >
+                  <SheetHeader className="mt-6 text-right">
+                    <SheetTitle>بخش‌های پنل مدیریت</SheetTitle>
+                  </SheetHeader>
+                  <nav className="mt-5 space-y-5">
+                    {visibleGroups.map((group) => (
+                      <div key={group.key} className="space-y-2">
+                        <p className="px-2 text-xs font-semibold text-muted-foreground">{group.label}</p>
+                        <div className="grid gap-2 sm:grid-cols-2">
+                          {group.items.map((item) => {
+                            const Icon = item.icon;
+                            const active = isItemActive(item.to);
+                            return (
+                              <SheetClose asChild key={item.to}>
+                                <NavLink
+                                  to={item.to}
+                                  className={cn(
+                                    "flex items-center gap-3 rounded-2xl border px-3 py-3 text-sm transition",
+                                    active
+                                      ? "border-primary bg-primary text-primary-foreground shadow"
+                                      : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
+                                  )}
+                                  aria-current={active ? "page" : undefined}
+                                >
+                                  <Icon className="h-5 w-5 shrink-0" />
+                                  <span className="font-medium">{item.label}</span>
+                                </NavLink>
+                              </SheetClose>
+                            );
+                          })}
                         </div>
-          <div className="container mx-auto min-w-0 px-3 pb-28 pt-4 sm:px-4 lg:py-6">
+                      </div>
+                    ))}
+                  </nav>
+                </SheetContent>
+              </Sheet>
+            </div>
+          </div>
+          <div className="container mx-auto min-w-0 px-3 pb-8 pt-4 sm:px-4 lg:py-6">
             {children}
           </div>
         </div>
       </div>
-      <div
-        className="fixed inset-x-0 z-50 px-4 lg:hidden"
-        style={{ bottom: "calc(env(safe-area-inset-bottom) + 0.9rem)" }}
-      >
-        <nav
-          aria-label="Admin mobile navigation"
-          className="mx-auto flex w-full max-w-sm items-center justify-between rounded-[1.75rem] border border-white/20 bg-background/70 px-2 py-2 shadow-[0_18px_60px_rgba(15,23,42,0.18)] backdrop-blur-2xl dark:border-white/10 dark:bg-slate-950/65"
-          dir="rtl"
-        >
-          {visibleNavItems.map((item) => {
-            const Icon = item.icon;
-            const active = isItemActive(item.to);
-            return (
-              <NavLink
-                key={item.to}
-                to={item.to}
-                className={cn(
-                  "flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-2xl px-2 py-2 text-[10px] font-medium transition-all",
-                  active
-                    ? "bg-primary text-primary-foreground shadow-sm"
-                    : "text-muted-foreground hover:bg-white/30 hover:text-foreground dark:hover:bg-white/10",
-                )}
-                aria-current={active ? "page" : undefined}
-              >
-                <Icon className={cn("h-5 w-5", active ? "scale-105" : "")} />
-                <span className="max-w-full truncate">{item.label}</span>
-              </NavLink>
-            );
-          })}
-        </nav>
-      </div>
     </div>
   );
 }