soroushdes/flatrender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
soroush.asadi
2026-06-03 07:56:54 +03:30
parent ebf0e11f22
commit 43780f94f6
2 changed files with 154 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[locale]/admin/layout.tsx
+60 -51
View File
@@ -1,6 +1,7 @@
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { AdminShell, type NavGroup } from "@/components/admin/AdminShell";
import { getCurrentUser } from "@/lib/auth/session";
export const dynamic = "force-dynamic";
@@ -15,58 +16,66 @@ export default async function AdminLayout({
redirect("/dashboard");
}
const t = await getTranslations("auto.appAdminLayout");
const links: { href: string; label: string }[] = [
{ href: "/admin/stats", label: t("stats") },
{ href: "/admin/categories", label: t("categories") },
{ href: "/admin/templates", label: t("templates") },
{ href: "/admin/projects", label: t("projects") },
{ href: "/admin/ranking", label: t("ranking") },
{ href: "/admin/tags", label: t("tags") },
{ href: "/admin/fonts", label: t("fonts") },
{ href: "/admin/music", label: t("music") },
{ href: "/admin/blogs", label: t("blogs") },
{ href: "/admin/slides", label: t("slides") },
{ href: "/admin/home-events", label: t("homeEvents") },
{ href: "/admin/routes", label: t("routes") },
{ href: "/admin/comments", label: t("comments") },
{ href: "/admin/files", label: t("media") },
{ href: "/admin/ai", label: t("aiContent") },
{ href: "/admin/messaging", label: t("messaging") },
{ href: "/admin/integrations", label: t("integrations") },
{ href: "/admin/marketing", label: t("marketing") },
{ href: "/admin/crm", label: t("crm") },
{ href: "/admin/users", label: t("users") },
{ href: "/admin/plans", label: t("plans") },
{ href: "/admin/discounts", label: t("discounts") },
{ href: "/admin/settings", label: t("siteSettings") },
{ href: "/admin/nodes", label: t("nodes") },
{ href: "/admin/node-fonts", label: t("nodeFonts") },
{ href: "/admin/renders", label: t("renderQueue") },
{ href: "/admin/exports", label: t("exports") },
const groups: NavGroup[] = [
{
title: "نمای کلی",
items: [{ href: "/admin/stats", label: t("stats") }],
},
{
title: "محتوا",
items: [
{ href: "/admin/categories", label: t("categories") },
{ href: "/admin/templates", label: t("templates") },
{ href: "/admin/projects", label: t("projects") },
{ href: "/admin/ranking", label: t("ranking") },
{ href: "/admin/tags", label: t("tags") },
{ href: "/admin/fonts", label: t("fonts") },
{ href: "/admin/music", label: t("music") },
{ href: "/admin/blogs", label: t("blogs") },
{ href: "/admin/slides", label: t("slides") },
{ href: "/admin/home-events", label: t("homeEvents") },
{ href: "/admin/routes", label: t("routes") },
{ href: "/admin/comments", label: t("comments") },
{ href: "/admin/files", label: t("media") },
{ href: "/admin/ai", label: t("aiContent") },
],
},
{
title: "رشد و ارتباطات",
items: [
{ href: "/admin/messaging", label: t("messaging") },
{ href: "/admin/integrations", label: t("integrations") },
{ href: "/admin/marketing", label: t("marketing") },
{ href: "/admin/crm", label: t("crm") },
],
},
{
title: "کاربران و مالی",
items: [
{ href: "/admin/users", label: t("users") },
{ href: "/admin/plans", label: t("plans") },
{ href: "/admin/discounts", label: t("discounts") },
],
},
{
title: "فارم رندر",
items: [
{ href: "/admin/nodes", label: t("nodes") },
{ href: "/admin/node-fonts", label: t("nodeFonts") },
{ href: "/admin/renders", label: t("renderQueue") },
{ href: "/admin/exports", label: t("exports") },
],
},
{
title: "سیستم",
items: [{ href: "/admin/settings", label: t("siteSettings") }],
},
];
return (
<div className="min-h-screen bg-[#0c0e1a] text-gray-200">
<nav className="border-b border-[#1e2235] bg-[#0f1120] px-6 py-3">
<div className="mx-auto flex max-w-7xl flex-wrap items-center gap-x-5 gap-y-2">
<span className="text-sm font-semibold text-white">{t("brand")}</span>
{links.map((l) => (
<a
key={l.href}
href={l.href}
className="text-sm text-gray-400 transition-colors hover:text-white"
>
{l.label}
</a>
))}
<a
href="/dashboard"
className="ms-auto text-xs text-gray-500 transition-colors hover:text-gray-300"
>
{t("backToDashboard")}
</a>
</div>
</nav>
<main className="mx-auto max-w-7xl px-6 py-8">{children}</main>
</div>
<AdminShell groups={groups} brand={t("brand")} back={t("backToDashboard")}>
{children}
</AdminShell>
);
}
src/components/admin/AdminShell.tsx
+94
View File
@@ -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>
);
}