From f1b3c883549fdc69ce8f9f79cdd2c802bd2e18ad Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 19 May 2026 20:58:19 +0530
Subject: [PATCH] feat: add collapsed header content support in LayoutShell and
 Sidebar components

---
 .../components/layout/ui/shell/LayoutShell.tsx |  6 ++++++
 .../components/layout/ui/sidebar/Sidebar.tsx   | 18 ++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
index c7d0c5186..2f799929b 100644
--- a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@@ -5,6 +5,7 @@ import { AnimatePresence, motion } from "motion/react";
 import dynamic from "next/dynamic";
 import { useCallback, useMemo, useState } from "react";
 import { activeTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
+import { Logo } from "@/components/Logo";
 import { Spinner } from "@/components/ui/spinner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { InboxItem } from "@/hooks/use-inbox";
@@ -502,6 +503,11 @@ export function LayoutShell({
 								setTheme={setTheme}
 								renderUserProfile={false}
 								renderCollapseButton={!isMacDesktop}
+								collapsedHeaderContent={
+									isMacDesktop ? (
+										<Logo disableLink priority className="h-7 w-7 rounded-md" />
+									) : undefined
+								}
 								className={cn("flex shrink-0", isMacDesktop && "rounded-tl-xl")}
 								isLoadingChats={isLoadingChats}
 								sidebarWidth={sidebarWidth}
diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index 9412f01fd..e0cb3072a 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -4,7 +4,7 @@ import { CreditCard, Dot, SquarePen, Zap } from "lucide-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useMemo, useState } from "react";
+import { type ReactNode, useMemo, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
@@ -96,6 +96,7 @@ interface SidebarProps {
 	isResizing?: boolean;
 	renderUserProfile?: boolean;
 	renderCollapseButton?: boolean;
+	collapsedHeaderContent?: ReactNode;
 }
 
 export function Sidebar({
@@ -134,6 +135,7 @@ export function Sidebar({
 	isResizing = false,
 	renderUserProfile = true,
 	renderCollapseButton = true,
+	collapsedHeaderContent,
 }: SidebarProps) {
 	const t = useTranslations("sidebar");
 	const [openDropdownChatId, setOpenDropdownChatId] = useState<number | null>(null);
@@ -162,7 +164,7 @@ export function Sidebar({
 			)}
 			style={{ width: isCollapsed ? collapsedWidth : sidebarWidth }}
 		>
-			<div className="flex h-12 shrink-0 items-center gap-0 px-1 border-b">
+			<div className="relative flex h-12 shrink-0 items-center gap-0 px-1 border-b">
 				<div
 					className={cn(
 						"min-w-0 overflow-hidden",
@@ -178,6 +180,18 @@ export function Sidebar({
 						onManageMembers={onManageMembers}
 					/>
 				</div>
+				{collapsedHeaderContent ? (
+					<div
+						aria-hidden={!isCollapsed}
+						className={cn(
+							"pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center transition-opacity duration-150",
+							isCollapsed ? "opacity-100 delay-150" : "opacity-0"
+						)}
+						style={{ width: collapsedWidth }}
+					>
+						{collapsedHeaderContent}
+					</div>
+				) : null}
 				{renderCollapseButton ? (
 					<div className={cn("shrink-0", isCollapsed && "mx-auto")}>
 						<SidebarCollapseButton