Use dynamic favicon in root sidebar

components/dashboard/dashboard-layout.tsx

@@ -18,6 +18,7 @@ type DashboardLayoutProps = {
   description: string;
   icon?: LucideIcon;
   items: RootNavItem[];
+  sidebarIconSrc?: string;
   sidebarTop?: ReactNode;
   sidebarFooter?: ReactNode;
   headerActions?: ReactNode;
@@ -29,6 +30,7 @@ export function DashboardLayout({
   description,
   icon: Icon,
   items,
+  sidebarIconSrc,
   sidebarTop,
   sidebarFooter,
   headerActions,
@@ -38,7 +40,12 @@ export function DashboardLayout({
     <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:sticky lg:top-0 lg:block lg:h-screen">
-          <DashboardSidebar items={items} top={sidebarTop} footer={sidebarFooter} />
+          <DashboardSidebar
+            items={items}
+            iconSrc={sidebarIconSrc}
+            top={sidebarTop}
+            footer={sidebarFooter}
+          />
         </aside>
 
         <div className="flex min-w-0 flex-1 flex-col">
@@ -54,7 +61,12 @@ export function DashboardLayout({
                   <SheetTitle>{title}</SheetTitle>
                   <SheetDescription>{description}</SheetDescription>
                 </SheetHeader>
-                <DashboardSidebar items={items} top={sidebarTop} footer={sidebarFooter} />
+                <DashboardSidebar
+                  items={items}
+                  iconSrc={sidebarIconSrc}
+                  top={sidebarTop}
+                  footer={sidebarFooter}
+                />
               </SheetContent>
             </Sheet>
 

components/dashboard/sidebar.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
-import Image from "next/image";
 import type { LucideIcon } from "lucide-react";
 
 import { Separator } from "@/components/ui/separator";
@@ -16,11 +15,12 @@ type DashboardSidebarItem = {
 
 type DashboardSidebarProps = {
   items: DashboardSidebarItem[];
+  iconSrc?: string;
   top?: ReactNode;
   footer?: ReactNode;
 };
 
-export function DashboardSidebar({ items, top, footer }: DashboardSidebarProps) {
+export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSidebarProps) {
   function renderItem(item: DashboardSidebarItem, nested = false) {
     const Icon = item.icon;
 
@@ -48,7 +48,12 @@ export function DashboardSidebar({ items, top, footer }: DashboardSidebarProps)
     <div className="flex h-full flex-col bg-sidebar/40">
       <div className="flex items-center gap-3 px-4 py-5">
         <div className="overflow-hidden rounded-xl border border-border/70 bg-background shadow-sm">
-          <Image src="/favicon.ico" alt="Mohs Admin" width={36} height={36} className="h-9 w-9" />
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={iconSrc || "/favicon.ico"}
+            alt="Mohs Admin"
+            className="h-9 w-9 object-cover"
+          />
         </div>
         <div className="min-w-0">
           <p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>

components/root/root-dashboard-shell.tsx

@@ -5,6 +5,7 @@ import {
   Globe2,
   ImageIcon,
   LayoutDashboard,
+  LogOut,
   PlusSquare,
   ShieldAlert,
   SwatchBook,
@@ -16,6 +17,7 @@ import { DashboardLayout } from "@/components/dashboard/dashboard-layout";
 import { MotionFade } from "@/components/motion-fade";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
+import { getSiteSettingsMediaBindings } from "@/lib/app-config";
 import { getLocalizedPath } from "@/lib/locale";
 import { getRootNavigation } from "@/lib/root-navigation";
 
@@ -44,7 +46,7 @@ type RootDashboardShellProps = {
   children: ReactNode;
 };
 
-export function RootDashboardShell({
+export async function RootDashboardShell({
   copy,
   active,
   portfolioChild,
@@ -55,6 +57,7 @@ export function RootDashboardShell({
   toolbar,
   children,
 }: RootDashboardShellProps) {
+  const mediaBindings = await getSiteSettingsMediaBindings();
   const sidebarItems = getRootNavigation(copy, active, portfolioChild).filter(
     (item) => item.href !== "/root/maintenance" && item.href !== "/root/ui-kit",
   );
@@ -86,6 +89,7 @@ export function RootDashboardShell({
       description={headerDescription}
       icon={headerIcon}
       items={sidebarItems}
+      sidebarIconSrc={mediaBindings.favicon?.url}
       sidebarTop={
         <Button asChild variant="outline" className="w-full justify-between">
           <Link href={getLocalizedPath("de")} target="_blank" rel="noreferrer">
@@ -119,6 +123,7 @@ export function RootDashboardShell({
           <form action={logoutAction}>
             <Button type="submit" variant="ghost" className="w-full justify-between text-destructive hover:bg-destructive/10 hover:text-destructive">
               {copy.logout}
+              <LogOut className="h-4 w-4" />
             </Button>
           </form>
         </>