From cecce351eeef8b6500bc3ead09055d88dc224010 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Tue, 14 Nov 2023 04:46:01 +0800
Subject: [PATCH] added avatar to sidebar

---
 src/lib/components/sidebar.svelte             | 26 +++++++++++++++++--
 .../ui/avatar/avatar-fallback.svelte          | 19 ++++++++++++++
 .../components/ui/avatar/avatar-image.svelte  | 18 +++++++++++++
 src/lib/components/ui/avatar/avatar.svelte    | 21 +++++++++++++++
 src/lib/components/ui/avatar/index.ts         | 13 ++++++++++
 src/routes/[...catchall]/+page.svelte         | 14 ----------
 6 files changed, 95 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/components/ui/avatar/avatar-fallback.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar-image.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar.svelte
 create mode 100644 src/lib/components/ui/avatar/index.ts
 delete mode 100644 src/routes/[...catchall]/+page.svelte

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 244ad94..a1cae6a 100644
--- a/src/lib/components/sidebar.svelte
+++ b/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>
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..3b9b24c
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..27b0e7d
--- /dev/null
+++ b/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}
+/>
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
new file mode 100644
index 0000000..b8a6ee1
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts
new file mode 100644
index 0000000..b08c780
--- /dev/null
+++ b/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
+};
diff --git a/src/routes/[...catchall]/+page.svelte b/src/routes/[...catchall]/+page.svelte
deleted file mode 100644
index 45cd78a..0000000
--- a/src/routes/[...catchall]/+page.svelte
+++ /dev/null
@@ -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>