ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: move glassmorphism to shell level, sidebar becomes transparent

Browse Source 
Shell now has the glass treatment so sidebar and surrounding area
are one seamless surface. No more visible line between sidebar
and content panel. Desktop sidebar is transparent over the shell.
Mobile sidebar keeps its own glass since it overlays independently.
This commit is contained in:
Usman Baig
2026-03-24 22:28:18 +01:00
parent 505454b7d6
commit f3d72c9841
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/dashboard/DashboardShell.tsx
View File

@@ -11,7 +11,7 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
// so page content never occupies the sidebar zone // so page content never occupies the sidebar zone
loading: () => ( loading: () => (
<div <div
className="hidden md:block shrink-0 bg-neutral-950 overflow-hidden relative" className="hidden md:block shrink-0 bg-transparent overflow-hidden relative"
style={{ width: 64 }} style={{ width: 64 }}
> >
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-neutral-800/10 to-transparent animate-shimmer" /> <div className="absolute inset-0 bg-gradient-to-r from-transparent via-neutral-800/10 to-transparent animate-shimmer" />
@@ -31,7 +31,7 @@ export default function DashboardShell({
const openMobile = useCallback(() => setMobileOpen(true), []) const openMobile = useCallback(() => setMobileOpen(true), [])
return ( return (
<div className="flex h-screen overflow-hidden bg-neutral-950"> <div className="flex h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
<Sidebar <Sidebar
siteId={siteId} siteId={siteId}
mobileOpen={mobileOpen} mobileOpen={mobileOpen}

2
components/dashboard/Sidebar.tsx
View File

@@ -558,7 +558,7 @@ export default function Sidebar({
<> <>
{/* Desktop — ssr:false means this only renders on client, no hydration flash */} {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
<aside <aside
className="hidden md:flex flex-col shrink-0 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 overflow-hidden relative z-10" className="hidden md:flex flex-col shrink-0 bg-transparent overflow-hidden relative z-10"
style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }} style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
onTransitionEnd={(e) => { onTransitionEnd={(e) => {
if (e.propertyName === 'width' && pickerOpenCallbackRef.current) { if (e.propertyName === 'width' && pickerOpenCallbackRef.current) {