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

feat: subtle gradient behind sidebar for glass depth + fix scrollbar clip

Browse Source 
- Shell bg changed to neutral-950 (darker, better contrast)
- Warm-to-cool gradient behind sidebar area (orange top, blue bottom)
- Gives the glassmorphic sidebar something to diffuse through
- overflow-clip + isolate on content panel for scrollbar corner clipping
This commit is contained in:
Usman Baig
2026-03-24 22:19:43 +01:00
parent b607a9a76e
commit 14e0c9b4dc
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
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-900 overflow-hidden relative" className="hidden md:block shrink-0 bg-neutral-950 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,12 @@ 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-900"> <div className="flex h-screen overflow-hidden bg-neutral-950 relative">
{/* Subtle gradient behind the sidebar to give glass something to diffuse */}
<div className="absolute inset-y-0 left-0 w-72 pointer-events-none" aria-hidden="true">
<div className="absolute inset-0 bg-gradient-to-b from-brand-orange/[0.06] via-transparent to-blue-500/[0.04]" />
<div className="absolute inset-0 bg-gradient-to-r from-brand-orange/[0.03] to-transparent" />
</div>
<Sidebar <Sidebar
siteId={siteId} siteId={siteId}
mobileOpen={mobileOpen} mobileOpen={mobileOpen}
@@ -39,7 +44,7 @@ export default function DashboardShell({
onMobileOpen={openMobile} onMobileOpen={openMobile}
/> />
{/* Content panel — rounded corners, inset from edges. The left border doubles as the sidebar's right edge. */} {/* Content panel — rounded corners, inset from edges. The left border doubles as the sidebar's right edge. */}
<div className="flex-1 flex flex-col min-w-0 overflow-hidden mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60"> <div className="flex-1 flex flex-col min-w-0 mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
<ContentHeader onMobileMenuOpen={openMobile} /> <ContentHeader onMobileMenuOpen={openMobile} />
<main className="flex-1 overflow-y-auto pt-4"> <main className="flex-1 overflow-y-auto pt-4">
{children} {children}