From 06144deb647c607b297fcb628d4fae77b3e42b7f Mon Sep 17 00:00:00 2001
From: Sreeya-kumari <shreyaisrimmi@gmail.com>
Date: Thu, 4 Jun 2026 17:13:12 +0530
Subject: [PATCH] feat(sidebar): add elastic drawer panel animation

---
 components/sidebar.css | 42 ++++++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/components/sidebar.css b/components/sidebar.css
index 42ae19d8..fd0fca62 100644
--- a/components/sidebar.css
+++ b/components/sidebar.css
@@ -28,7 +28,9 @@
   grid-column: 2;
   overflow-y: auto;
   padding: var(--ease-sidebar-main-padding, 2rem);
-  transition: all var(--ease-speed-medium) var(--ease-ease);
+  transition:
+  transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+  border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 /* ── Collapsible Variant ────────────────────────────────────── */
@@ -73,23 +75,35 @@
     grid-template-columns: 1fr;
   }
 
-  .ease-sidebar {
-    display: none;
-  }
-
   .ease-sidebar-main {
     grid-column: 1;
   }
 
-  .ease-sidebar-layout.ease-sidebar-open .ease-sidebar {
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    z-index: 100;
-    width: var(--ease-sidebar-width, 260px);
-  }
+  .ease-sidebar {
+  display: none;
+  transform: translateX(-100%);
+  transition:
+    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
+    box-shadow 0.3s ease;
+}
+
+.ease-sidebar-layout.ease-sidebar-open .ease-sidebar {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  z-index: 100;
+  width: var(--ease-sidebar-width, 260px);
+
+  transform: translateX(0);
+  box-shadow: 12px 0 36px rgba(0, 0, 0, 0.15);
+}
+
+.ease-sidebar-layout.ease-sidebar-open .ease-sidebar-main {
+  transform: translateX(120px) scale(0.95);
+  border-radius: 20px;
+}
 }
 
 /* ── Reduced Motion ─────────────────────────────────────────── */