Style adjustments in sidebar collapsible menu

- close collapsable menu if screen size small

pkgs/ui/src/components/sidebar/index.tsx

@@ -6,6 +6,7 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  useMediaQuery
 } from "@mui/material";
 import Image from "next/image";
 import React, { ReactNode } from "react";
@@ -88,14 +89,26 @@ export function Sidebar(props: SidebarProps) {
   );
   const [collapseMenuOpen, setCollapseMenuOpen] = React.useState(true);
 
-  const handleCollapseClick = () => {
+  const isSmallerScreen = useMediaQuery("(max-width: 1025px)");
-    setCollapseMenuOpen(!collapseMenuOpen);
-  };
 
   const handleMenuItemClick = (path: string) => {
     setActiveMenuItem(path);
   };
 
+  const handleCollapseClick = () => {
+    if (isSmallerScreen) {
+      setCollapseMenuOpen(!collapseMenuOpen);
+    }
+  };
+
+  React.useEffect(() => {
+    if (isSmallerScreen) {
+      setCollapseMenuOpen(false);
+    } else {
+      setCollapseMenuOpen(true);
+    }
+  }, [isSmallerScreen]);
+
   return (
     <aside
       style={{ backgroundColor: "#00497c" }}