feat(admin): add collapsible desktop sidebar

src/views/AdminLayout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import {
   Building2,
   CalendarDays,
@@ -10,6 +10,8 @@ import {
   GraduationCap,
   LayoutDashboard,
   Menu,
+  PanelRightClose,
+  PanelRightOpen,
   ShieldCheck,
   Tags,
   TicketPercent,
@@ -63,6 +65,7 @@ type NavItem = (typeof navGroups)[number]["items"][number];
 export default function AdminLayout({ children }: { children: ReactNode }) {
   const location = useLocation();
   const { user, isAuthenticated, loading } = useAuth();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   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],
@@ -106,16 +109,43 @@ 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="sticky top-0 hidden h-screen w-72 shrink-0 border-l bg-background/95 shadow-sm backdrop-blur lg:flex lg:flex-col"
+          className={cn(
+            "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",
+            sidebarCollapsed ? "w-20" : "w-72",
+          )}
         >
-          <div className="border-b p-4 text-right">
+          <div className={cn("border-b p-4", sidebarCollapsed ? "text-center" : "text-right")}>
+            <div className={cn("flex items-center gap-2", sidebarCollapsed ? "justify-center" : "justify-start")}>
+              <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}
+            </div>
+          </div>
           <nav className="flex-1 space-y-3 p-3">
             {visibleGroups.map((group) => (
               <div key={group.key} className="space-y-2">
-                <p className="px-3 py-2 text-xs font-semibold text-muted-foreground">{group.label}</p>
+                <p
+                  className={cn(
+                    "px-3 py-2 text-xs font-semibold text-muted-foreground transition-opacity",
+                    sidebarCollapsed && "sr-only",
+                  )}
+                >
+                  {group.label}
+                </p>
                 {group.items.map((item) => {
                   const Icon = item.icon;
                   const active = isItemActive(item.to);
@@ -123,15 +153,17 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
                     <NavLink
                       key={item.to}
                       to={item.to}
+                      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",
+                        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" />
-                      <span className="font-medium">{item.label}</span>
+                      <span className={cn("font-medium", sidebarCollapsed && "sr-only")}>{item.label}</span>
                     </NavLink>
                   );
                 })}