added sidebar and signout button

src/hooks.server.ts

@@ -17,6 +17,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 			throw redirect(303, '/login')
 		}
 	}
+
 	const response = await resolve(event)
 
 	return response

src/lib/components/sidebar.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { Separator } from '$lib/components/ui/separator'
+	import ThemeToggle from './theme-toggle.svelte'
+	import { Button } from '$lib/components/ui/button'
+</script>
+
+<div class="w-[400px] p-4 border-r h-full flex flex-col justify-between">
+	<div>
+		<div class="flex justify-between pb-16 items-center">
+			<div class="text-xl font-bold">Shortener</div>
+			<ThemeToggle />
+		</div>
+
+		<div class="pb-4">Projects</div>
+		<Separator />
+	</div>
+	<div class="flex justify-between items-center">
+		<form method="post" action="?/signout">
+			<Button variant="destructive" type="submit">Sign Out</Button>
+		</form>
+	</div>
+</div>

src/lib/components/ui/separator/index.ts

@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator
+};

src/lib/components/ui/separator/separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "horizontal";
+	export let decorative: $$Props["decorative"] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>

src/routes/(app)/+layout.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
-	import ThemeToggle from '$lib/components/theme-toggle.svelte'
+	import Sidebar from '$lib/components/sidebar.svelte'
 </script>
 
-<ThemeToggle />
+<div class="w-full flex h-screen">
+	<Sidebar />
+	<div class="w-full p-4">
 		<slot />
+	</div>
+</div>

src/routes/(app)/+page.server.ts

@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit'
+import type { PageServerLoad, Actions } from './$types'
+
+export const load = (async () => {
+	return {}
+}) satisfies PageServerLoad
+
+export const actions = {
+	signout: async (event) => {
+		console.log('signout')
+		event.cookies.delete('token')
+		throw redirect(303, '/login')
+	},
+} satisfies Actions