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">
-        <div className="overflow-hidden rounded-surface border border-border/70 bg-background shadow-sm">
+      <Link
+        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">
-          <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 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>
-      </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>