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.
This commit is contained in:
Usman Baig
2026-03-23 15:28:03 +01:00
parent 414e112d3d
commit 9510e2da8c
2 changed files with 6 additions and 4 deletions

View File

@@ -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>
),
})

View File

@@ -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}
/>