From d717e082817720926a1f28ee372c675553639630 Mon Sep 17 00:00:00 2001
From: frog-da <84839431+frog-da@users.noreply.github.com>
Date: Tue, 13 Feb 2024 23:35:01 +0300
Subject: [PATCH] Add transition when opening and closing sidebar

---
 components/layout/Sidebar.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/components/layout/Sidebar.tsx b/components/layout/Sidebar.tsx
index e0864a8..46f9e38 100644
--- a/components/layout/Sidebar.tsx
+++ b/components/layout/Sidebar.tsx
@@ -104,25 +104,21 @@ function Sidebar({ children }: React.PropsWithChildren) {
       <div className="absolute flex flex-col lgw-smh:hidden">
         <div
           className={clsx(
-            isOpened
-              ? "visible fixed inset-0 z-[2] block bg-black/50"
-              : "invisible hidden",
+            "fixed inset-0 transition-colors",
+            isOpened ? "visible z-[2] block bg-black/50" : "z-[-1] bg-black/0",
           )}
           onClick={() => setOpened(false)}
         />
         <aside
           className={clsx(
-            "fixed top-0 z-10 h-[100dvh] flex-col items-center justify-center overflow-y-auto px-8 py-8",
-            isOpened ? "bg-primary-main" : "hidden",
+            "bg-pink fixed top-0 z-10 h-[100dvh] flex-col items-center justify-center overflow-y-auto px-8 py-8",
+            "transition-transform",
+            isOpened
+              ? "translate-x-0 transform bg-primary-main"
+              : "  -translate-x-full transform bg-primary-main",
           )}
         >
-          <div
-            className={clsx(
-              isOpened
-                ? "left-0 flex h-full flex-col items-center opacity-100"
-                : "relative left-[-500px] flex h-full opacity-0",
-            )}
-          >
+          <div className="left-0 flex h-full flex-col items-center opacity-100">
             <Link
               href={user ? "/dashboard" : "/schedule"}
               onClick={() => setOpened(false)}