feat(admin): add collapsible desktop sidebar

src/lib/types.ts

@@ -760,6 +760,7 @@ export interface AnalyticsPointSchema {
 }
 
 export interface AnalyticsPointGroupSchema {
+  items: AnalyticsPointSchema[];
   top_items: AnalyticsPointSchema[];
   other_count: number;
   total_count: number;
@@ -797,6 +798,7 @@ export interface AnalyticsPostPopularitySchema {
 }
 
 export interface AnalyticsPostPopularityGroupSchema {
+  items: AnalyticsPostPopularitySchema[];
   top_items: AnalyticsPostPopularitySchema[];
   other_count: number;
   total_count: number;

src/views/AdminLayout.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import {
   Building2,
   CalendarDays,
-  ChevronDown,
   FileText,
   FolderTree,
   GraduationCap,
   LayoutDashboard,
+  Menu,
   PanelRightClose,
   PanelRightOpen,
   ShieldCheck,
@@ -20,7 +20,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 +65,12 @@ 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 [sidebarCollapsed, setSidebarCollapsed] = 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 +93,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;
@@ -130,37 +110,42 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
       <div className="flex min-h-screen">
         <aside
           className={cn(
-            "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",
+            "sticky top-0 hidden h-screen shrink-0 border-l bg-background/95 shadow-sm backdrop-blur transition-[width] duration-300 lg:flex lg:flex-col",
-            collapsed ? "w-20" : "w-72",
+            sidebarCollapsed ? "w-20" : "w-72",
           )}
         >
-          <div className="flex items-center justify-between gap-2 border-b p-4">
+          <div className={cn("border-b p-4", sidebarCollapsed ? "text-center" : "text-right")}>
-            {!collapsed ? (
+            <div className={cn("flex items-center gap-2", sidebarCollapsed ? "justify-center" : "justify-start")}>
-              <div className="text-right">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9 shrink-0 rounded-2xl"
+                onClick={() => setSidebarCollapsed((value) => !value)}
+                aria-label={sidebarCollapsed ? "باز کردن منوی مدیریت" : "جمع کردن منوی مدیریت"}
+                title={sidebarCollapsed ? "باز کردن منو" : "جمع کردن منو"}
+              >
+                {sidebarCollapsed ? <PanelRightOpen className="h-4 w-4" /> : <PanelRightClose className="h-4 w-4" />}
+              </Button>
+              {!sidebarCollapsed ? (
+                <div className="min-w-0">
                   <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="باز و بسته کردن منوی مدیریت">
+            </div>
-              {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
-                open={collapsed ? true : openGroups[group.key]}
+                  className={cn(
-                onOpenChange={(open) => setOpenGroups((current) => ({ ...current, [group.key]: open }))}
+                    "px-3 py-2 text-xs font-semibold text-muted-foreground transition-opacity",
+                    sidebarCollapsed && "sr-only",
+                  )}
                 >
-                {!collapsed ? (
+                  {group.label}
-                  <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">
+                </p>
-                    <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 +153,86 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
                     <NavLink
                       key={item.to}
                       to={item.to}
-                        title={collapsed ? item.label : undefined}
+                      title={sidebarCollapsed ? item.label : undefined}
                       className={cn(
-                          "flex items-center gap-3 rounded-2xl px-3 py-3 text-sm transition",
+                        "flex items-center rounded-2xl px-3 py-3 text-sm transition",
-                          collapsed ? "justify-center" : "justify-start",
+                        sidebarCollapsed ? "justify-center" : "gap-3",
                         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={cn("font-medium", sidebarCollapsed && "sr-only")}>{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>
   );
 }