From 6ac888c5ce026b7125adc6e47e9bb53d1e205531 Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Sun, 14 Dec 2025 00:03:48 +0100
Subject: [PATCH] feat: implement auto-collapse functionality for sidebar on
 small screens

- Added useEffect hook to automatically collapse the sidebar when the screen width is below 1024px.
- Included event listener for media query changes to handle sidebar state dynamically.
---
 apps/app/src/components/layout/sidebar.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/apps/app/src/components/layout/sidebar.tsx b/apps/app/src/components/layout/sidebar.tsx
index dce4a435..1f110fb7 100644
--- a/apps/app/src/components/layout/sidebar.tsx
+++ b/apps/app/src/components/layout/sidebar.tsx
@@ -239,6 +239,25 @@ export function Sidebar() {
   // Ref for project search input
   const projectSearchInputRef = useRef<HTMLInputElement>(null);
 
+  // Auto-collapse sidebar on small screens
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 1024px)'); // lg breakpoint
+
+    const handleResize = () => {
+      if (mediaQuery.matches && sidebarOpen) {
+        // Auto-collapse on small screens
+        toggleSidebar();
+      }
+    };
+
+    // Check on mount
+    handleResize();
+
+    // Listen for changes
+    mediaQuery.addEventListener('change', handleResize);
+    return () => mediaQuery.removeEventListener('change', handleResize);
+  }, [sidebarOpen, toggleSidebar]);
+
   // Filtered projects based on search query
   const filteredProjects = useMemo(() => {
     if (!projectSearchQuery.trim()) {