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

This commit is contained in:
Pablo Lara
2024-09-02 12:41:35 +02:00
parent d1cd8848eb
commit 2d07186eb1
3 changed files with 46 additions and 7 deletions
+7 -5
View File
@@ -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];