From 9510e2da8c09ac0c450ccd67ffa5e86351ad480e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 15:28:03 +0100
Subject: [PATCH] feat(sidebar): fix backdrop fade transition, add shimmer to
 SSR placeholder

Use opacity instead of bg-color swap for proper transition-opacity
animation on mobile backdrop. Add shimmer gradient to the sidebar
loading placeholder in DashboardShell.
---
 components/dashboard/DashboardShell.tsx | 6 ++++--
 components/dashboard/Sidebar.tsx        | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 23bd12a..122a73f 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -11,9 +11,11 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   // so page content never occupies the sidebar zone
   loading: () => (
     <div
-      className="hidden md:block shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl"
+      className="hidden md:block shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative"
       style={{ width: 64 }}
-    />
+    >
+      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-neutral-800/10 to-transparent animate-shimmer" />
+    </div>
   ),
 })
 
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index ec938ff..4fcbe2e 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -548,8 +548,8 @@ export default function Sidebar({
       {(mobileOpen || mobileClosing) && (
         <>
           <div
-            className={`fixed inset-0 z-40 md:hidden transition-opacity duration-200 ${
-              mobileClosing ? 'bg-black/0' : 'bg-black/30'
+            className={`fixed inset-0 z-40 bg-black/30 md:hidden transition-opacity duration-200 ${
+              mobileClosing ? 'opacity-0' : 'opacity-100'
             }`}
             onClick={handleMobileClose}
           />