close mobilemenu on resize about laptop breakpoint

Author: Blargian

src/components/MobileSideBarMenu/index.jsx

@@ -6,6 +6,9 @@ import styles from './styles.module.scss';
 const MobileSideBarMenu = ({sidebar, menu}) => {
     const [currentMenuState, setMenuState] = useState(false);
 
+    // Define the breakpoint where mobile menu should be hidden (laptop breakpoint)
+    const LAPTOP_BREAKPOINT = 1330;
+
     // Prevent body scroll when menu is open
     useEffect(() => {
         if (currentMenuState) {
@@ -29,6 +32,26 @@ const MobileSideBarMenu = ({sidebar, menu}) => {
         }
     }, [currentMenuState]);
 
+    // Close mobile menu when viewport exceeds mobile breakpoint
+    useEffect(() => {
+        const handleResize = () => {
+            if (window.innerWidth >= LAPTOP_BREAKPOINT && currentMenuState) {
+                setMenuState(false);
+            }
+        };
+
+        // Add event listener
+        window.addEventListener('resize', handleResize);
+
+        // Also check on mount in case the component mounts with a large viewport
+        handleResize();
+
+        // Cleanup
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [currentMenuState, LAPTOP_BREAKPOINT]);
+
     // Function to handle menu close
     const handleMenuClose = () => {
         setMenuState(false);

src/css/breakpoints.scss

@@ -1,4 +1,7 @@
 $mobile-breakpoint: 996px;
 $tablet-breakpoint: 1024px;
 $laptop-breakpoint: 1330px;
-$large-desktop-breakpoint: 1440px;
+$large-desktop-breakpoint: 1440px;
+
+// If you change these breakpoints, make sure to update
+// MobileSideBarMenu/index.js accordingly