refactor: main layout

src/components/menu/SideMenu.tsx

@@ -161,7 +161,10 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                 href={''}
                                 title={''}
                                 icon={<></>}>
-                                <NightModeSwitch checked={nightModeState} onClick={togglenightModeState} />
+                                <NightModeSwitch
+                                    checked={nightModeState}
+                                    onClick={togglenightModeState}
+                                />
                             </SideMenuItem>
                         </li>
                     </ul>

src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx

@@ -1,39 +1,44 @@
 'use client';
 
-import React, { useState } from 'react'
+import React, { useEffect } from 'react'
 import TopBar from '../topbar/TopBar'
 import SideMenu from '../menu/SideMenu'
 import BottomNavBar from '../navigation/BottomNavBar'
+import useToggle from '@/hooks/helpers/useToggle';
+import { usePathname } from 'next/navigation';
 
 type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>
 
 function ClientMenuRouteWrapper({ children }: Props) {
-  const [profileDrop, setProfileDrop] = useState(false);
-  const [nightMode, setNightMode] = useState(false);
-  const [menuState, setMenuState] = useState(false);
-  const [searchModal, setSearchModal] = useState(false);
+  const { state: profileDrop, toggle: _toggleProfileDrop } = useToggle(false);
+  const { state: nightMode, toggle: _toggleNightMode } = useToggle(false);
+  const { state: menuState, toggle: _toggleMenuState, set: setMenuState } = useToggle(false);
+  const { state: searchModal, toggle: _toggleSearchModal } = useToggle(false);
 
   const toggleProfileDrop = () => {
-    setProfileDrop((state) => !state);
+    _toggleProfileDrop();
   }
 
   const toggleNightMode = () => {
-    setNightMode((state) => !state);
+    _toggleNightMode();
   }
 
   const toggleMenuState = () => {
-    setMenuState((state) => !state);
+    _toggleMenuState();
   }
 
   const toggleSearchModal = () => {
-    setSearchModal((state) => !state);
+    _toggleSearchModal();
   }
 
-  // const location = useRouter();
+  const location = usePathname();
 
-  // useEffect(() => {
-  //     setMenuState(false)
-  // }, [location])
+  useEffect(() => {
+    if (menuState) {
+      setMenuState(false)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location])
 
   return (
     <div className="h-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12">