diff --git a/src/components/layouts/authenticatedLayout.tsx b/src/components/layouts/authenticatedLayout.tsx index 5fac4a0f..7b69f7fb 100644 --- a/src/components/layouts/authenticatedLayout.tsx +++ b/src/components/layouts/authenticatedLayout.tsx @@ -6,23 +6,19 @@ // before zustand is hydrated. import { ReactNode } from "react"; -import dynamic from "next/dynamic"; import Footer from "./footer"; import Header from "./header"; import Modal from "../shared/modal"; import { useSidebarStore } from "~/store/sidebarStore"; import useStore from "~/store/useStore"; - -// Dynamically import Sidebar to avoid SSR mismatch. -const Sidebar = dynamic(() => import("./sidebar"), { ssr: false }); +import Sidebar from "./sidebar"; export default function MainLayout({ children }: { children: ReactNode }) { - const hydrated = useStore(useSidebarStore, (state) => state.hydrated); - const open = useStore(useSidebarStore, (state) => state.open); + const store = useStore(useSidebarStore, (state) => state); // While rehydrating from localStorage, render nothing // so the server DOM matches the client DOM. - if (!hydrated) return null; + // if (!store?.hydrated) return null; return (
@@ -30,7 +26,9 @@ export default function MainLayout({ children }: { children: ReactNode }) {
diff --git a/src/components/layouts/header.tsx b/src/components/layouts/header.tsx index eedab9aa..08780e6f 100644 --- a/src/components/layouts/header.tsx +++ b/src/components/layouts/header.tsx @@ -6,6 +6,7 @@ import { forwardRef, useEffect, useState } from "react"; import { api } from "~/utils/api"; import { useSession } from "next-auth/react"; import { useSidebarStore } from "~/store/sidebarStore"; +import useStore from "~/store/useStore"; const Themes = [ "light", @@ -21,99 +22,97 @@ const Themes = [ "cyberpunk", ]; -const Header = forwardRef>( - (props, ref) => { - const { data: session } = useSession(); - const { theme, setTheme } = useTheme(); - const { toggle, open } = useSidebarStore(); - const [mounted, setMounted] = useState(false); - const { data: globalOptions } = api.settings.getAllOptions.useQuery(); +const Header = (props) => { + const { data: session } = useSession(); + const { theme, setTheme } = useTheme(); - useEffect(() => { - setMounted(true); - }, []); + const store = useStore(useSidebarStore, (state) => state); - return ( -
-
-
- - ztnet logo - - {globalOptions?.siteName || "ZTNET"} - - -
-
- -
- +
+ {/* */} + + + + {/* {session.data?.user?.name} */} + + + {/* {session.data?.user?.role} */} + + + {/* */}
-
- ); - }, -); +
+
+ ); +}; export default Header; diff --git a/src/components/layouts/sidebar.tsx b/src/components/layouts/sidebar.tsx index 09693877..5da092bb 100644 --- a/src/components/layouts/sidebar.tsx +++ b/src/components/layouts/sidebar.tsx @@ -30,8 +30,8 @@ const useIsBelowMd = () => { }; const Sidebar = (): JSX.Element => { - const open = useStore(useSidebarStore, (state) => state.open); - const setOpenState = useStore(useSidebarStore, (state) => state.setOpenState); + const store = useStore(useSidebarStore, (state) => state); + // const setOpenState = useStore(useSidebarStore, (state) => state.setOpenState); const { setBulkNewMessages } = useSocketStore(); const { hasNewMessages } = useSocketStore(); @@ -59,11 +59,11 @@ const Sidebar = (): JSX.Element => { useEffect(() => { const handleClickOutside = (event: MouseEvent) => { - if (isBelowMd && open) { + if (isBelowMd && store?.open) { if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) { // called after the click event on hamburger menu to close sidebar setTimeout(() => { - setOpenState(false); + store?.setOpenState?.(false); }, 100); } } @@ -73,13 +73,13 @@ const Sidebar = (): JSX.Element => { return () => { document.removeEventListener("mousedown", handleClickOutside); }; - }, [isBelowMd, open, setOpenState]); + }, [isBelowMd, store?.open, store?.setOpenState]); return (