feat(admin): add collapsible desktop sidebar

src/views/AdminDashboard.tsx

@@ -42,6 +42,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { api } from "@/lib/api";
 import type {
   AnalyticsPointGroupSchema,
@@ -138,13 +139,13 @@ function truncateLabel(value: string, max = 18) {
   return normalized.length > max ? `${normalized.slice(0, max - 1)}…` : normalized;
 }
 
-function chartHeight(count: number, min = 280) {
+function chartHeight(count: number, min = 280, compact = false) {
-  return Math.max(min, count * 32 + 80);
+  return Math.max(compact ? Math.min(min, 240) : min, count * (compact ? 26 : 32) + (compact ? 64 : 80));
 }
 
-function axisWidth(items: AnalyticsPointSchema[]) {
+function axisWidth(items: AnalyticsPointSchema[], compact = false) {
   const maxLength = Math.max(...items.map((item) => String(item.label).length), 10);
-  return Math.min(190, Math.max(90, maxLength * 7));
+  return Math.min(compact ? 92 : 190, Math.max(compact ? 64 : 90, maxLength * (compact ? 4.5 : 7)));
 }
 
 function dataWithOtherNotice(group: AnalyticsPointGroupSchema) {
@@ -212,13 +213,17 @@ function DateRangeFilter({
   value,
   onChange,
   onReset,
+  resetDisabled,
+  showReset = true,
 }: {
   value: DateRangeState;
   onChange: (next: DateRangeState) => void;
   onReset: () => void;
+  resetDisabled?: boolean;
+  showReset?: boolean;
 }) {
   return (
-    <div className="grid gap-3 md:grid-cols-[1fr_1fr_auto]">
+    <div className={cn("grid gap-3", showReset ? "md:grid-cols-[1fr_1fr_auto]" : "md:grid-cols-2")}>
       <div className="space-y-2">
         <Label>از تاریخ</Label>
         <DatePicker
@@ -247,16 +252,31 @@ function DateRangeFilter({
           containerClassName="w-full"
         />
       </div>
-      <div className="flex items-end">
+      {showReset ? (
-        <Button variant="destructive" className="w-full gap-2 md:w-auto" onClick={onReset}>
+        <div className="flex items-end">
-          <Eraser className="h-4 w-4" />
+          <FilterResetButton disabled={resetDisabled ?? (!value.from && !value.to)} onClick={onReset} />
-          پاک‌کردن
+        </div>
-        </Button>
+      ) : null}
-      </div>
     </div>
   );
 }
 
+function FilterResetButton({ disabled, onClick }: { disabled: boolean; onClick: () => void }) {
+  return (
+    <Button
+      variant="destructive"
+      className="w-full gap-2 md:w-10 md:px-0"
+      onClick={onClick}
+      disabled={disabled}
+      title="پاک‌کردن"
+      aria-label="پاک‌کردن فیلترها"
+    >
+      <Eraser className="h-4 w-4" />
+      <span className="md:sr-only">پاک‌کردن</span>
+    </Button>
+  );
+}
+
 function FilterCard({
   title,
   description,
@@ -280,10 +300,23 @@ function FilterCard({
   );
 }
 
-function ChartViewport({ children, minWidth = 420 }: { children: React.ReactNode; minWidth?: number }) {
+function ChartViewport({
+  children,
+  minWidth = 420,
+  scrollable = false,
+}: {
+  children: React.ReactNode;
+  minWidth?: number;
+  scrollable?: boolean;
+}) {
+  const isMobile = useIsMobile();
+  const shouldScroll = scrollable && !isMobile;
+
   return (
-    <div className="overflow-x-auto overflow-y-hidden pb-2" dir="ltr">
+    <div className={cn("min-w-0 max-w-full overflow-y-hidden pb-2", shouldScroll ? "overflow-x-auto" : "overflow-x-hidden")} dir="ltr">
-      <div style={{ minWidth }}>{children}</div>
+      <div className="min-w-0 max-w-full" style={{ width: "100%", minWidth: shouldScroll ? minWidth : undefined }}>
+        {children}
+      </div>
     </div>
   );
 }
@@ -354,6 +387,7 @@ function DashboardPointDetailModal({
 }) {
   const [search, setSearch] = React.useState("");
   const [sortBy, setSortBy] = React.useState<"value" | "label">("value");
+  const isMobile = useIsMobile();
   const filteredData = React.useMemo(() => {
     const normalizedSearch = search.trim().toLocaleLowerCase("fa-IR");
     const filtered = normalizedSearch
@@ -390,16 +424,16 @@ function DashboardPointDetailModal({
           <EmptyChart label="موردی با این جستجو پیدا نشد." />
         ) : (
           <>
-            <ChartViewport minWidth={680}>
+            <ChartViewport minWidth={680} scrollable>
               <ChartContainer
                 config={{ value: { label: "مقدار", color } }}
                 className="w-full"
-                style={{ height: Math.min(Math.max(filteredData.length * 34 + 100, 360), 780) }}
+                style={{ height: Math.min(Math.max(filteredData.length * (isMobile ? 28 : 34) + 100, isMobile ? 300 : 360), 780) }}
               >
                 <BarChart
                   data={filteredData}
                   layout="vertical"
-                  margin={{ top: 12, right: 8, bottom: 24, left: 32 }}
+                  margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 20 } : { top: 12, right: 8, bottom: 24, left: 32 }}
                 >
                   <CartesianGrid horizontal={false} strokeDasharray="3 3" />
                   <XAxis
@@ -415,11 +449,11 @@ function DashboardPointDetailModal({
                     dataKey="label"
                     type="category"
                     orientation="right"
-                    width={axisWidth(filteredData)}
+                    width={axisWidth(filteredData, isMobile)}
                     tickLine={false}
                     axisLine={false}
-                    tickMargin={10}
+                    tickMargin={isMobile ? 4 : 10}
-                    tickFormatter={(value) => truncateLabel(String(value), 24)}
+                    tickFormatter={(value) => truncateLabel(String(value), isMobile ? 12 : 24)}
                   />
                   <ChartTooltip content={<CustomValueTooltip unit={unit} formatter={formatter} />} />
                   <Bar dataKey="value" radius={[8, 8, 8, 8]} fill="var(--color-value)" />
@@ -484,6 +518,7 @@ function BlogPostEngagementModal({
 }) {
   const [search, setSearch] = React.useState("");
   const [sortBy, setSortBy] = React.useState<"score" | "likes" | "saves" | "comments" | "title">("score");
+  const isMobile = useIsMobile();
   const data = React.useMemo(() => {
     const normalizedSearch = search.trim().toLocaleLowerCase("fa-IR");
     const filtered = normalizedSearch
@@ -530,7 +565,7 @@ function BlogPostEngagementModal({
           <EmptyChart label="نوشته‌ای با این جستجو پیدا نشد." />
         ) : (
           <>
-            <ChartViewport minWidth={760}>
+            <ChartViewport minWidth={760} scrollable>
               <ChartContainer
                 config={{
                   likes: { label: "لایک", color: PALETTE.rose },
@@ -538,12 +573,12 @@ function BlogPostEngagementModal({
                   comments: { label: "کامنت", color: PALETTE.amber },
                 }}
                 className="w-full"
-                style={{ height: Math.min(Math.max(data.length * 34 + 100, 380), 820) }}
+                style={{ height: Math.min(Math.max(data.length * (isMobile ? 28 : 34) + 100, isMobile ? 320 : 380), 820) }}
               >
                 <BarChart
                   data={data}
                   layout="vertical"
-                  margin={{ top: 12, right: 8, bottom: 24, left: 32 }}
+                  margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 20 } : { top: 12, right: 8, bottom: 24, left: 32 }}
                 >
                   <CartesianGrid horizontal={false} strokeDasharray="3 3" />
                   <XAxis
@@ -559,11 +594,11 @@ function BlogPostEngagementModal({
                     dataKey="label"
                     type="category"
                     orientation="right"
-                    width={axisWidth(data.map((post) => ({ label: post.title, value: post.score })))}
+                    width={axisWidth(data.map((post) => ({ label: post.title, value: post.score })), isMobile)}
                     tickLine={false}
                     axisLine={false}
-                    tickMargin={10}
+                    tickMargin={isMobile ? 4 : 10}
-                    tickFormatter={(value) => truncateLabel(String(value), 26)}
+                    tickFormatter={(value) => truncateLabel(String(value), isMobile ? 12 : 26)}
                   />
                   <ChartTooltip content={<PostEngagementTooltip />} />
                   <Bar dataKey="likes" stackId="engagement" fill="var(--color-likes)" radius={[0, 0, 0, 0]} />
@@ -651,8 +686,9 @@ function HorizontalBarCard({
   const data = dataWithOtherNotice(group);
   const allData = fullGroupItems(group);
   const [detailsOpen, setDetailsOpen] = React.useState(false);
+  const isMobile = useIsMobile();
   return (
-    <Card>
+    <Card className="min-w-0 overflow-hidden">
       <CardHeader className="p-4 sm:p-6">
         <CardTitle className="text-base sm:text-lg">{title}</CardTitle>
         <CardDescription>{description}</CardDescription>
@@ -666,9 +702,13 @@ function HorizontalBarCard({
               <ChartContainer
                 config={{ value: { label: "مقدار", color } }}
                 className="w-full"
-                style={{ height: chartHeight(data.length) }}
+                style={{ height: chartHeight(data.length, 280, isMobile) }}
               >
-                <BarChart data={data} layout="vertical" margin={{ top: 12, right: 8, bottom: 24, left: 32 }}>
+                <BarChart
+                  data={data}
+                  layout="vertical"
+                  margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 18 } : { top: 12, right: 8, bottom: 24, left: 32 }}
+                >
                   <CartesianGrid horizontal={false} strokeDasharray="3 3" />
                   <XAxis
                     type="number"
@@ -683,11 +723,11 @@ function HorizontalBarCard({
                     dataKey="label"
                     type="category"
                     orientation="right"
-                    width={axisWidth(data)}
+                    width={axisWidth(data, isMobile)}
                     tickLine={false}
                     axisLine={false}
-                    tickMargin={10}
+                    tickMargin={isMobile ? 4 : 10}
-                    tickFormatter={(value) => truncateLabel(String(value))}
+                    tickFormatter={(value) => truncateLabel(String(value), isMobile ? 10 : 18)}
                   />
                   <ChartTooltip content={<CustomValueTooltip unit={unit} formatter={valueFormatter} />} />
                   <Bar dataKey="value" radius={[8, 8, 8, 8]} fill="var(--color-value)" />
@@ -726,8 +766,9 @@ function TrendLineCard({
   color?: string;
   valueFormatter?: (value: number) => string;
 }) {
+  const isMobile = useIsMobile();
   return (
-    <Card>
+    <Card className="min-w-0 overflow-hidden">
       <CardHeader className="p-4 sm:p-6">
         <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
           <LineChartIcon className="h-5 w-5 text-primary" />
@@ -740,24 +781,27 @@ function TrendLineCard({
           <EmptyChart />
         ) : (
           <ChartViewport>
-            <ChartContainer config={{ value: { label: "مقدار", color } }} className="h-[260px] w-full sm:h-[300px]">
+            <ChartContainer config={{ value: { label: "مقدار", color } }} className="h-[220px] w-full sm:h-[300px]">
-              <LineChart data={data} margin={{ top: 16, right: 12, bottom: 32, left: 18 }}>
+              <LineChart
+                data={data}
+                margin={isMobile ? { top: 12, right: 4, bottom: 26, left: 8 } : { top: 16, right: 12, bottom: 32, left: 18 }}
+              >
                 <CartesianGrid vertical={false} strokeDasharray="3 3" />
                 <XAxis
                   dataKey="date"
                   reversed
                   tickLine={false}
                   axisLine={false}
-                  minTickGap={34}
+                  minTickGap={isMobile ? 18 : 34}
-                  tickMargin={10}
+                  tickMargin={isMobile ? 6 : 10}
                   tickFormatter={formatJalaliTick}
                 />
                 <YAxis
                   orientation="right"
-                  width={76}
+                  width={isMobile ? 46 : 76}
                   tickLine={false}
                   axisLine={false}
-                  tickMargin={10}
+                  tickMargin={isMobile ? 4 : 10}
                   tickFormatter={(value) => valueFormatter(Number(value))}
                 />
                 <ChartTooltip
@@ -791,8 +835,9 @@ function StatusChartCard({
   description: string;
   data: Array<{ status: string; label: string; value: number }>;
 }) {
+  const isMobile = useIsMobile();
   return (
-    <Card>
+    <Card className="min-w-0 overflow-hidden">
       <CardHeader className="p-4 sm:p-6">
         <CardTitle className="text-base sm:text-lg">{title}</CardTitle>
         <CardDescription>{description}</CardDescription>
@@ -802,9 +847,13 @@ function StatusChartCard({
           <EmptyChart />
         ) : (
           <>
-            <ChartViewport minWidth={400}>
+            <ChartViewport>
-              <ChartContainer config={{ value: { label: "تعداد", color: PALETTE.teal } }} className="h-[260px] w-full sm:h-[300px]">
+              <ChartContainer config={{ value: { label: "تعداد", color: PALETTE.teal } }} className="h-[220px] w-full sm:h-[300px]">
-                <BarChart data={data} layout="vertical" margin={{ top: 14, right: 8, bottom: 28, left: 32 }}>
+                <BarChart
+                  data={data}
+                  layout="vertical"
+                  margin={isMobile ? { top: 10, right: 2, bottom: 22, left: 18 } : { top: 14, right: 8, bottom: 28, left: 32 }}
+                >
                   <CartesianGrid horizontal={false} strokeDasharray="3 3" />
                   <XAxis
                     type="number"
@@ -819,11 +868,11 @@ function StatusChartCard({
                     dataKey="label"
                     type="category"
                     orientation="right"
-                    width={108}
+                    width={isMobile ? 74 : 108}
                     tickLine={false}
                     axisLine={false}
-                    tickMargin={10}
+                    tickMargin={isMobile ? 4 : 10}
-                    tickFormatter={(value) => truncateLabel(String(value), 14)}
+                    tickFormatter={(value) => truncateLabel(String(value), isMobile ? 9 : 14)}
                   />
                   <ChartTooltip content={<CustomValueTooltip />} />
                   <Bar dataKey="value" radius={[8, 8, 8, 8]}>
@@ -843,8 +892,9 @@ function StatusChartCard({
 }
 
 function ActivityTrendCard({ data }: { data: BlogAnalyticsSchema["activity_trend"] }) {
+  const isMobile = useIsMobile();
   return (
-    <Card>
+    <Card className="min-w-0 overflow-hidden">
       <CardHeader className="p-4 sm:p-6">
         <CardTitle className="text-base sm:text-lg">روند تعاملات بلاگ</CardTitle>
         <CardDescription>لایک، ذخیره و کامنت در بازه انتخابی</CardDescription>
@@ -860,17 +910,20 @@ function ActivityTrendCard({ data }: { data: BlogAnalyticsSchema["activity_trend
                 saves: { label: "ذخیره", color: PALETTE.cyan },
                 comments: { label: "کامنت", color: PALETTE.amber },
               }}
-              className="h-[280px] w-full sm:h-[320px]"
+              className="h-[230px] w-full sm:h-[320px]"
             >
-              <LineChart data={data} margin={{ top: 16, right: 12, bottom: 32, left: 18 }}>
+              <LineChart
+                data={data}
+                margin={isMobile ? { top: 12, right: 4, bottom: 26, left: 8 } : { top: 16, right: 12, bottom: 32, left: 18 }}
+              >
                 <CartesianGrid vertical={false} strokeDasharray="3 3" />
-                <XAxis dataKey="date" reversed tickLine={false} axisLine={false} tickFormatter={formatJalaliTick} minTickGap={34} tickMargin={10} />
+                <XAxis dataKey="date" reversed tickLine={false} axisLine={false} tickFormatter={formatJalaliTick} minTickGap={isMobile ? 18 : 34} tickMargin={isMobile ? 6 : 10} />
                 <YAxis
                   orientation="right"
-                  width={64}
+                  width={isMobile ? 44 : 64}
                   tickLine={false}
                   axisLine={false}
-                  tickMargin={10}
+                  tickMargin={isMobile ? 4 : 10}
                   tickFormatter={(value) => formatNumberPersian(Number(value))}
                 />
                 <ChartTooltip content={<ChartTooltipContent />} />
@@ -890,9 +943,10 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
   const data = toPostEngagementData(group.top_items);
   const allPosts = group.items?.length ? group.items : group.top_items;
   const [detailsOpen, setDetailsOpen] = React.useState(false);
-  const labelAxisWidth = axisWidth(data.map((post) => ({ label: post.title, value: post.score })));
+  const isMobile = useIsMobile();
+  const labelAxisWidth = axisWidth(data.map((post) => ({ label: post.title, value: post.score })), isMobile);
   return (
-    <Card>
+    <Card className="min-w-0 overflow-hidden">
       <CardHeader className="p-4 sm:p-6">
         <CardTitle className="text-base sm:text-lg">محبوبیت نوشته‌ها</CardTitle>
         <CardDescription>رتبه‌بندی بر اساس مجموع لایک، ذخیره و کامنت</CardDescription>
@@ -902,7 +956,7 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
           <EmptyChart />
         ) : (
           <>
-            <ChartViewport minWidth={460}>
+            <ChartViewport>
               <ChartContainer
                 config={{
                   likes: { label: "لایک", color: PALETTE.rose },
@@ -910,9 +964,13 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
                   comments: { label: "کامنت", color: PALETTE.amber },
                 }}
                 className="w-full"
-                style={{ height: chartHeight(data.length, 320) }}
+                style={{ height: chartHeight(data.length, 320, isMobile) }}
               >
-                <BarChart data={data} layout="vertical" margin={{ top: 12, right: 8, bottom: 24, left: 32 }}>
+                <BarChart
+                  data={data}
+                  layout="vertical"
+                  margin={isMobile ? { top: 8, right: 2, bottom: 22, left: 18 } : { top: 12, right: 8, bottom: 24, left: 32 }}
+                >
                   <CartesianGrid horizontal={false} strokeDasharray="3 3" />
                   <XAxis
                     type="number"
@@ -929,8 +987,8 @@ function BlogEngagementCard({ group }: { group: BlogAnalyticsSchema["post_popula
                     width={labelAxisWidth}
                     tickLine={false}
                     axisLine={false}
-                    tickMargin={10}
+                    tickMargin={isMobile ? 4 : 10}
-                    tickFormatter={(value) => truncateLabel(String(value), 22)}
+                    tickFormatter={(value) => truncateLabel(String(value), isMobile ? 10 : 22)}
                   />
                   <ChartTooltip content={<PostEngagementTooltip />} />
                   <Bar dataKey="likes" stackId="engagement" fill="var(--color-likes)" radius={[0, 0, 0, 0]} />
@@ -965,7 +1023,13 @@ function TopEventsCard({ group }: { group: EventAnalyticsSchema["top_events"] })
       <CardContent className="space-y-3 p-4 pt-0 sm:p-6 sm:pt-0">
         {group.top_items.length ? (
           group.top_items.map((event, index) => (
-            <div key={event.id} className="flex items-center justify-between gap-3 rounded-xl border bg-background/70 p-3">
+            <a
+              key={event.id}
+              href={`/events/${event.slug}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center justify-between gap-3 rounded-xl border bg-background/70 p-3 transition hover:border-primary/50 hover:bg-muted/40"
+            >
               <div className="min-w-0 text-right">
                 <p className="truncate font-medium">{event.title}</p>
                 <p className="mt-1 text-xs text-muted-foreground">
@@ -975,7 +1039,7 @@ function TopEventsCard({ group }: { group: EventAnalyticsSchema["top_events"] })
                 </p>
               </div>
               <Badge variant="secondary">{toPersianDigits(index + 1)}</Badge>
-            </div>
+            </a>
           ))
         ) : (
           <p className="text-sm text-muted-foreground">داده‌ای وجود ندارد.</p>
@@ -1000,7 +1064,13 @@ function TopPostsCard({ posts }: { posts: BlogAnalyticsSchema["top_posts"] }) {
       <CardContent className="space-y-3 p-4 pt-0 sm:p-6 sm:pt-0">
         {posts.length ? (
           posts.map((post, index) => (
-            <div key={post.id} className="flex items-center justify-between gap-3 rounded-xl border bg-background/70 p-3">
+            <a
+              key={post.id}
+              href={`/blog/${post.slug}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center justify-between gap-3 rounded-xl border bg-background/70 p-3 transition hover:border-primary/50 hover:bg-muted/40"
+            >
               <div className="min-w-0 text-right">
                 <p className="truncate font-medium">{post.title}</p>
                 <p className="mt-1 text-xs text-muted-foreground">
@@ -1008,8 +1078,7 @@ function TopPostsCard({ posts }: { posts: BlogAnalyticsSchema["top_posts"] }) {
                   {formatNumberPersian(post.comments)} کامنت
                 </p>
               </div>
-              <Badge variant="secondary">{toPersianDigits(index + 1)}</Badge>
+            </a>
-            </div>
           ))
         ) : (
           <p className="text-sm text-muted-foreground">داده‌ای وجود ندارد.</p>
@@ -1034,7 +1103,12 @@ function UsersSection({
   return (
     <div className="space-y-6" dir="rtl">
       <FilterCard title="فیلتر کاربران" description="این فیلتر فقط روی کاربران و تاریخ عضویت آن‌ها اعمال می‌شود.">
-        <DateRangeFilter value={filters} onChange={onFiltersChange} onReset={() => onFiltersChange({ from: "", to: "" })} />
+        <DateRangeFilter
+          value={filters}
+          onChange={onFiltersChange}
+          onReset={() => onFiltersChange({ from: "", to: "" })}
+          resetDisabled={!filters.from && !filters.to}
+        />
       </FilterCard>
       {query.isLoading ? <SectionLoading /> : null}
       {query.isError ? <SectionError error={query.error} /> : null}
@@ -1092,12 +1166,13 @@ function EventsSection({
   return (
     <div className="space-y-6">
       <FilterCard title="فیلتر رویدادها" description="این فیلتر فقط روی آمار رویداد، ثبت‌نام، درآمد و تنوع شرکت‌کنندگان اعمال می‌شود.">
-        <div className="grid gap-3 xl:grid-cols-[2fr_1.2fr]">
+        <div className="grid gap-3 xl:grid-cols-[2fr_1.2fr_auto]">
           <div>
             <DateRangeFilter
               value={filters}
               onChange={(next) => onFiltersChange({ ...filters, ...next })}
               onReset={reset}
+              showReset={false}
             />
           </div>
           <div className="space-y-2">
@@ -1120,6 +1195,9 @@ function EventsSection({
               emptyText="رویدادی پیدا نشد."
             />
           </div>
+          <div className="flex items-end">
+            <FilterResetButton disabled={!filters.from && !filters.to && !filters.eventId} onClick={reset} />
+          </div>
         </div>
       </FilterCard>
       {query.isLoading ? <SectionLoading /> : null}
@@ -1183,7 +1261,12 @@ function BlogSection({
   return (
     <div className="space-y-6">
       <FilterCard title="فیلتر بلاگ" description="این فیلتر فقط روی نوشته‌ها و تعاملات بلاگ اعمال می‌شود و به رویدادها وابسته نیست.">
-        <DateRangeFilter value={filters} onChange={onFiltersChange} onReset={() => onFiltersChange({ from: "", to: "" })} />
+        <DateRangeFilter
+          value={filters}
+          onChange={onFiltersChange}
+          onReset={() => onFiltersChange({ from: "", to: "" })}
+          resetDisabled={!filters.from && !filters.to}
+        />
       </FilterCard>
       {query.isLoading ? <SectionLoading /> : null}
       {query.isError ? <SectionError error={query.error} /> : null}

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")}>
-            <h1 className="text-lg font-bold">پنل مدیریت</h1>
+            <div className={cn("flex items-center gap-2", sidebarCollapsed ? "justify-center" : "justify-start")}>
-            <p className="text-xs text-muted-foreground">انجمن علمی مهندسی کامپیوتر</p>
+              <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>
                   );
                 })}