grid layout when sidebar is closed

sinamics · Sep 11, 2023 · 5150eeb · 5150eeb
1 parent 9f4050d
commit 5150eeb
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/components/layouts/layout.tsx b/src/components/layouts/layout.tsx
@@ -66,14 +66,15 @@ export const LayoutAuthenticated = ({ children }: Props): JSX.Element => {
 };
 
 export const LayoutAdminAuthenticated = ({ children, props }: Props): JSX.Element => {
+	const { open } = useSidebarStore();
 	const isAdmin = props?.user?.role === "ADMIN";
 	if (!isAdmin) {
 		return <FourOhFour />;
 	}
 	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
@@ -61,11 +61,12 @@ const Sidebar = (): JSX.Element => {
 			document.removeEventListener("mousedown", handleClickOutside);
 		};
 	}, [isBelowMd, open, setOpenState, sidebarRef]);
+
 	return (
 		<aside
 			ref={sidebarRef}
 			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"}`}
+			${open ? "visible translate-x-0" : "-translate-x-64"}`}
 		>
 			<div className="sidebar-content px-4 py-3">
 				<ul className="flex w-full flex-col">