diff --git a/src/components/layouts/header.tsx b/src/components/layouts/header.tsx index ce74e758..051f8b3c 100644 --- a/src/components/layouts/header.tsx +++ b/src/components/layouts/header.tsx @@ -12,7 +12,7 @@ const Header = () => { const session = useSession(); const [mounted, setMounted] = useState(false); const { theme, setTheme } = useTheme(); - const { toggle } = useSidebarStore(); + const { toggle, open } = useSidebarStore(); useEffect(() => { setMounted(true); @@ -25,21 +25,6 @@ const Header = () => { return (
- - -
ztnet logo @@ -48,6 +33,34 @@ const Header = () => {
+
+ +
{/*
*/} diff --git a/src/components/layouts/layout.tsx b/src/components/layouts/layout.tsx index 3a10cbfe..e1ba5d9c 100644 --- a/src/components/layouts/layout.tsx +++ b/src/components/layouts/layout.tsx @@ -8,6 +8,7 @@ import Link from "next/link"; import { useRouter } from "next/router"; import { User } from "@prisma/client"; import { api } from "~/utils/api"; +import { useSidebarStore } from "~/utils/store"; type TUser = { user: User; @@ -49,10 +50,11 @@ export const LayoutPublic = ({ children }: Props): JSX.Element => { }; export const LayoutAuthenticated = ({ children }: Props): JSX.Element => { + const { open } = useSidebarStore(); return (
-
+
{children} diff --git a/src/components/layouts/sidebar.tsx b/src/components/layouts/sidebar.tsx index b8376ee3..df16e7a7 100644 --- a/src/components/layouts/sidebar.tsx +++ b/src/components/layouts/sidebar.tsx @@ -1,37 +1,58 @@ import { signOut, useSession } from "next-auth/react"; import Link from "next/link"; import { useRouter } from "next/router"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { useTranslations } from "next-intl"; import { useSidebarStore } from "~/utils/store"; import { api } from "~/utils/api"; -// import type { ReactNode } from "react"; -// import Header from "./header"; -// interface Props { -// children: ReactNode; -// } +// Custom hook to check if the screen width is below the 'md' breakpoint +const useIsBelowMd = () => { + const [isBelowMd, setIsBelowMd] = useState(false); + + useEffect(() => { + const checkSize = () => { + setIsBelowMd(window.innerWidth < 768); + }; + + checkSize(); + window.addEventListener("resize", checkSize); + + return () => { + window.removeEventListener("resize", checkSize); + }; + }, []); + + return isBelowMd; +}; const Sidebar = (): JSX.Element => { - const { open, toggle } = useSidebarStore(); + const { open, toggle, setOpenState } = useSidebarStore(); const { data: session } = useSession(); const { data: me } = api.auth.me.useQuery(); const t = useTranslations("sidebar"); - + const isBelowMd = useIsBelowMd(); const sidebarRef = useRef(); const router = useRouter(); + // Automatically close the sidebar if the screen size is below 'md' + useEffect(() => { + if (isBelowMd && open) { + setOpenState(false); + } else if (!isBelowMd && !open) { + setOpenState(true); + } + }, [isBelowMd, toggle]); + useEffect(() => { - const handleClickOutside = (_event: MouseEvent) => { - if (open) { - if (!sidebarRef.current) return; - toggle(); - // if ( - // sidebarRef.current && - // !sidebarRef.current?.contains(event.target as Node) - // ) { - // toggle(); - // } + const handleClickOutside = (event: MouseEvent) => { + if (isBelowMd && 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); + }, 100); + } } }; @@ -39,12 +60,12 @@ const Sidebar = (): JSX.Element => { return () => { document.removeEventListener("mousedown", handleClickOutside); }; - }, [open, toggle, sidebarRef]); + }, [isBelowMd, open, setOpenState, sidebarRef]); return (