flex instead of grid

sinamics · Sep 11, 2023 · 77547db · 77547db
1 parent 5150eeb
commit 77547db
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/components/layouts/layout.tsx b/src/components/layouts/layout.tsx
@@ -54,9 +54,11 @@ export const LayoutAuthenticated = ({ children }: Props): JSX.Element => {
 	return (
 		<div className="outer-content">
 			<Header />
-			<div className={`grid md:grid-cols-[${open ? "255px" : "0px"},minmax(0,1fr)]`}>
-				<Sidebar />
-				<div className="custom-overflow custom-scrollbar">
+			<div className="flex">
+				<aside className={`transition-all duration-150 ease-in ${open ? "w-64" : "w-0 opacity-0"}`}>
+					<Sidebar />
+				</aside>
+				<div className={`flex-grow custom-overflow custom-scrollbar ${!open ? "flex-grow" : ""}`}>
 					{children}
 					<Footer />
 				</div>
@@ -74,9 +76,11 @@ export const LayoutAdminAuthenticated = ({ children, props }: Props): JSX.Elemen
 	return (
 		<div className="outer-content">
 			<Header />
-			<div className={`grid md:grid-cols-[${open ? "255px" : "0px"},minmax(0,1fr)]`}>
-				<Sidebar />
-				<div className="custom-overflow custom-scrollbar">
+			<div className="flex">
+				<aside className={`transition-all duration-150 ease-in ${open ? "w-64" : "w-0 opacity-0"}`}>
+					<Sidebar />
+				</aside>
+				<div className={`flex-grow custom-overflow custom-scrollbar ${!open ? "flex-grow" : ""}`}>
 					{children}
 					<Footer />
 				</div>

diff --git a/src/components/layouts/sidebar.tsx b/src/components/layouts/sidebar.tsx
@@ -61,12 +61,13 @@ const Sidebar = (): JSX.Element => {
 			document.removeEventListener("mousedown", handleClickOutside);
 		};
 	}, [isBelowMd, open, setOpenState, sidebarRef]);
-
+  // className={`overflow-y-auto fixed z-10 h-full transition-all duration-150 ease-in md:relative md:shadow
+  //   ${open ? "w-64 opacity-100" : "w-0 opacity-0"}`}
 	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 ? "visible translate-x-0" : "-translate-x-64"}`}
+			className={`overflow-y-auto fixed z-10 h-full bg-base-200 transition-transform duration-150 ease-in-out md:relative md:shadow
+			${open ? "w-64" : "w-0"}`}
 		>
 			<div className="sidebar-content px-4 py-3">
 				<ul className="flex w-full flex-col">