From 6ec87aa20dfbb67f924b68199eb83f311853ad8a Mon Sep 17 00:00:00 2001
From: vaporvee <yannik@vaporvee.com>
Date: Tue, 19 Aug 2025 00:34:15 +0200
Subject: [PATCH] finished navbar and footer in frontend

---
 .../client/src/lib/components/footer.svelte   |  19 +-
 .../client/src/lib/components/logo.svelte     |  29 ++
 .../client/src/lib/components/navbar.svelte   | 256 +++++++++++++-----
 .../src/lib/components/section/cta.svelte     |  44 +--
 .../navigation-menu-link.svelte               |   2 +-
 .../src/lib/components/ui/sheet/index.ts      |  36 +++
 .../components/ui/sheet/sheet-close.svelte    |   7 +
 .../components/ui/sheet/sheet-content.svelte  |  58 ++++
 .../ui/sheet/sheet-description.svelte         |  17 ++
 .../components/ui/sheet/sheet-footer.svelte   |  20 ++
 .../components/ui/sheet/sheet-header.svelte   |  20 ++
 .../components/ui/sheet/sheet-overlay.svelte  |  20 ++
 .../components/ui/sheet/sheet-title.svelte    |  17 ++
 .../components/ui/sheet/sheet-trigger.svelte  |   7 +
 .../apps/client/src/routes/+layout.svelte     |   6 +-
 15 files changed, 463 insertions(+), 95 deletions(-)
 create mode 100644 template/apps/client/src/lib/components/logo.svelte
 create mode 100644 template/apps/client/src/lib/components/ui/sheet/index.ts
 create mode 100644 template/apps/client/src/lib/components/ui/sheet/sheet-close.svelte
 create mode 100644 template/apps/client/src/lib/components/ui/sheet/sheet-content.svelte
 create mode 100644 template/apps/client/src/lib/components/ui/sheet/sheet-description.svelte
 create mode 100644 template/apps/client/src/lib/components/ui/sheet/sheet-footer.svelte
 create mode 100644 template/apps/client/src/lib/components/ui/sheet/sheet-header.svelte
 create mode 100644 template/apps/client/src/lib/components/ui/sheet/sheet-overlay.svelte
 create mode 100644 template/apps/client/src/lib/components/ui/sheet/sheet-title.svelte
 create mode 100644 template/apps/client/src/lib/components/ui/sheet/sheet-trigger.svelte

diff --git a/template/apps/client/src/lib/components/footer.svelte b/template/apps/client/src/lib/components/footer.svelte
index 87f6131..1c3b509 100644
--- a/template/apps/client/src/lib/components/footer.svelte
+++ b/template/apps/client/src/lib/components/footer.svelte
@@ -1,11 +1,20 @@
 <script lang="ts">
 	import type { Settings } from '$lib/sanity.types';
+	import Logo from './logo.svelte';
 
 	let { settings }: { settings: Settings } = $props();
 </script>
 
