Update root sidebar header and actions

components/dashboard/dashboard-layout.tsx

@@ -18,6 +18,7 @@ type DashboardLayoutProps = {
   description: string;
   icon?: LucideIcon;
   items: RootNavItem[];
+  sidebarTop?: ReactNode;
   sidebarFooter?: ReactNode;
   headerActions?: ReactNode;
   children: ReactNode;
@@ -28,6 +29,7 @@ export function DashboardLayout({
   description,
   icon: Icon,
   items,
+  sidebarTop,
   sidebarFooter,
   headerActions,
   children,
@@ -35,8 +37,8 @@ export function DashboardLayout({
   return (
     <div className="min-h-screen bg-muted/30">
       <div className="grid min-h-screen lg:grid-cols-[280px_minmax(0,1fr)]">
-        <aside className="hidden border-r border-border/70 bg-sidebar/60 lg:block">
+        <aside className="hidden border-r border-border/70 bg-sidebar/60 lg:sticky lg:top-0 lg:block lg:h-screen">
-          <DashboardSidebar items={items} footer={sidebarFooter} />
+          <DashboardSidebar items={items} top={sidebarTop} footer={sidebarFooter} />
         </aside>
 
         <div className="flex min-w-0 flex-1 flex-col">
@@ -52,7 +54,7 @@ export function DashboardLayout({
                   <SheetTitle>{title}</SheetTitle>
                   <SheetDescription>{description}</SheetDescription>
                 </SheetHeader>
-                <DashboardSidebar items={items} footer={sidebarFooter} />
+                <DashboardSidebar items={items} top={sidebarTop} footer={sidebarFooter} />
               </SheetContent>
             </Sheet>
 

components/dashboard/sidebar.tsx

@@ -1,9 +1,8 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import type { LucideIcon } from "lucide-react";
-import { ShieldCheck } from "lucide-react";
 
-import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
@@ -17,10 +16,11 @@ type DashboardSidebarItem = {
 
 type DashboardSidebarProps = {
   items: DashboardSidebarItem[];
+  top?: ReactNode;
   footer?: ReactNode;
 };
 
-export function DashboardSidebar({ items, footer }: DashboardSidebarProps) {
+export function DashboardSidebar({ items, top, footer }: DashboardSidebarProps) {
   function renderItem(item: DashboardSidebarItem, nested = false) {
     const Icon = item.icon;
 
@@ -47,8 +47,8 @@ export function DashboardSidebar({ items, footer }: DashboardSidebarProps) {
   return (
     <div className="flex h-full flex-col bg-sidebar/40">
       <div className="flex items-center gap-3 px-4 py-5">
-        <div className="rounded-xl bg-primary/10 p-2 text-primary">
+        <div className="overflow-hidden rounded-xl border border-border/70 bg-background shadow-sm">
-          <ShieldCheck className="h-5 w-5" />
+          <Image src="/favicon.ico" alt="Mohs Admin" width={36} height={36} className="h-9 w-9" />
         </div>
         <div className="min-w-0">
           <p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>
@@ -56,17 +56,7 @@ export function DashboardSidebar({ items, footer }: DashboardSidebarProps) {
         </div>
       </div>
 
-      <div className="px-4">
+      {top ? <div className="px-4">{top}</div> : null}
-        <div className="rounded-xl border border-border/70 bg-background/80 p-4">
-          <div className="flex items-center justify-between gap-3">
-            <div>
-              <p className="text-sm font-medium text-foreground">Private panel</p>
-              <p className="mt-1 text-xs text-muted-foreground">Single owner access</p>
-            </div>
-            <Badge variant="outline">Private</Badge>
-          </div>
-        </div>
-      </div>
 
       <Separator className="my-4" />
 

components/root/root-dashboard-shell.tsx

@@ -2,9 +2,9 @@ import type { ReactNode } from "react";
 import {
   ArrowLeft,
   FolderKanban,
+  Globe2,
   ImageIcon,
   LayoutDashboard,
-  LogOut,
   PlusSquare,
   ShieldAlert,
   SwatchBook,
@@ -27,13 +27,14 @@ type RootDashboardCopy = {
   uiKit: string;
   portfolio: string;
   media: string;
+  siteSettings: string;
   logout: string;
   backToSite: string;
 };
 
 type RootDashboardShellProps = {
   copy: RootDashboardCopy;
-  active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media";
+  active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings";
   portfolioChild?: "overview" | "projects" | "new-project" | "categories";
   logoutAction: () => Promise<void>;
   headerTitle: string;
@@ -64,6 +65,8 @@ export function RootDashboardShell({
         ? ShieldAlert
         : active === "ui-kit"
           ? SwatchBook
+          : active === "site-settings"
+            ? Globe2
           : active === "media"
             ? ImageIcon
             : portfolioChild === "categories"
@@ -74,18 +77,6 @@ export function RootDashboardShell({
   const sharedActions = (
     <>
       <ThemeToggle ariaLabel="Theme wechseln" />
-      <Button asChild variant="outline" size="sm">
-        <Link href={getLocalizedPath("de")}>
-          <ArrowLeft className="h-4 w-4" />
-          {copy.backToSite}
-        </Link>
-      </Button>
-      <form action={logoutAction}>
-        <Button type="submit" variant="ghost" size="sm" className="text-destructive hover:bg-destructive/10 hover:text-destructive">
-          <LogOut className="h-4 w-4" />
-          {copy.logout}
-        </Button>
-      </form>
     </>
   );
 
@@ -95,6 +86,14 @@ export function RootDashboardShell({
       description={headerDescription}
       icon={headerIcon}
       items={sidebarItems}
+      sidebarTop={
+        <Button asChild variant="outline" className="w-full justify-between">
+          <Link href={getLocalizedPath("de")} target="_blank" rel="noreferrer">
+            {copy.backToSite}
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+      }
       sidebarFooter={
         <>
           <Button
@@ -117,6 +116,11 @@ export function RootDashboardShell({
               <SwatchBook className="h-4 w-4" />
             </Link>
           </Button>
+          <form action={logoutAction}>
+            <Button type="submit" variant="ghost" className="w-full justify-between text-destructive hover:bg-destructive/10 hover:text-destructive">
+              {copy.logout}
+            </Button>
+          </form>
         </>
       }
       headerActions={