Stacked layout

You don't have enough features to fill a sidebar anyway, plus they aren't going to be cool forever.

<script>
	import { Avatar } from '$lib/components/avatar';
	import {
		Dropdown,
		DropdownButton,
		DropdownDivider,
		DropdownItem,
		DropdownLabel,
		DropdownMenu
	} from '$lib/components/dropdown';
	import {
		Navbar,
		NavbarDivider,
		NavbarItem,
		NavbarLabel,
		NavbarSection,
		NavbarSpacer
	} from '$lib/components/navbar';
	import {
		Sidebar,
		SidebarBody,
		SidebarHeader,
		SidebarItem,
		SidebarLabel,
		SidebarSection
	} from '$lib/components/sidebar';
	import { StackedLayout } from '$lib/components/stacked-layout';
	import HeroiconsArrowRightStartOnRectangle16Solid from 'virtual:icons/heroicons/arrow-right-start-on-rectangle-16-solid';
	import HeroiconsChevronDown16Solid from 'virtual:icons/heroicons/chevron-down-16-solid';
	import HeroiconsChevronUp16Solid from 'virtual:icons/heroicons/chevron-up-16-solid';
	import HeroiconsCog8Tooth16Solid from 'virtual:icons/heroicons/cog8-tooth-16-solid';
	import HeroiconsLightBulb16Solid from 'virtual:icons/heroicons/light-bulb-16-solid';
	import HeroiconsPlus16Solid from 'virtual:icons/heroicons/plus-16-solid';
	import HeroiconsShieldCheck16Solid from 'virtual:icons/heroicons/shield-check-16-solid';
	import HeroiconsUser16Solid from 'virtual:icons/heroicons/user-16-solid';
	import HeroiconsInbox20Solid from 'virtual:icons/heroicons/inbox-20-solid';
	import HeroiconsMagnifyingGlass20Solid from 'virtual:icons/heroicons/magnifying-glass-20-solid';

	const navItems = [
		{ label: 'Home', url: '/' },
		{ label: 'Events', url: '/events' },
		{ label: 'Orders', url: '/orders' },
		{ label: 'Broadcasts', url: '/broadcasts' },
		{ label: 'Settings', url: '/settings' }
	];
</script>

{#snippet TeamDropdownMenu()}
	<DropdownMenu class="min-w-80 lg:min-w-64" anchor="bottom start">
		<DropdownItem href="/teams/1/settings">
			<Cog8ToothIcon />
			<DropdownLabel>Settings</DropdownLabel>
		</DropdownItem>
		<DropdownDivider />
		<DropdownItem href="/teams/1">
			<Avatar slot="icon" src="/tailwind-logo.svg" />
			<DropdownLabel>Tailwind Labs</DropdownLabel>
		</DropdownItem>
		<DropdownItem href="/teams/2">
			<Avatar slot="icon" initials="WC" class="bg-purple-500 text-white" />
			<DropdownLabel>Workcation</DropdownLabel>
		</DropdownItem>
		<DropdownDivider />
		<DropdownItem href="/teams/create">
			<PlusIcon />
			<DropdownLabel>New team&hellip;</DropdownLabel>
		</DropdownItem>
	</DropdownMenu>
{/snippet}

<StackedLayout>
	{#snippet navbar()}
		<Navbar>
			<Dropdown>
				<DropdownButton as={NavbarItem} class="max-lg:hidden">
					<Avatar src="/tailwind-logo.svg" />
					<NavbarLabel>Tailwind Labs</NavbarLabel>
					<ChevronDownIcon />
				</DropdownButton>
				<TeamDropdownMenu />
			</Dropdown>
			<NavbarDivider class="max-lg:hidden" />
			<NavbarSection class="max-lg:hidden">
				{#each navItems as { label, url } (label)}
					<NavbarItem href={url}>
						{label}
					</NavbarItem>
				{/each}
			</NavbarSection>
			<NavbarSpacer />
			<NavbarSection>
				<NavbarItem href="/search" aria-label="Search">
					<MagnifyingGlassIcon />
				</NavbarItem>
				<NavbarItem href="/inbox" aria-label="Inbox">
					<InboxIcon />
				</NavbarItem>
				<Dropdown>
					<DropdownButton as={NavbarItem}>
						<Avatar src="/profile-photo.jpg" square />
					</DropdownButton>
					<DropdownMenu class="min-w-64" anchor="bottom end">
						<DropdownItem href="/my-profile">
							<UserIcon />
							<DropdownLabel>My profile</DropdownLabel>
						</DropdownItem>
						<DropdownItem href="/settings">
							<Cog8ToothIcon />
							<DropdownLabel>Settings</DropdownLabel>
						</DropdownItem>
						<DropdownDivider />
						<DropdownItem href="/privacy-policy">
							<ShieldCheckIcon />
							<DropdownLabel>Privacy policy</DropdownLabel>
						</DropdownItem>
						<DropdownItem href="/share-feedback">
							<LightBulbIcon />
							<DropdownLabel>Share feedback</DropdownLabel>
						</DropdownItem>
						<DropdownDivider />
						<DropdownItem href="/logout">
							<ArrowRightStartOnRectangleIcon />
							<DropdownLabel>Sign out</DropdownLabel>
						</DropdownItem>
					</DropdownMenu>
				</Dropdown>
			</NavbarSection>
		</Navbar>
	{/snippet}

	{#snippet sidebar()}
		<Sidebar>
			<SidebarHeader>
				<Dropdown>
					<DropdownButton as={SidebarItem} class="lg:mb-2.5">
						<Avatar src="/tailwind-logo.svg" />
						<SidebarLabel>Tailwind Labs</SidebarLabel>
						<ChevronDownIcon />
					</DropdownButton>
					<TeamDropdownMenu />
				</Dropdown>
			</SidebarHeader>
			<SidebarBody>
				<SidebarSection>
					{#each navItems as { label, url } (label)}
						<SidebarItem href={url}>
							{label}
						</SidebarItem>
					{/each}
				</SidebarSection>
			</SidebarBody>
		</Sidebar>
	{/snippet}

	{@render children?.()}
</StackedLayout>

Component API

Prop	Default	Description
StackedLayout extends the JSX <div> element
navbar	-	The Navbar menu for desktop screen sizes.
sidebar	-	The Sidebar menu for mobile screen sizes.
children	-	The page content.

Examples

Basic example

Wrap your page content with the StackedLayout component to create a stacked layout, using the navbar prop for your top navigation menu, and the sidebar prop for your mobile menu content:

<script>
	import { Navbar } from '$lib/components/navbar';
	import { Sidebar } from '$lib/components/sidebar';
	import { StackedLayout } from '$lib/components/stacked-layout';
</script>

<StackedLayout>
	{#snippet navbar()}
		<Navbar>
			<!-- Your navbar content -->
		</Navbar>
	{/snippet}
	{#snippet sidebar()}
		<Sidebar>
			<!-- Your sidebar content -->
		</Sidebar>
	{/snippet}

	<!-- Your page content -->
</StackedLayout>

See the Navbar and Sidebar docs for more details.

Setting the overscroll background

Adding the following classes to the html element in your project to make sure the site background matches the layout background when overscrolling the body:

<html class="bg-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
	<head>
		<!-- ... -->
	</head>
	<body>
		<!-- ... -->
	</body>
</html>