auto collapse sidebar on small screens

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}
                 />
             )}
 

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

src/providers/SubscriptionStatusProvider.tsx

@@ -55,7 +55,6 @@ export function SubscriptionStatusProvider({
             }
         }
 
-        console.log("No matching tier found");
         return null;
     };