App Shell

Responsive shell for controlling application layout.

javascript

import { AppShell } from '@brainandbones/skeleton';

Header

Page Content

Usage

For best results implement this in your app's root layout. The slot order does not matter.

html

<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>

The App Shell will need expand to fill your body tag. First, remove all wrapping elements in your root page. For SvelteKit that's located in /src/app.html.

html

<body>
	<!-- Drop wrapping elements, allow your layout to be the root -->
	%sveltekit.body%
</body>

Then, disable overflow on your html and body tags to prevent duplicate scroll bars. Update your global stylesheet with the following.

css

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

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>

Sidebars

Please be aware that sidebars have a default width of auto. Sidebars will automatically collapse when their contents are empty or hidden. This is useful if you wish to hide 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>

Pro Tip

Consider hiding your sidebar for smaller screens and using a Drawer component. If you wish to use the same navigation lists in both, create a shared components that's inserted into both the Drawer and Sidebar slots. We use this technique on this site!

Properties

Prop	Type	Default	Description
slotHeader	string	-	Provide arbitrary classes to the header slot element.
slotSidebarLeft	string	w-auto	Provide arbitrary classes to the header left sidebar element.
slotSidebarRight	string	w-auto	Provide arbitrary classes to the header right sidebar element.
slotPageHeader	string	-	Provide arbitrary classes to the header page header element.
slotPageContent	string	-	Provide arbitrary classes to the header page content element.
slotPageFooter	string	-	Provide arbitrary classes to the header page footer element.
slotFooter	string	-	Provide arbitrary classes to the footer element.

Slots

Name	Description
default	Your page content. Insert your router slot here.
header	Insert fixed header content, such as the AppBar component.
sidebarLeft	Hidden when empty. Allows you to set fixed left sidebar content.
sidebarRight	Hidden when empty. Allows you to set fixed right sidebar content.
pageHeader	Insert content that resides above your page content. Great for global alerts.
pageFooter	Insert content that resides below your page content. Recommended for most layouts.
footer	Insert fixed footer content. Not recommended for most layouts.