feat: integrate Zustand for global state management and apply it to the sidebar

components/ui/sidebar/SidebarWrap.tsx

@@ -10,7 +10,7 @@ import React, { useCallback } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
 import { logOut } from "@/actions";
-import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { useUIStore } from "@/store";
 
 import {
   ProwlerExtended,
@@ -25,14 +25,16 @@ export const SidebarWrap = () => {
   const pathname = usePathname();
   const { data: session } = useSession();
 
-  const [isCollapsed, setIsCollapsed] = useLocalStorage("isCollapsed", false);
+  const isCollapsed = useUIStore((state) => state.isSideMenuOpen);
+  const openSideMenu = useUIStore((state) => state.openSideMenu);
+  const closeSideMenu = useUIStore((state) => state.closeSideMenu);
 
   const isMobile = useMediaQuery("(max-width: 768px)");
-
-  const isCompact = Boolean(isCollapsed) || isMobile;
+  const isCompact = isCollapsed || isMobile;
 
   const onToggle = useCallback(() => {
-    setIsCollapsed(!isCollapsed);
+    if (!isCollapsed) openSideMenu();
+    if (isCollapsed) closeSideMenu();
   }, [isCollapsed]);
 
   const currentPath = pathname === "/" ? "overview" : pathname.split("/")?.[1];

package-lock.json

@@ -43,7 +43,8 @@
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
         "uuid": "^10.0.0",
-        "zod": "^3.23.8"
+        "zod": "^3.23.8",
+        "zustand": "^4.5.5"
       },
       "devDependencies": {
         "@iconify/react": "^5.0.1",
@@ -12122,6 +12123,14 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/usehooks-ts": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
@@ -12416,6 +12425,33 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.5.tgz",
+      "integrity": "sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -35,7 +35,8 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^10.0.0",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@iconify/react": "^5.0.1",