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:
@@ -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>
|
||||
),
|
||||
})
|
||||
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user