Refine root sidebar and header controls

components/dashboard/dashboard-layout.tsx

@@ -19,7 +19,10 @@ type DashboardLayoutProps = {
   icon?: LucideIcon;
   items: RootNavItem[];
   sidebarIconSrc?: string;
+  sidebarBrandHref?: string;
+  sidebarBrandHoverLabel?: string;
   sidebarTop?: ReactNode;
+  sidebarFooterItems?: RootNavItem[];
   sidebarFooter?: ReactNode;
   headerActions?: ReactNode;
   children: ReactNode;
@@ -31,7 +34,10 @@ export function DashboardLayout({
   icon: Icon,
   items,
   sidebarIconSrc,
+  sidebarBrandHref,
+  sidebarBrandHoverLabel,
   sidebarTop,
+  sidebarFooterItems,
   sidebarFooter,
   headerActions,
   children,
@@ -43,7 +49,10 @@ export function DashboardLayout({
           <DashboardSidebar
             items={items}
             iconSrc={sidebarIconSrc}
+            brandHref={sidebarBrandHref}
+            brandHoverLabel={sidebarBrandHoverLabel}
             top={sidebarTop}
+            footerItems={sidebarFooterItems}
             footer={sidebarFooter}
           />
         </aside>
@@ -64,7 +73,10 @@ export function DashboardLayout({
                 <DashboardSidebar
                   items={items}
                   iconSrc={sidebarIconSrc}
+                  brandHref={sidebarBrandHref}
+                  brandHoverLabel={sidebarBrandHoverLabel}
                   top={sidebarTop}
+                  footerItems={sidebarFooterItems}
                   footer={sidebarFooter}
                 />
               </SheetContent>

components/dashboard/sidebar.tsx

@@ -17,11 +17,22 @@ type DashboardSidebarItem = {
 type DashboardSidebarProps = {
   items: DashboardSidebarItem[];
   iconSrc?: string;
+  brandHref?: string;
+  brandHoverLabel?: string;
   top?: ReactNode;
+  footerItems?: DashboardSidebarItem[];
   footer?: ReactNode;
 };
 
-export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSidebarProps) {
+export function DashboardSidebar({
+  items,
+  iconSrc,
+  brandHref = "/",
+  brandHoverLabel,
+  top,
+  footerItems = [],
+  footer,
+}: DashboardSidebarProps) {
   function renderItem(item: DashboardSidebarItem, nested = false) {
     const Icon = item.icon;
     const hasChildren = Boolean(item.children?.length);
@@ -50,8 +61,11 @@ export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSideb
 
   return (
     <div className="flex h-full flex-col bg-sidebar/40">
-      <div className="flex items-center gap-3 px-4 py-5">
+      <Link
-        <div className="overflow-hidden rounded-surface border border-border/70 bg-background shadow-sm">
+        href={brandHref}
+        className="group mx-4 mt-4 flex items-center gap-3 rounded-surface px-2 py-2 transition-colors hover:bg-muted/60"
+      >
+        <div className="overflow-hidden rounded-surface border border-border/70 bg-background shadow-sm transition-transform duration-200 group-hover:scale-105">
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={iconSrc || "/favicon.ico"}
@@ -59,24 +73,35 @@ export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSideb
             className="h-9 w-9 object-cover"
           />
         </div>
-        <div className="min-w-0">
+        <div className="relative min-h-[2.5rem] min-w-0 flex-1 overflow-hidden">
+          <div className="absolute inset-0 origin-left transition-all duration-200 group-hover:-translate-y-1 group-hover:opacity-0">
             <p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>
             <p className="truncate text-xs text-muted-foreground">Website owner workspace</p>
           </div>
+          <div className="absolute inset-0 flex items-center">
+            <p className="truncate text-sm font-semibold text-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+              {brandHoverLabel ?? "Back to Home"}
+            </p>
           </div>
+        </div>
+      </Link>
 
-      {top ? <div className="px-4">{top}</div> : null}
+      {top ? <div className="px-4 pt-2">{top}</div> : null}
 
-      <Separator className="my-4" />
+      <Separator className="mb-4 mt-3" />
 
       <div className="flex-1 space-y-6 overflow-y-auto px-4 pb-4">
         <nav className="space-y-1">{items.map((item) => renderItem(item))}</nav>
       </div>
 
-      {footer ? (
+      {footer || footerItems.length ? (
         <>
           <Separator />
-          <div className="space-y-2 p-4">{footer}</div>
+          <div className="space-y-2 p-4">
+            {footerItems.length ? <nav className="space-y-1">{footerItems.map((item) => renderItem(item))}</nav> : null}
+            {footerItems.length && footer ? <Separator /> : null}
+            {footer}
+          </div>
         </>
       ) : null}
     </div>

components/layout/locale-toggle.tsx

@@ -19,7 +19,11 @@ type LocaleToggleProps = {
   showLabel?: boolean;
 };
 
-export function LocaleToggle({ locale, className, showLabel = false }: LocaleToggleProps) {
+export function LocaleToggle({
+  locale,
+  className,
+  showLabel = false,
+}: LocaleToggleProps) {
   const pathname = usePathname();
   const locales: AppLocale[] = ["de", "en", "ar"];
   const currentPath = stripLocalePrefix(pathname);
@@ -41,40 +45,44 @@ export function LocaleToggle({ locale, className, showLabel = false }: LocaleTog
           size={showLabel ? "sm" : "icon"}
           aria-label={`Locale: ${currentLocale.toUpperCase()}`}
           className={cn(
-            "group cursor-pointer rounded-pill border border-transparent text-muted-foreground hover:border-border/70 hover:bg-background/80 hover:text-foreground",
+            "group inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-transparent text-muted-foreground hover:border-border/70 hover:bg-background/80 hover:text-foreground",
-            showLabel ? "gap-2 px-3" : "h-9 w-9 p-0",
+            showLabel ? "h-9 w-9 p-0" : "h-9 w-9 p-0",
             className,
           )}
         >
           <Image
             src={localeFlags[currentLocale].src}
             alt={localeFlags[currentLocale].alt}
-            width={20}
+            width={24}
-            height={20}
+            height={24}
-            className="h-5 w-5 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
+            className="h-6 w-6 shrink-0 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
           />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className={cn("w-auto min-w-0", contentFontClassName)}>
+      <DropdownMenuContent
+        align="center"
+        sideOffset={8}
+        className={cn("w-12 min-w-12 p-1", contentFontClassName)}
+      >
         {availableLocales.map((targetLocale) => (
           <DropdownMenuItem
             key={targetLocale}
             asChild
             className={cn(
-              "cursor-pointer",
+              "cursor-pointer justify-center p-0",
               targetLocale === "ar" ? "font-arabic" : "font-latin",
             )}
           >
             <a
               href={getLocalizedPath(targetLocale, currentPath)}
-              className="group flex items-center justify-center"
+              className="group flex h-10 w-10 items-center justify-center rounded-full"
             >
               <Image
                 src={localeFlags[targetLocale].src}
                 alt={localeFlags[targetLocale].alt}
-                width={20}
+                width={24}
-                height={20}
+                height={24}
-                className="h-5 w-5 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
+                className="h-6 w-6 shrink-0 rounded-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
               />
             </a>
           </DropdownMenuItem>

components/layout/site-header.tsx

@@ -95,6 +95,12 @@ export function SiteHeader({
   const locale = useLocale();
   const t = useTranslations("navigation");
   const isArabic = locale === "ar";
+  const desktopControlRailClassName =
+    "inline-flex items-center gap-1 rounded-[var(--radius-pill)] border border-black/6 bg-white/24 p-1 shadow-[0_14px_34px_-24px_rgba(15,23,42,0.18)] backdrop-blur-[18px] dark:border-white/10 dark:bg-white/4 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)]";
+  const desktopControlButtonClassName =
+    "h-9 w-9 rounded-full border border-transparent p-0 text-[hsl(var(--hero-ink)/0.76)] hover:border-black/5 hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:border-white/10 dark:hover:bg-white/10";
+  const mobileControlButtonClassName =
+    "h-10 w-10 rounded-full border border-black/6 bg-white/32 p-0 text-[hsl(var(--hero-ink)/0.8)] hover:bg-white/42 hover:text-[hsl(var(--hero-ink))] dark:border-white/10 dark:bg-white/6 dark:text-foreground dark:hover:bg-white/10";
 
   return (
     <header className="fixed inset-x-0 top-3 z-40 bg-transparent">
@@ -134,25 +140,24 @@ export function SiteHeader({
               initial={{ opacity: 0, y: -8 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.28, ease: "easeOut", delay: 0.03 }}
-              className="inline-flex items-center gap-1 rounded-[var(--radius-pill)] border border-black/6 bg-white/24 p-1 shadow-[0_14px_34px_-24px_rgba(15,23,42,0.18)] backdrop-blur-[18px] dark:border-white/10 dark:bg-white/4 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)]"
+              className={desktopControlRailClassName}
             >
               <LocaleToggle
                 locale={locale}
-                showLabel
+                className={desktopControlButtonClassName}
-                className="h-9 rounded-[var(--radius-pill)] px-3 text-[hsl(var(--hero-ink)/0.76)] hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:bg-white/10"
+              />
+              <ThemeToggle
+                ariaLabel={t("themeToggle")}
+                variant="ghost"
+                className={desktopControlButtonClassName}
               />
               {isAdmin ? (
-                <Button asChild variant="ghost" size="icon" className="h-9 w-9 rounded-[var(--radius-pill)] border border-transparent text-[hsl(var(--hero-ink)/0.76)] hover:border-black/5 hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:border-white/10 dark:hover:bg-white/10">
+                <Button asChild variant="ghost" size="icon" className={desktopControlButtonClassName}>
                   <Link href="/root" aria-label={t("root")}>
                     <LayoutDashboard className="h-4 w-4" />
                   </Link>
                 </Button>
               ) : null}
-              <ThemeToggle
-                ariaLabel={t("themeToggle")}
-                variant="ghost"
-                className="h-9 w-9 rounded-[var(--radius-pill)] border border-transparent text-[hsl(var(--hero-ink)/0.76)] hover:border-black/5 hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:border-white/10 dark:hover:bg-white/10"
-              />
             </motion.div>
           </div>
 
@@ -255,22 +260,21 @@ export function SiteHeader({
                   <div className="flex items-center justify-between gap-2">
                     <LocaleToggle
                       locale={locale}
-                      showLabel
+                      className={mobileControlButtonClassName}
-                      className="h-10 rounded-nested px-3 text-[hsl(var(--hero-ink)/0.8)] hover:bg-white/36 hover:text-[hsl(var(--hero-ink))] dark:text-foreground dark:hover:bg-white/10"
                     />
                     <div className="flex items-center gap-2">
+                      <ThemeToggle
+                        ariaLabel={t("themeToggle")}
+                        variant="ghost"
+                        className={mobileControlButtonClassName}
+                      />
                       {isAdmin ? (
-                        <Button asChild variant="ghost" size="icon" className="h-10 w-10 rounded-nested border border-black/6 bg-white/32 text-[hsl(var(--hero-ink)/0.8)] hover:bg-white/42 hover:text-[hsl(var(--hero-ink))] dark:border-white/10 dark:bg-white/6 dark:text-foreground dark:hover:bg-white/10">
+                        <Button asChild variant="ghost" size="icon" className={mobileControlButtonClassName}>
                           <Link href="/root" aria-label={t("root")} onClick={() => setIsOpen(false)}>
                             <LayoutDashboard className="h-4 w-4" />
                           </Link>
                         </Button>
                       ) : null}
-                      <ThemeToggle
-                        ariaLabel={t("themeToggle")}
-                        variant="ghost"
-                        className="h-10 w-10 rounded-nested border border-black/6 bg-white/32 text-[hsl(var(--hero-ink)/0.8)] hover:bg-white/42 hover:text-[hsl(var(--hero-ink))] dark:border-white/10 dark:bg-white/6 dark:text-foreground dark:hover:bg-white/10"
-                      />
                     </div>
                   </div>
                 </motion.div>

components/root/root-dashboard-shell.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
 import {
-  ArrowLeft,
   FolderKanban,
   Globe2,
   ImageIcon,
@@ -20,7 +19,6 @@ import { FormSaveButton } from "@/components/root/form-save-button";
 import { SidebarMaintenanceControl } from "@/components/root/sidebar-maintenance-control";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import { getMaintenanceMode, getSiteSettingsMediaBindings } from "@/lib/app-config";
 import { getLocalizedPath } from "@/lib/locale";
 import { getRootNavigation } from "@/lib/root-navigation";
@@ -82,9 +80,17 @@ export async function RootDashboardShell({
     getSiteSettingsMediaBindings(),
     getMaintenanceMode(),
   ]);
-  const normalizedSidebarItems = getRootNavigation(copy, active, smtpChild, portfolioChild).filter(
+  const sidebarItems = getRootNavigation(copy, active, smtpChild, portfolioChild);
-    (item) => item.href !== "/root/maintenance" && item.href !== "/root/ui-kit",
+  const normalizedSidebarItems = sidebarItems.filter(
+    (item) =>
+      item.href !== "/root/maintenance" &&
+      item.href !== "/root/ui-kit" &&
+      item.href !== "/root/smtp" &&
+      item.href !== "/root/marquee",
   );
+  const footerSidebarItems = ["/root/marquee", "/root/smtp"]
+    .map((href) => sidebarItems.find((item) => item.href === href))
+    .filter((item): item is NonNullable<typeof item> => Boolean(item));
   const headerIcon =
     active === "overview"
       ? LayoutDashboard
@@ -124,17 +130,10 @@ export async function RootDashboardShell({
       icon={headerIcon}
       items={normalizedSidebarItems}
       sidebarIconSrc={mediaBindings.favicon?.url}
-      sidebarTop={
+      sidebarBrandHref={getLocalizedPath("de")}
-        <div className="space-y-2">
+      sidebarBrandHoverLabel={copy.backToSite}
-          <Button asChild variant="outline" className="w-full justify-between">
+      sidebarTop={sidebarTopContent}
-            <Link href={getLocalizedPath("de")} target="_blank" rel="noreferrer">
+      sidebarFooterItems={footerSidebarItems}
-              {copy.backToSite}
-              <ArrowLeft className="h-4 w-4" />
-            </Link>
-          </Button>
-          {sidebarTopContent}
-        </div>
-      }
       sidebarFooter={
         <>
           <SidebarMaintenanceControl
@@ -160,7 +159,6 @@ export async function RootDashboardShell({
               <LogOut className="h-4 w-4" />
             </Button>
           </form>
-          <Separator />
         </>
       }
       headerActions={