From 5fcc3706114c3ad944ed985c84964545e1c0306f Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Fri, 12 Jun 2026 15:08:43 +0330
Subject: [PATCH] feat(admin): add collapsible sidebar navigation

---
 src/views/AdminLayout.tsx | 147 ++++++++++++++++++++++++++++++--------
 1 file changed, 117 insertions(+), 30 deletions(-)

diff --git a/src/views/AdminLayout.tsx b/src/views/AdminLayout.tsx
index 2667c46..d7ab169 100644
--- a/src/views/AdminLayout.tsx
+++ b/src/views/AdminLayout.tsx
@@ -1,24 +1,53 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
+import {
+  CalendarDays,
+  FileText,
+  FolderTree,
+  PanelRightClose,
+  PanelRightOpen,
+  ShieldCheck,
+  Tags,
+  UsersRound,
+} from "lucide-react";
 import { Navigate, NavLink, useLocation } from "@/lib/router";
 import { useAuth } from "@/contexts/AuthContext";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 const navItems = [
-  { to: "/admin/users", label: "مدیریت کاربران", requiresStaff: true },
-  { to: "/admin/events", label: "مدیریت رویدادها", requiresStaff: true },
-  { to: "/admin/blog", label: "مدیریت بلاگ", requiresStaff: false },
+  { 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" },
 ] as const;
 
 export default function AdminLayout({ children }: { children: ReactNode }) {
   const location = useLocation();
   const { user, isAuthenticated, loading } = useAuth();
+  const [collapsed, setCollapsed] = 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],
   );
 
+  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">
@@ -32,40 +61,98 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
   }
 
   const visibleNavItems = navItems.filter((item) => {
-    if (item.requiresStaff) {
-      return Boolean(user?.is_staff || user?.is_superuser);
-    }
+    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 isItemActive = (to: string) => {
+    if (location.pathname === to) return true;
+    if (to === "/admin/blog") {
+      return /^\/admin\/blog\/(new|\d+)/.test(location.pathname ?? "");
+    }
+    return Boolean(location.pathname?.startsWith(`${to}/`));
+  };
+
   return (
-    <div className="min-h-screen bg-background" dir="rtl">
-      <div className="border-b bg-muted/20">
-        <div className="container mx-auto flex items-center justify-between px-4 py-4 gap-4 flex-row-reverse md:flex-row">
-          <h1 className="text-2xl font-bold">پنل مدیریت</h1>
-          <div className="flex flex-wrap items-center gap-2">
-            {visibleNavItems.map((item) => (
-              <NavLink
-                key={item.to}
-                to={item.to}
-                className={({ isActive }) =>
-                  [
-                    "rounded-full px-4 py-2 text-sm transition",
-                    (isActive || location.pathname?.startsWith(item.to))
+    <div className="min-h-screen bg-muted/15" dir="rtl">
+      <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 md:flex md:flex-col",
+            collapsed ? "w-20" : "w-72",
+          )}
+        >
+          <div className="flex items-center justify-between gap-2 border-b p-4">
+            {!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-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"
-                      : "bg-card text-muted-foreground hover:text-foreground border",
-                  ].join(" ")
-                }
-              >
-                {item.label}
-              </NavLink>
-            ))}
+                      : "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>
+        </aside>
+
+        <div className="min-w-0 flex-1">
+          <div className="border-b bg-background/90 md:hidden">
+            <div className="flex items-center justify-between px-4 py-3">
+              <h1 className="text-lg font-bold">پنل مدیریت</h1>
+              <div className="flex gap-2 overflow-x-auto">
+                {visibleNavItems.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                    <NavLink
+                      key={item.to}
+                      to={item.to}
+                      className={({ isActive }) =>
+                        cn(
+                          "flex shrink-0 items-center gap-1 rounded-full px-3 py-2 text-xs",
+                          isActive || isItemActive(item.to)
+                            ? "bg-primary text-primary-foreground"
+                            : "bg-muted text-muted-foreground",
+                        )
+                      }
+                    >
+                      <Icon className="h-4 w-4" />
+                      {item.label}
+                    </NavLink>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+          <div className="container mx-auto px-4 py-6">
+            {children}
           </div>
         </div>
       </div>
-      <div className="container mx-auto px-4 py-6">
-        {children}
-      </div>
     </div>
   );
 }