From ac44bc1471b45a47c38fd81f960c986bea291525 Mon Sep 17 00:00:00 2001
From: Onur Arslan <runoxa@hotmail.com>
Date: Mon, 8 Jan 2024 22:50:23 +0100
Subject: [PATCH] Style adjustments in sidebar collapsible menu - close
 collapsable menu if screen size small

---
 pkgs/ui/src/components/sidebar/index.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx
index a671da6..b5e0c97 100644
--- a/pkgs/ui/src/components/sidebar/index.tsx
+++ b/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 = () => {
-    setCollapseMenuOpen(!collapseMenuOpen);
-  };
+  const isSmallerScreen = useMediaQuery("(max-width: 1025px)");
 
   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" }}