refactor: more use cases with useToggle

src/components/menu/SideMenu.tsx

@@ -53,8 +53,8 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
     const menuStateMemo = useMemo(() => menuState, [menuState]);
     const closeRef = useRef<HTMLDivElement>(null);
     const userIsAuthenticated = true; // useAuthStore((state) => state.isAuthenticated);
-    const { active: logoutModal, onToggle: onToggleLogoutModal } = useToggle();
-    const { active: shareModal, onToggle: onToggleShareModal } = useToggle();
+    const { state: logoutModal, toggle: toggleLogoutModal } = useToggle();
+    const { state: shareModal, toggle: toggleShareModal } = useToggle();
 
     const params = useParams();
     const { name } = params;
@@ -78,8 +78,8 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
     };
 
     const hrefOnClicks = [
-        { href: '?logout', handler: onToggleLogoutModal },
-        { href: '?share', handler: onToggleShareModal }
+        { href: '?logout', handler: toggleLogoutModal },
+        { href: '?share', handler: toggleShareModal }
     ];
 
     const renderMenu = () => {
@@ -202,13 +202,13 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
             {/* Logout Modal */}
             <LogoutPrompt
                 visible={logoutModal}
-                onClick={onToggleLogoutModal}
+                onClick={toggleLogoutModal}
             />
 
             {/* Share modal */}
             <Modal
                 visible={shareModal}
-                onClick={onToggleShareModal}
+                onClick={toggleShareModal}
             >
                 <h2 className="text-base font-medium">
                     <Share className="inline-block ml-2 mb-1.5 stroke-primary" size={24} />