feat(ui): Admin-Seitenleiste mit Wabenmarkierung statt Seitenbalken

Aktive Seite mit Honig-Wabe statt farbigem border-left, feines Wabenraster
in der Seitenleiste (liegt per isolate/-z-10 unter dem Menue).

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5.5 committed 2026-09-25 13:28:40 +02:00
1 parent 578ec767b2
commit e6455b05e6
1 file changed
+12 -5
+12 -5
View File
@@ -6,6 +6,7 @@ import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { AnimatePresence, motion } from "motion/react"; import { AnimatePresence, motion } from "motion/react";
import { Logomark } from "@/components/logomark"; import { Logomark } from "@/components/logomark";
import { HexMark, HoneycombPattern } from "@/components/honeycomb";
import { useI18n } from "@/i18n/i18n-provider"; import { useI18n } from "@/i18n/i18n-provider";
import type { Dictionary } from "@/i18n/dictionary-type"; import type { Dictionary } from "@/i18n/dictionary-type";
@@ -51,12 +52,17 @@ function NavLinks({
href={item.href} href={item.href}
onClick={onNavigate} onClick={onNavigate}
aria-current={active ? "page" : undefined} aria-current={active ? "page" : undefined}
className={`block px-5 py-2.5 text-sm border-l-2 transition-colors ${ className={`group flex items-center gap-3 px-5 py-2.5 text-sm transition-colors ${
active active ? "bg-cream/10 text-cream" : "text-cream/70 hover:text-cream hover:bg-cream/5"
? "border-honey bg-cream/10 text-cream"
: "border-transparent text-cream/70 hover:text-cream hover:bg-cream/5"
}`} }`}
> >
{/* Wabe statt farbigem Seitenbalken markiert die aktive Seite. */}
<HexMark
filled={active}
className={`h-2.5 w-2.5 flex-shrink-0 transition-[color,transform] duration-300 ${
active ? "text-honey-light" : "text-cream/25 group-hover:text-cream/60 group-hover:rotate-90"
}`}
/>
{item.label} {item.label}
</Link> </Link>
); );
@@ -95,7 +101,8 @@ export function AdminShell({ adminName, logoutAction, children }: AdminShellProp
return ( return (
<div className="min-h-screen bg-cream/40 lg:flex"> <div className="min-h-screen bg-cream/40 lg:flex">
<aside className="hidden lg:flex lg:flex-col lg:w-60 lg:shrink-0 lg:sticky lg:top-0 lg:h-screen bg-forest text-cream"> <aside className="relative isolate hidden overflow-hidden lg:flex lg:flex-col lg:w-60 lg:shrink-0 lg:sticky lg:top-0 lg:h-screen bg-forest text-cream">
<HoneycombPattern className="-z-10 text-honey-light/[0.06]" size={18} fade="bottom" />
<div className="flex items-center h-16 px-5 border-b border-cream/10"> <div className="flex items-center h-16 px-5 border-b border-cream/10">
<Wordmark /> <Wordmark />
</div> </div>