fix: proper dashboard layout — header + sidebar + content fill viewport
Use h-screen overflow-hidden on the root container for authenticated views. Sidebar and content fill the remaining height below the header. Remove footer from dashboard pages. Content scrolls inside its own container, sidebar stays fixed in place.
This commit is contained in:
@@ -112,9 +112,7 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
|
|||||||
return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" portal={false} />
|
return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" portal={false} />
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
const headerElement = (
|
||||||
<div className="flex flex-col min-h-screen">
|
|
||||||
{auth.user && <OfflineBanner isOnline={isOnline} />}
|
|
||||||
<Header
|
<Header
|
||||||
auth={auth}
|
auth={auth}
|
||||||
LinkComponent={Link}
|
LinkComponent={Link}
|
||||||
@@ -148,12 +146,24 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
|
|||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
{isAuthenticated ? (
|
)
|
||||||
// Authenticated: sidebar layout — children include DashboardShell
|
|
||||||
<>{children}</>
|
if (isAuthenticated) {
|
||||||
) : (
|
// Dashboard layout: header pinned, sidebar + content fill remaining viewport
|
||||||
// Public: standard content with footer
|
return (
|
||||||
<>
|
<div className="flex flex-col h-screen overflow-hidden">
|
||||||
|
{auth.user && <OfflineBanner isOnline={isOnline} />}
|
||||||
|
<div className="shrink-0">{headerElement}</div>
|
||||||
|
{children}
|
||||||
|
<SettingsModalWrapper />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public/marketing layout: floating header, scrollable page, footer
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col min-h-screen">
|
||||||
|
{headerElement}
|
||||||
<main className="flex-1 pb-8 pt-24">
|
<main className="flex-1 pb-8 pt-24">
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
@@ -162,15 +172,6 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
|
|||||||
appName="Pulse"
|
appName="Pulse"
|
||||||
isAuthenticated={false}
|
isAuthenticated={false}
|
||||||
/>
|
/>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{isAuthenticated && (
|
|
||||||
<Footer
|
|
||||||
LinkComponent={Link}
|
|
||||||
appName="Pulse"
|
|
||||||
isAuthenticated={true}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<SettingsModalWrapper />
|
<SettingsModalWrapper />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -13,9 +13,9 @@ export default function DashboardShell({
|
|||||||
const { mobileOpen, closeMobile } = useSidebar()
|
const { mobileOpen, closeMobile } = useSidebar()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-1">
|
<div className="flex flex-1 overflow-hidden">
|
||||||
<Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
|
<Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
|
||||||
<main className="flex-1 min-w-0 pb-8">
|
<main className="flex-1 min-w-0 overflow-y-auto">
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -319,7 +319,7 @@ export default function Sidebar({
|
|||||||
|
|
||||||
{/* Desktop sidebar */}
|
{/* Desktop sidebar */}
|
||||||
<aside
|
<aside
|
||||||
className={`hidden lg:flex flex-col shrink-0 sticky top-0 h-screen border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 overflow-hidden ${
|
className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 overflow-hidden ${
|
||||||
collapsed ? 'w-[68px]' : 'w-60'
|
collapsed ? 'w-[68px]' : 'w-60'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user