fix(dashboard): content panel as rounded card, sidebar border removed
- Content panel: bg-neutral-950, rounded-2xl, border, margin on top/right/bottom - Sidebar: removed border-r — content panel's left border acts as separator - Outer shell: bg-neutral-900 matches sidebar, creating "floating panel" effect
This commit is contained in:
@@ -11,7 +11,7 @@ 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 overflow-hidden relative"
|
||||
className="hidden md:block shrink-0 bg-neutral-900 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" />
|
||||
@@ -31,15 +31,15 @@ export default function DashboardShell({
|
||||
const openMobile = useCallback(() => setMobileOpen(true), [])
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-neutral-950">
|
||||
<div className="flex h-screen overflow-hidden bg-neutral-900">
|
||||
<Sidebar
|
||||
siteId={siteId}
|
||||
mobileOpen={mobileOpen}
|
||||
onMobileClose={closeMobile}
|
||||
onMobileOpen={openMobile}
|
||||
/>
|
||||
{/* Content panel — rounded on all corners with slight inset to separate from sidebar */}
|
||||
<div className="flex-1 flex flex-col min-w-0 overflow-hidden my-2 mr-2 rounded-2xl bg-neutral-900 border border-neutral-800/60">
|
||||
{/* 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">
|
||||
<ContentHeader onMobileMenuOpen={openMobile} />
|
||||
<main className="flex-1 overflow-y-auto pt-4">
|
||||
{children}
|
||||
|
||||
@@ -514,7 +514,7 @@ export default function Sidebar({
|
||||
<>
|
||||
{/* Desktop — ssr:false means this only renders on client, no hydration flash */}
|
||||
<aside
|
||||
className="hidden md:flex flex-col shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative z-10"
|
||||
className="hidden md:flex flex-col shrink-0 bg-neutral-900 overflow-hidden relative z-10"
|
||||
style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
|
||||
onTransitionEnd={(e) => {
|
||||
if (e.propertyName === 'width' && pickerOpenCallbackRef.current) {
|
||||
|
||||
Reference in New Issue
Block a user