feat(admin): grouped sidebar shell (replace cramped 27-link top bar)

- AdminShell: fixed RTL sidebar with grouped nav (نمای کلی / محتوا / رشد و ارتباطات / کاربران و مالی / فارم رندر / سیستم), active-link highlighting via usePathname, sticky header showing the current section, mobile drawer with hamburger + overlay - layout: build the grouped nav and render via AdminShell Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-03 07:56:54 +03:30
parent ebf0e11f22
commit 43780f94f6
2 changed files with 154 additions and 51 deletions
@@ -0,0 +1,94 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+export interface NavItem { href: string; label: string }
+export interface NavGroup { title: string; items: NavItem[] }
+
+export function AdminShell({
+  groups,
+  brand,
+  back,
+  children,
+}: {
+  groups: NavGroup[];
+  brand: string;
+  back: string;
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname() ?? "";
+  const [open, setOpen] = useState(false);
+
+  // Strip a leading locale segment (e.g. /en) so fa (no prefix) and en both match.
+  const clean = pathname.replace(/^\/[a-z]{2}(?=\/)/, "");
+  const isActive = (href: string) => clean === href || clean.startsWith(href + "/");
+  const current = groups.flatMap((g) => g.items).find((i) => isActive(i.href));
+
+  return (
+    <div className="min-h-screen bg-[#0c0e1a] text-gray-200">
+      {/* Sidebar */}
+      <aside
+        className={`fixed inset-y-0 start-0 z-40 flex w-60 flex-col border-e border-[#1e2235] bg-[#0d0f1c] transition-transform lg:translate-x-0 ${
+          open ? "translate-x-0" : "rtl:translate-x-full ltr:-translate-x-full"
+        }`}
+      >
+        <div className="flex h-14 items-center gap-2 border-b border-[#1e2235] px-5">
+          <span className="grid h-7 w-7 place-items-center rounded-lg bg-indigo-600 text-sm font-bold text-white">F</span>
+          <span className="text-sm font-semibold text-white">{brand}</span>
+        </div>
+        <nav className="flex-1 space-y-5 overflow-y-auto px-3 py-4">
+          {groups.map((g) => (
+            <div key={g.title}>
+              <div className="px-2 pb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-600">{g.title}</div>
+              <div className="space-y-0.5">
+                {g.items.map((item) => {
+                  const active = isActive(item.href);
+                  return (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      onClick={() => setOpen(false)}
+                      className={`block rounded-lg px-3 py-1.5 text-sm transition-colors ${
+                        active
+                          ? "bg-indigo-600/15 font-medium text-indigo-300"
+                          : "text-gray-400 hover:bg-[#161a2e] hover:text-white"
+                      }`}
+                    >
+                      {item.label}
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </nav>
+        <div className="border-t border-[#1e2235] p-3">
+          <a href="/dashboard" className="block rounded-lg px-3 py-1.5 text-sm text-gray-400 hover:bg-[#161a2e] hover:text-white">
+            ← {back}
+          </a>
+        </div>
+      </aside>
+
+      {/* Mobile overlay */}
+      {open && <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setOpen(false)} />}
+
+      {/* Main column */}
+      <div className="lg:ms-60">
+        <header className="sticky top-0 z-20 flex h-14 items-center gap-3 border-b border-[#1e2235] bg-[#0f1120]/90 px-5 backdrop-blur">
+          <button
+            className="rounded-lg border border-[#262b40] p-1.5 text-gray-300 hover:bg-[#161a2e] lg:hidden"
+            onClick={() => setOpen(true)}
+            aria-label="menu"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18" /></svg>
+          </button>
+          <h2 className="text-sm font-semibold text-white">{current?.label ?? brand}</h2>
+          <a href="/dashboard" className="ms-auto text-xs text-gray-500 transition-colors hover:text-gray-300">{back}</a>
+        </header>
+        <main className="mx-auto max-w-7xl px-5 py-7">{children}</main>
+      </div>
+    </div>
+  );
+}