Add info icon to Navbar and create User Page

src/lib/assets/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>

src/lib/components/Navbar.svelte

@@ -7,6 +7,7 @@
   import UserAvatar from "./UserAvatar.svelte";
   import { onMount } from "svelte";
   import InfoModal from "./InfoModal.svelte";
+  import infoIcon from "$lib/assets/info.svg";
   async function goHome() {
     goto("/");
   }
@@ -80,17 +81,15 @@
     <InfoModal on:close={closeModal} />
   {/if}
   <div class="navbar-end flex justify-around md:justify-end mr-4">
-    <button class="btn btn-primary" on:click={showModal}>Info</button>
     {#if !user}
       <button class="btn btn-primary ml-4" on:click={toToLogin}>Login</button>
       <button class="btn btn-primary ml-4" on:click={toToSignup}>Signup</button>
     {/if}
+
     {#if user}
       <p>Adventures: {count}</p>
       <UserAvatar {user} />
-      <form method="post" action="/" use:enhance>
-        <button class="btn btn-primary ml-4">Logout</button>
-      </form>
     {/if}
+    <button class="btn btn-neutral ml-4" on:click={showModal}>About</button>
   </div>
 </div>

src/lib/components/UserAvatar.svelte

@@ -1,10 +1,29 @@
 <script lang="ts">
+  import { enhance } from "$app/forms";
+
   export let user: any;
   let firstLetter = user.first_name.charAt(0);
 </script>
 
-<div class="avatar placeholder">
+<div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
-  <div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
+  <div class="avatar placeholder">
-    <span class="text-2xl">{firstLetter}</span>
+    <div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
+      <span class="text-2xl">{firstLetter}</span>
+    </div>
   </div>
+  <!-- svelte-ignore a11y-missing-attribute -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <ul
+    tabindex="0"
+    class="dropdown-content z-[1] menu p-2 shadow bg-neutral mt-2 rounded-box w-52"
+  >
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <li><a>Profile</a></li>
+    <li><a>My Log</a></li>
+    <li><a>Settings</a></li>
+    <form method="post" action="/" use:enhance>
+      <li><button>Logout</button></li>
+    </form>
+  </ul>
 </div>

src/routes/user/+page.svelte

@@ -0,0 +1 @@
+<h1>User Page</h1>