fix: made sidebar collapse when screen is smaller (#4822)

Fixed sidebar collapsing when screen is smaller

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