From 7efc947e268b29d1879c13a4b9de790cedfa7a5b Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Wed, 3 Dec 2025 18:33:46 -0500
Subject: [PATCH] auto collapse sidebar on small screens

---
 src/components/Layout.tsx                    |  2 ++
 src/components/LayoutSidebar.tsx             | 33 +++++++++++++++++---
 src/providers/SubscriptionStatusProvider.tsx |  1 -
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index f029117b..d30da4d8 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -30,6 +30,7 @@ export async function Layout({
 }: LayoutProps) {
     const allCookies = await cookies();
     const sidebarStateCookie = allCookies.get("pangolin-sidebar-state")?.value;
+    const hasCookiePreference = sidebarStateCookie !== undefined;
 
     const initialSidebarCollapsed =
         sidebarStateCookie === "collapsed" ||
@@ -44,6 +45,7 @@ export async function Layout({
                     orgs={orgs}
                     navItems={navItems}
                     defaultSidebarCollapsed={initialSidebarCollapsed}
+                    hasCookiePreference={hasCookiePreference}
                 />
             )}
 
diff --git a/src/components/LayoutSidebar.tsx b/src/components/LayoutSidebar.tsx
index 6951040e..fb65b9d6 100644
--- a/src/components/LayoutSidebar.tsx
+++ b/src/components/LayoutSidebar.tsx
@@ -43,17 +43,20 @@ interface LayoutSidebarProps {
     orgs?: ListUserOrgsResponse["orgs"];
     navItems: SidebarNavSection[];
     defaultSidebarCollapsed: boolean;
+    hasCookiePreference: boolean;
 }
 
 export function LayoutSidebar({
     orgId,
     orgs,
     navItems,
-    defaultSidebarCollapsed
+    defaultSidebarCollapsed,
+    hasCookiePreference
 }: LayoutSidebarProps) {
     const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(
         defaultSidebarCollapsed
     );
+    const [hasManualToggle, setHasManualToggle] = useState(hasCookiePreference);
     const pathname = usePathname();
     const isAdminPage = pathname?.startsWith("/admin");
     const { user } = useUserContext();
@@ -72,6 +75,27 @@ export function LayoutSidebar({
         setSidebarStateCookie(isSidebarCollapsed);
     }, [isSidebarCollapsed]);
 
+    // Auto-collapse sidebar at 1650px or less, but only if no cookie preference exists
+    useEffect(() => {
+        if (hasManualToggle) {
+            return; // Don't auto-collapse if user has manually toggled
+        }
+
+        const handleResize = () => {
+            // print inner width
+            if (typeof window !== "undefined") {
+                const shouldCollapse = window.innerWidth <= 1650;
+                setIsSidebarCollapsed(shouldCollapse);
+            }
+        };
+
+        // Set initial state based on window width
+        handleResize();
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [hasManualToggle]);
+
     function loadFooterLinks(): { text: string; href?: string }[] | undefined {
         if (!isUnlocked()) {
             return undefined;
@@ -230,9 +254,10 @@ export function LayoutSidebar({
                 <Tooltip>
                     <TooltipTrigger asChild>
                         <button
-                            onClick={() =>
-                                setIsSidebarCollapsed(!isSidebarCollapsed)
-                            }
+                            onClick={() => {
+                                setIsSidebarCollapsed(!isSidebarCollapsed);
+                                setHasManualToggle(true);
+                            }}
                             className="cursor-pointer absolute -right-2.5 top-1/2 transform -translate-y-1/2 w-2 h-8 rounded-full flex items-center justify-center transition-all duration-200 ease-in-out hover:scale-110 group z-1"
                             aria-label={
                                 isSidebarCollapsed
diff --git a/src/providers/SubscriptionStatusProvider.tsx b/src/providers/SubscriptionStatusProvider.tsx
index eaf33415..85802cfa 100644
--- a/src/providers/SubscriptionStatusProvider.tsx
+++ b/src/providers/SubscriptionStatusProvider.tsx
@@ -55,7 +55,6 @@ export function SubscriptionStatusProvider({
             }
         }
 
-        console.log("No matching tier found");
         return null;
     };