Simo
f4e0924e71
The admin pages used bare inline-styled tables on the default page
background. Rebuilt the admin shell + added a scoped .admin CSS layer so
the whole panel matches the original AtomCMS Filament look:
- Dark #2d2d44 sidebar (the AtomCMS admin navbar colour) with the nav
grouped into Overview / Content / Users & access / Economy / Radio /
System (mirrors the Filament resource groups), an avatar + rank badge
header, and amber active-link highlighting via a client AdminNavLink
(usePathname).
- A topbar ("Housekeeping" + signed-in user) over a light content area.
- Carded tables (surface bg, rounded, shadow, tinted header, row hover)
and a page-title treatment, applied globally so every admin page is
styled without per-page edits.
Verified in a real authenticated admin session (production server,
amx_test): sidebar renders #2d2d44 sticky, active link amber on dark
text, /admin/users table carded with 7 real rows; dev server serves the
admin rules after a cache refresh. tsc 0, vitest 49/49, next build 0.
22 lines
688 B
TypeScript
22 lines
688 B
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
/**
|
|
* Sidebar link that highlights when its route is active. "/admin" matches
|
|
* exactly; every other entry also matches its sub-routes (e.g. /admin/radio is
|
|
* active on /admin/radio/history) so the current section stays lit.
|
|
*/
|
|
export function AdminNavLink({ href, label }: { href: string; label: string }) {
|
|
const pathname = usePathname() ?? "";
|
|
const active =
|
|
href === "/admin" ? pathname === "/admin" : pathname === href || pathname.startsWith(`${href}/`);
|
|
|
|
return (
|
|
<Link href={href} className={`admin-nav-link${active ? " active" : ""}`}>
|
|
{label}
|
|
</Link>
|
|
);
|
|
}
|