added avatar to sidebar

src/lib/components/sidebar.svelte

@@ -1,10 +1,15 @@
-<script>
+<script lang="ts">
 	import { Separator } from '$lib/components/ui/separator'
 	import ThemeToggle from './theme-toggle.svelte'
 	import { Button } from '$lib/components/ui/button'
+	import * as Avatar from '$lib/components/ui/avatar'
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
+
+	import { User } from 'lucide-svelte'
+	import { goto } from '$app/navigation'
 </script>
 
-<div class="w-[400px] p-4 border-r h-full flex flex-col justify-between">
+<div class="min-w-[350px] 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>
@@ -15,6 +20,23 @@
 		<Separator />
 	</div>
 	<div class="flex justify-between items-center">
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				<Avatar.Root>
+					<Avatar.Image src="github.com/shadcn.png" alt="@shadcn" />
+					<Avatar.Fallback><User /></Avatar.Fallback>
+				</Avatar.Root>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content>
+				<DropdownMenu.Group>
+					<DropdownMenu.Label>My Account</DropdownMenu.Label>
+					<DropdownMenu.Separator />
+					<DropdownMenu.Item on:click={() => goto('/profile')}
+						>Profile</DropdownMenu.Item
+					>
+				</DropdownMenu.Group>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
 		<form method="post" action="?/signout">
 			<Button variant="destructive" type="submit">Sign Out</Button>
 		</form>

src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.FallbackProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Fallback
+	class={cn(
+		"flex h-full w-full items-center justify-center rounded-full bg-muted",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Fallback>

src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.ImageProps;
+
+	let className: $$Props["class"] = undefined;
+	export let src: $$Props["src"] = undefined;
+	export let alt: $$Props["alt"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Image
+	{src}
+	{alt}
+	class={cn("aspect-square h-full w-full", className)}
+	{...$$restProps}
+/>

src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let delayMs: $$Props["delayMs"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Root
+	{delayMs}
+	class={cn(
+		"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Root>

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

@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback
+};

src/routes/[...catchall]/+page.svelte

@@ -1,14 +0,0 @@
-<script>
-	import { goto } from '$app/navigation'
-	import Button from '$lib/components/ui/button/button.svelte'
-</script>
-
-<div class="w-screen h-screen flex justify-center items-center">
-	<div class="flex flex-col gap-12 items-center">
-		<div class="flex flex-col gap-4 items-center">
-			<div class="text-4xl font-bold">404</div>
-			<div class="text-4xl font-bold">Page Not Found</div>
-		</div>
-		<Button on:click={() => goto('/')} class="w-fit">Return Home</Button>
-	</div>
-</div>