Merge pull request #138 from sinamics/show_hide_sidebar

Allow user to hide sidebar on all devices
sinamics · Sep 10, 2023 · 9f4050d · 9f4050d
2 parents 1d88c2a + 98b8949
commit 9f4050d
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 39 deletions.
diff --git 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 (
 		<header className="header bg-base-200 px-4 py-1 shadow">
 			<div className="header-content flex flex-row items-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					strokeWidth="1.5"
-					stroke="currentColor"
-					className="h-8 w-8 sm:block md:hidden"
-					onClick={toggle}
-				>
-					<path
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-					/>
-				</svg>
 				<div className="hidden md:inline-flex">
 					<a href="#" className="inline-flex flex-row items-center gap-2">
 						<Image style={{ width: 25, height: 25 }} alt="ztnet logo" src={ZtnetLogo} />
@@ -48,6 +33,34 @@ const Header = () => {
 						</span>
 					</a>
 				</div>
+				<div className="md:pl-12 flex items-center pt-1">
+					<label className={`${open ? "swap-active" : ""} swap swap-rotate`}>
+						<div className="swap-off">
+							<svg
+								className="fill-current"
+								xmlns="http://www.w3.org/2000/svg"
+								width="32"
+								height="32"
+								viewBox="0 0 512 512"
+								onClick={toggle}
+							>
+								<path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+							</svg>
+						</div>
+						<div className="swap-on">
+							<svg
+								className="fill-current"
+								xmlns="http://www.w3.org/2000/svg"
+								width="32"
+								height="32"
+								viewBox="0 0 512 512"
+								onClick={toggle}
+							>
+								<polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
+							</svg>
+						</div>
+					</label>
+				</div>
 				<div className="ml-auto flex">
 					{/* <div className="sidebar-header flex items-center justify-center py-4"> */}
 

diff --git 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 (
 		<div className="outer-content">
 			<Header />
-			<div className="grid md:grid-cols-[255px,minmax(0,1fr)]">
+			<div className={`grid md:grid-cols-[${open ? "255px" : "0px"},minmax(0,1fr)]`}>
 				<Sidebar />
 				<div className="custom-overflow custom-scrollbar">
 					{children}

diff --git a/src/components/layouts/sidebar.tsx b/src/components/layouts/sidebar.tsx
@@ -1,50 +1,71 @@
 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<HTMLDivElement>();
 	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);
+				}
 			}
 		};
 
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => {
 			document.removeEventListener("mousedown", handleClickOutside);
 		};
-	}, [open, toggle, sidebarRef]);
+	}, [isBelowMd, open, setOpenState, sidebarRef]);
 	return (
 		<aside
 			ref={sidebarRef}
-			className={`fixed z-10 h-full w-64 -translate-x-full transform flex-row bg-base-200 transition-transform duration-150 ease-in md:relative md:shadow
-    ${open ? "z-10  translate-x-0" : "md:translate-x-0"}`}
+			className={`overflow-y-auto fixed z-10 h-full w-64 -translate-x-full transform flex-row bg-base-200 transition-transform duration-150 ease-in md:relative md:shadow
+    ${open ? "z-10  translate-x-0" : "-translate-x-full"}`}
 		>
 			<div className="sidebar-content px-4 py-3">
 				<ul className="flex w-full flex-col">

diff --git a/src/pages/network/[id].tsx b/src/pages/network/[id].tsx
@@ -147,7 +147,7 @@ const NetworkById = () => {
 				<NetworkPrivatePublic />
 			</div>
 			<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
-				<div className="flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
+				<div className="hidden lg:flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
 					<div>
 						<span className="text-muted font-medium">{t("networkStart")}</span>{" "}
 						<span

diff --git a/src/utils/store.ts b/src/utils/store.ts
@@ -3,11 +3,13 @@ import { create } from "zustand";
 interface StoreI {
 	open: boolean;
 	toggle: () => void;
+	setOpenState: (state: boolean) => void;
 }
 
 export const useSidebarStore = create<StoreI>((set) => ({
 	open: false,
 	toggle: () => set((state) => ({ open: !state.open })),
+	setOpenState: (state: boolean) => set(() => ({ open: state })),
 }));
 
 type IcallModal = {