chore: Update UserAvatar component to use button for profile navigation

src/lib/components/UserAvatar.svelte

@@ -30,7 +30,7 @@
     <!-- svelte-ignore a11y-missing-attribute -->
     <!-- svelte-ignore a11y-missing-attribute -->
     <p class="text-lg ml-4 font-bold">Hi, {user.first_name} {user.last_name}</p>
-    <li><a>Profile</a></li>
+    <li><button on:click={() => goto("/profile")}>Profile</button></li>
     <li><button on:click={navToLog}>My Log</button></li>
     <li><button on:click={navToSettings}>User Settings</button></li>
     {#if user.role == "admin"}

src/routes/profile/+page.server.ts

@@ -0,0 +1,11 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad, RequestEvent } from "../$types";
+
+export const load: PageServerLoad = async (event: RequestEvent) => {
+  if (!event.locals.user) {
+    return redirect(302, "/login");
+  }
+  return {
+    user: event.locals.user,
+  };
+};

src/routes/profile/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+</script>
+
+<!--
+// v0 by Vercel.
+// https://v0.dev/t/EtPnDdQYcbn
+-->
+
+<!--
+// v0 by Vercel.
+// https://v0.dev/t/DYwTru570WN
+-->
+
+{#if data.user.icon}
+  <div class="avatar flex items-center justify-center">
+    <div class="w-24 rounded">
+      <img src={data.user.icon} class="w-24 rounded-full" />
+    </div>
+  </div>
+{/if}
+
+<h1 class="text-center text-4xl font-bold">
+  {data.user.first_name}, {data.user.last_name}
+</h1>
+<p class="text-center text-lg mt-2">{data.user.username}</p>
+
+<p class="ml-1 text-lg text-center mt-4">Member Since</p>
+<div class="flex items-center justify-center text-center">
+  <iconify-icon icon="mdi:calendar" class="text-2xl"></iconify-icon>
+  <p class="ml-1 text-xl">{data.user.signup_date.toDateString()}</p>
+</div>