Svelte Component

App Shell

Responsive shell for controlling application layout.

typescript 
import { AppShell } from '@skeletonlabs/skeleton';
Source Page Source

Demo

The shaded regions represent the portion of the page that scrolls vertically.

header
<slot />
pageFooter

Implement the App Shell in your app's root layout in /src/routes/+layout.svelte. Slot order does not matter.

Prerequisites

Required

The App Shell will need to expand to fill all available space within your app's body tag. Open /src/app.html and add the following classes. This wrapping element is required and the style of display: contents should remain.

html 
<body>
	<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
</body>

Then update your global stylesheet with the following. This will disable overflow for html and body tags to prevent duplicate scroll bars.

css 
html, body { @apply h-full overflow-hidden; }

Full Example

Your Routes Page content is passed through the AppShell via the standard <slot /> tag.

html 
<!-- App Shell -->
<AppShell>
	<svelte:fragment slot="header">Header</svelte:fragment>
	<svelte:fragment slot="sidebarLeft">Sidebar Left</svelte:fragment>
	<svelte:fragment slot="sidebarRight">Sidebar Right</svelte:fragment>
	<svelte:fragment slot="pageHeader">Page Header</svelte:fragment>
	<!-- Router Slot -->
	<slot />
	<!-- ---- / ---- -->
	<svelte:fragment slot="pageFooter">Page Footer</svelte:fragment>
	<svelte:fragment slot="footer">Footer</svelte:fragment>
</AppShell>

Using an App Bar

If you wish for your App Bar component to remain fixed at the top of the page, embed it into the top-most header slot.

html 
<AppShell>
	<svelte:fragment slot="header">
		<AppBar>Skeleton</AppBar>
	</svelte:fragment>
	<!-- ... -->
</AppShell>

If you wish for your App Bar to scroll with the page, insert it into the pageHeader slot.

html 
<AppShell>
	<svelte:fragment slot="pageHeader">
		<AppBar>Skeleton</AppBar>
	</svelte:fragment>
	<!-- ... -->
</AppShell>

If you wish to have a sticky pageHeader, apply the following App Shell prop styles.

html 
<AppShell regionPage="relative" slotPageHeader="sticky top-0 z-10">...</AppShell>

Responsive Sidebars

Sidebars have a default width of auto. This means they will automatically collapse when their contents are empty or hidden. Use this to remove the sidebar with CSS media queries via Tailwind's responsive breakpoints.

html 
<AppShell>
	<svelte:fragment slot="sidebarLeft">
		<!-- Hidden below Tailwind's large breakpoint -->
		<div id="sidebar-left" class="hidden lg:block">Sidebar</div>
	</svelte:fragment>
</AppShell>

Tracking Scroll Position

Use the on:scroll event to detect when the page region is scrolled vertically.

typescript 
function scrollHandler(event: UIEvent & { currentTarget: EventTarget & HTMLDivElement; }) {
	console.log(event.currentTarget.scrollTop);
}
html 
<AppShell ... on:scroll={scrollHandler}>