-<div class="flex flex-col gap-4">
-	<p class="text-sm pb-4 px-8">
-		{settings?.footer?.replace('{YEAR}', new Date().getFullYear().toString())}
-	</p>
-</div>
+<footer class="bg-white border-t">
+	<div class="container mx-auto px-4 py-6">
+		<div class="flex flex-col md:flex-row justify-between items-center gap-4">
+			<Logo {settings} height={24} />
+			
+			<div class="text-center md:text-right">
+				<p class="text-sm text-muted-foreground">
+					{settings.footer?.replace('{YEAR}', new Date().getFullYear().toString()) || `© ${new Date().getFullYear()} All rights reserved.`}
+				</p>
+			</div>
+		</div>
+	</div>
+</footer>
diff --git a/template/apps/client/src/lib/components/logo.svelte b/template/apps/client/src/lib/components/logo.svelte
new file mode 100644
index 0000000..90f7347
--- /dev/null
+++ b/template/apps/client/src/lib/components/logo.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Settings } from '$lib/sanity.types';
+	import { generateImageUrl } from '$lib/helper/image-url';
+
+	interface Props {
+		settings: Settings;
+		height?: number;
+		width?: number;
+		class?: string;
+	}
+
+	let { 
+		settings, 
+		height = 32, 
+		width = 120, 
+		class: className = '' 
+	}: Props = $props();
+
+	const logoUrl = generateImageUrl(settings.logo, width, height);
+</script>
+
+<div class="flex items-center gap-2 {className}">
+	{#if logoUrl}
+		<img src={logoUrl} alt="Logo" class="h-8 w-auto" />
+	{/if}
+	{#if settings.title}
+		<span class="font-semibold text-lg">{settings.title}</span>
+	{/if}
+</div>
diff --git a/template/apps/client/src/lib/components/navbar.svelte b/template/apps/client/src/lib/components/navbar.svelte
index d67fb4e..f7e2d69 100644
--- a/template/apps/client/src/lib/components/navbar.svelte
+++ b/template/apps/client/src/lib/components/navbar.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	export interface NavigationSubItem {
 		name: string;
 		url: string;
@@ -12,75 +12,98 @@
 </script>
 
 <script lang="ts">
-import {
-	NavigationMenuContent,
-	NavigationMenuItem,
-	NavigationMenuLink,
-	NavigationMenuList,
-	NavigationMenuRoot,
-	NavigationMenuTrigger
-} from '$lib/components/ui/navigation-menu';
+	import {
+		NavigationMenuContent,
+		NavigationMenuItem,
+		NavigationMenuLink,
+		NavigationMenuList,
+		NavigationMenuRoot,
+		NavigationMenuTrigger
+	} from '$lib/components/ui/navigation-menu';
+	import {
+		Sheet,
+		SheetContent,
+		SheetHeader,
+		SheetTitle,
+		SheetTrigger
+	} from '$lib/components/ui/sheet';
 	import { cn } from '$lib/utils';
 	import { navigationMenuTriggerStyle } from './ui/navigation-menu/navigation-menu-trigger.svelte';
 	import { page } from '$app/stores';
 	import { onMount, tick } from 'svelte';
 	import { tweened } from 'svelte/motion';
 	import { cubicOut } from 'svelte/easing';
+	import type { Settings } from '$lib/sanity.types';
+	import Logo from './logo.svelte';
+	import { MoreHorizontal, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 
-	export let items: NavigationItem[] = [
-		{ name: 'Home', url: '/' },
-        { name: 'Test', url: '/test' },
-		{ 
-			name: 'Test Subitems', 
-			subitems: [
-				{ name: 'Test Page', url: '#' }
-			] 
-		}
-	];
+	interface Props {
+		settings?: Settings;
+		items?: NavigationItem[];
+	}
 
-	let activeIndex = 0;
+	let {
+		settings,
+		items = [
+			{ name: 'Home', url: '/' },
+			{ name: 'Test', url: '/test' },
+			{
+				name: 'Test Subitems',
+				subitems: [{ name: 'Test Page', url: '#' }]
+			}
+		]
+	}: Props = $props();
+
+	let activeIndex = $state(0);
 	let navigationList: HTMLElement;
-	
-	const indicatorPosition = tweened({ left: 0, width: 0 }, {
-		duration: 300,
-		easing: cubicOut
-	});
+	let mobileMenuOpen = $state(false);
+	let expandedSubmenu = $state<string | null>(null);
 
-	$: {
+	const indicatorPosition = tweened(
+		{ left: 0, width: 0 },
+		{
+			duration: 300,
+			easing: cubicOut
+		}
+	);
+
+	$effect(() => {
 		const currentPath = $page.url.pathname;
 		let newActiveIndex = -1;
-		
+
 		items.forEach((item, index) => {
 			if (item.url === currentPath) {
 				newActiveIndex = index;
 			} else if (item.subitems) {
-				const hasActiveSubitem = item.subitems.some(subitem => 
-					currentPath === subitem.url || currentPath.startsWith(subitem.url + '/')
+				const hasActiveSubitem = item.subitems.some(
+					(subitem) => currentPath === subitem.url || currentPath.startsWith(subitem.url + '/')
 				);
 				if (hasActiveSubitem) {
 					newActiveIndex = index;
 				}
 			}
 		});
-		
+
 		if (newActiveIndex !== -1) {
 			activeIndex = newActiveIndex;
 			tick().then(() => updateIndicator());
 		}
-	}
+	});
 
 	function updateIndicator() {
 		if (!navigationList || activeIndex === -1) return;
-		
+
 		const menuItems = navigationList.querySelectorAll('[data-navigation-menu-item]');
 		const activeMenuItem = menuItems[activeIndex];
-		
+
 		if (activeMenuItem) {
 			const activeButton = activeMenuItem.querySelector('a, button');
 			if (activeButton) {
 				const listRect = navigationList.getBoundingClientRect();
 				const buttonRect = activeButton.getBoundingClientRect();
-				
+
 				indicatorPosition.set({
 					left: buttonRect.left - listRect.left,
 					width: buttonRect.width
@@ -92,38 +115,141 @@ import {
 	onMount(() => {
 		setTimeout(updateIndicator, 200);
 	});
+
+	function closeMobileMenu() {
+		mobileMenuOpen = false;
+		expandedSubmenu = null;
+	}
+
+	function toggleSubmenu(itemName: string) {
+		expandedSubmenu = expandedSubmenu === itemName ? null : itemName;
+	}
 </script>
 
-<NavigationMenuRoot class="px-2 py-1 min-w-full bg-primary" viewport={false}>
-	<div bind:this={navigationList}>
-		<NavigationMenuList class="relative">
-			<div 
-				class="absolute top-0 h-full bg-white/10 rounded-md pointer-events-none z-10"
-				style="left: {$indicatorPosition.left}px; width: {$indicatorPosition.width}px;"
-			></div>
-			{#each items as item}
-				<NavigationMenuItem data-navigation-menu-item>
-					{#if item.url && !item.subitems}
-						<NavigationMenuLink 
-							class={cn(navigationMenuTriggerStyle(), "relative z-20")}
-							href={item.url}
-						>
-							{item.name}
-						</NavigationMenuLink>
-					{:else if item.subitems}
-						<NavigationMenuTrigger class="relative z-20">
-							{item.name}
-						</NavigationMenuTrigger>
-						<NavigationMenuContent class="absolute left-1/2 -translate-x-1/2 mt-2 z-50 min-w-full border border-white/20 bg-primary shadow-lg rounded-md">
-							{#each item.subitems as subitem}
-								<NavigationMenuLink href={subitem.url}>
-									{subitem.name}
-								</NavigationMenuLink>
+<nav class="bg-primary py-3">
+	<div class="container md:mx-auto px-4 md:px-0">
+		<div class="relative flex items-center">
+			<div class="flex items-center">
+				{#if settings}
+					<Logo {settings} class="text-white" />
+				{:else}
+					<div class="text-lg font-semibold text-white">Logo</div>
+				{/if}
+			</div>
+
+			<div class="absolute left-1/2 hidden -translate-x-1/2 transform md:flex">
+				<NavigationMenuRoot class="" viewport={false}>
+					<div bind:this={navigationList}>
+						<NavigationMenuList class="relative">
+							<div
+								class="pointer-events-none absolute top-0 z-10 h-full rounded-md bg-white/10"
+								style="left: {$indicatorPosition.left}px; width: {$indicatorPosition.width}px;"
+							></div>
+							{#each items as item}
+								<NavigationMenuItem data-navigation-menu-item>
+									{#if item.url && !item.subitems}
+										<NavigationMenuLink
+											class={cn(
+												'relative z-20 text-white hover:text-white/80 transition-colors'
+											)}
+											href={item.url}
+										>
+											{item.name}
+										</NavigationMenuLink>
+									{:else if item.subitems}
+										<NavigationMenuTrigger class="relative z-20 text-white hover:text-white/80 transition-colors">
+											{item.name}
+										</NavigationMenuTrigger>
+										<NavigationMenuContent
+											class="bg-primary absolute left-1/2 z-50 mt-2 min-w-full -translate-x-1/2 rounded-md border border-white/20 shadow-lg"
+										>
+											{#each item.subitems as subitem}
+												<NavigationMenuLink
+													href={subitem.url}
+													class="block rounded-md px-4 py-2 text-white hover:text-white/80 transition-colors"
+												>
+													{subitem.name}
+												</NavigationMenuLink>
+											{/each}
+										</NavigationMenuContent>
+									{/if}
+								</NavigationMenuItem>
 							{/each}
-						</NavigationMenuContent>
-					{/if}
-				</NavigationMenuItem>
-			{/each}
-		</NavigationMenuList>
+						</NavigationMenuList>
+					</div>
+				</NavigationMenuRoot>
+			</div>
+
+			<div class="ml-auto flex items-center">
+				<Sheet bind:open={mobileMenuOpen}>
+					<SheetTrigger
+						class="rounded-md p-2 text-white transition-colors hover:bg-white/10 md:hidden"
+						aria-label="Toggle mobile menu"
+					>
+						<MoreHorizontal size={24} />
+					</SheetTrigger>
+					<SheetContent side="top" class="h-full w-full bg-primary border-primary">
+						<SheetHeader class="border-b border-white/20 pb-4">
+							<SheetTitle class="flex items-center justify-start text-white">
+								{#if settings}
+									<Logo {settings} class="text-white" />
+								{:else}
+									<div class="text-lg font-semibold text-white">Navigation</div>
+								{/if}
+							</SheetTitle>
+						</SheetHeader>
+						<div class="flex flex-col space-y-2 pt-6 relative">
+							{#each items as item, index}
+								{#if item.url && !item.subitems}
+									<div class="relative">
+										{#if index === activeIndex}
+											<div class="absolute left-0 top-0 bottom-0 w-1 bg-white/20 rounded-r-md"></div>
+										{/if}
+										<a
+											href={item.url}
+											class="block rounded-md px-4 py-2 text-sm transition-colors text-white hover:text-white/80 {index === activeIndex ? 'text-white' : ''}"
+											onclick={closeMobileMenu}
+										>
+											{item.name}
+										</a>
+									</div>
+								{:else if item.subitems}
+									<div class="space-y-1 relative">
+										{#if index === activeIndex}
+											<div class="absolute left-0 top-0 bottom-0 w-1 bg-white/20 rounded-r-md"></div>
+										{/if}
+										<button
+											class="w-full rounded-md px-4 py-2 text-left text-sm font-medium transition-all duration-200 flex items-center justify-between text-white hover:text-white/80"
+											onclick={() => toggleSubmenu(item.name)}
+										>
+											<span>{item.name}</span>
+											<div class="transition-transform duration-300 ease-out {expandedSubmenu === item.name ? 'rotate-90' : 'rotate-0'}">
+												<ChevronRight size={16} />
+											</div>
+										</button>
+										{#if expandedSubmenu === item.name}
+											<div 
+												class="ml-4 space-y-1" 
+												transition:slide={{ duration: 300, easing: quintOut }}
+											>
+												{#each item.subitems as subitem}
+													<a
+														href={subitem.url}
+														class="block rounded-md px-6 py-2 text-sm transition-colors text-white/80 hover:text-white"
+														onclick={closeMobileMenu}
+													>
+														{subitem.name}
+													</a>
+												{/each}
+											</div>
+										{/if}
+									</div>
+								{/if}
+							{/each}
+						</div>
+					</SheetContent>
+				</Sheet>
+			</div>
+		</div>
 	</div>
-</NavigationMenuRoot>
+</nav>
diff --git a/template/apps/client/src/lib/components/section/cta.svelte b/template/apps/client/src/lib/components/section/cta.svelte
index 6b0806e..05fb728 100644
--- a/template/apps/client/src/lib/components/section/cta.svelte
+++ b/template/apps/client/src/lib/components/section/cta.svelte
@@ -37,7 +37,7 @@
 
 <section
 	class={cn(
-		'min-h-screen flex flex-col md:flex-row w-full overflow-hidden relative',
+		'flex flex-col md:flex-row w-full',
 		textColor
 	)}
 	style:background-image={background?.url ? `url(${background.url})` : undefined}
@@ -46,29 +46,29 @@
 	style:background-repeat="no-repeat"
 	aria-label={background?.alt}
 >
-	<div class={cn('absolute inset-0 z-0', backgroundColor)}></div>
+<div class={cn('absolute inset-0 z-[-1]', backgroundColor)}></div>
 
-	<div
-		class="z-10 flex flex-col items-center md:items-start justify-center md:justify-start mt-20 px-6 md:px-20 md:py-32 md:flex-1 space-y-12 min-h-screen md:min-h-0"
-	>
-		<div>
-			{#if sectionTitle}
-				<p class="text-sm mb-4">
-					{sectionTitle}
-				</p>
-			{/if}
-			<h1 class="md:max-w-[60rem] text-6xl md:text-8xl font-bold leading-tight">
-				{cta?.title}
-			</h1>
-		</div>
+<div
+class="z-10 flex flex-col items-center md:items-start justify-center md:justify-start mt-20 px-6 md:px-20 md:py-32 md:flex-1 space-y-12"
+>
+<div>
+	{#if sectionTitle}
+	<p class="text-sm mb-4">
+		{sectionTitle}
+	</p>
+	{/if}
+	<h1 class="md:max-w-[60rem] text-6xl md:text-8xl font-bold leading-tight">
+		{cta?.title}
+	</h1>
+</div>
 
-		<div class="flex flex-col items-start space-y-8 md:space-y-14 w-full max-w-xl">
-			{#if cta?.description}
-				<div class="text-lg">
-					<SanityBlock body={cta.description} />
-				</div>
-			{/if}
-			{#if mounted && linkData}
+<div class="flex flex-col items-start space-y-8 md:space-y-14 w-full max-w-xl">
+	{#if cta?.description}
+	<div class="text-lg">
+		<SanityBlock body={cta.description} />
+	</div>
+	{/if}
+	{#if mounted && linkData}
 				<div class="mb-20">
 					<LinkButton
 						text={cta?.button?.text ?? ''}
diff --git a/template/apps/client/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte b/template/apps/client/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
index c197ffd..ab03c6c 100644
--- a/template/apps/client/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
+++ b/template/apps/client/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="navigation-menu-link"
 	class={cn(
-		"data-[active=true]:focus:bg-white/5 cursor-pointer data-[active=true]:hover:bg-white/5 data-[active=true]:bg-primary data-[active=true]:text-white hover:bg-white/5 hover:text-white focus:bg-white/5 focus:text-white active:bg-white/8 focus-visible:ring-white/20 [&_svg:not([class*='text-'])]:text-white flex flex-col gap-1 rounded-sm p-2 text-sm text-white outline-none transition-all focus-visible:outline-1 focus-visible:ring-[3px] [&_svg:not([class*='size-'])]:size-4",
+		"data-[active=true]:focus:bg-white/5 cursor-pointer data-[active=true]:text-white  hover:text-white/80  focus:text-white  focus-visible:ring-white/20 [&_svg:not([class*='text-'])]:text-white flex flex-col gap-1 rounded-sm p-2 text-sm text-white outline-none transition-all focus-visible:outline-1 focus-visible:ring-[3px] [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/template/apps/client/src/lib/components/ui/sheet/index.ts b/template/apps/client/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000..01d40c8
--- /dev/null
+++ b/template/apps/client/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,36 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+const Root = SheetPrimitive.Root;
+const Portal = SheetPrimitive.Portal;
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};
diff --git a/template/apps/client/src/lib/components/ui/sheet/sheet-close.svelte b/template/apps/client/src/lib/components/ui/sheet/sheet-close.svelte
new file mode 100644
index 0000000..ae382c1
--- /dev/null
+++ b/template/apps/client/src/lib/components/ui/sheet/sheet-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
diff --git a/template/apps/client/src/lib/components/ui/sheet/sheet-content.svelte b/template/apps/client/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000..856922e
--- /dev/null
+++ b/template/apps/client/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,58 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+	export const sheetVariants = tv({
+		base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+		variants: {
+			side: {
+				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+				left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+				right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	});
+
+	export type Side = VariantProps<typeof sheetVariants>["side"];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: SheetPrimitive.PortalProps;
+		side?: Side;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="ring-offset-background focus-visible:ring-ring rounded-xs focus-visible:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none"
+		>
+			<XIcon class="size-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPrimitive.Portal>
diff --git a/template/apps/client/src/lib/components/ui/sheet/sheet-description.svelte b/template/apps/client/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000..333b17a
--- /dev/null
+++ b/template/apps/client/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/template/apps/client/src/lib/components/ui/sheet/sheet-footer.svelte b/template/apps/client/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000..dd9ed84
--- /dev/null
+++ b/template/apps/client/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/client/src/lib/components/ui/sheet/sheet-header.svelte b/template/apps/client/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000..757a6a5
--- /dev/null
+++ b/template/apps/client/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn("flex flex-col gap-1.5 p-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/template/apps/client/src/lib/components/ui/sheet/sheet-overlay.svelte b/template/apps/client/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..345e197
--- /dev/null
+++ b/template/apps/client/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/template/apps/client/src/lib/components/ui/sheet/sheet-title.svelte b/template/apps/client/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000..9fda327
--- /dev/null
+++ b/template/apps/client/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn("text-foreground font-semibold", className)}
+	{...restProps}
+/>
diff --git a/template/apps/client/src/lib/components/ui/sheet/sheet-trigger.svelte b/template/apps/client/src/lib/components/ui/sheet/sheet-trigger.svelte
new file mode 100644
index 0000000..e266975
--- /dev/null
+++ b/template/apps/client/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />
diff --git a/template/apps/client/src/routes/+layout.svelte b/template/apps/client/src/routes/+layout.svelte
index 616ed73..1c446b5 100644
--- a/template/apps/client/src/routes/+layout.svelte
+++ b/template/apps/client/src/routes/+layout.svelte
@@ -24,8 +24,10 @@
 </svelte:head>
 
 <div class="scroll-smooth font-sans antialiased">
-  <Navbar />
-	{@render children()}
+	<Navbar settings={data.settings} />
+	<main class="min-h-[calc(100vh-11.3rem)] md:min-h-[calc(100vh-8.55rem)]">
+		{@render children()}
+	</main>
 	{#if data.settings}
 		<Footer settings={data.settings} />
 	{/if}