From 6f2cc34bf5342ad1606b64f092a497b688119af8 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Mon, 25 Nov 2024 14:59:12 -0300
Subject: [PATCH] fix: made sidebar collapse when screen is smaller (#4822)

Fixed sidebar collapsing when screen is smaller
---
 src/frontend/src/components/ui/sidebar.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/frontend/src/components/ui/sidebar.tsx b/src/frontend/src/components/ui/sidebar.tsx
index 72c83dc0b..977fbb4e8 100644
--- a/src/frontend/src/components/ui/sidebar.tsx
+++ b/src/frontend/src/components/ui/sidebar.tsx
@@ -5,6 +5,7 @@ import { VariantProps, cva } from "class-variance-authority";
 import { PanelLeft } from "lucide-react";
 import * as React from "react";
 
+import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "../../utils/utils";
 import ShadTooltip from "../shadTooltipComponent";
 import { Button } from "./button";
@@ -164,6 +165,7 @@ const Sidebar = React.forwardRef<
     ref,
   ) => {
     const { state, setOpen, defaultOpen } = useSidebar();
+    const isMobile = useIsMobile();
 
     React.useEffect(() => {
       if (collapsible === "none") {
@@ -173,6 +175,16 @@ const Sidebar = React.forwardRef<
       }
     }, [collapsible]);
 
+    React.useEffect(() => {
+      if (collapsible !== "none") {
+        if (isMobile) {
+          setOpen(false);
+        } else {
+          setOpen(defaultOpen);
+        }
+      }
+    }, [isMobile]);
+
     if (collapsible === "none") {
       return (
         <div