chore: Refactor Navbar and UserAvatar components

src/lib/components/Navbar.svelte

@@ -36,15 +36,7 @@
 
   let count = 0;
 
-  let infoModalOpen = false;
-
-  function showModal() {
-    infoModalOpen = true;
-  }
-
-  function closeModal() {
-    infoModalOpen = false;
-  }
+  let isInfoModalOpen = false;
 
   // Set the visit count to the number of adventures stored in local storage
   const isBrowser = typeof window !== "undefined";
@@ -53,6 +45,10 @@
   }
 </script>
 
+{#if isInfoModalOpen}
+  <InfoModal on:close={() => (isInfoModalOpen = false)} />
+{/if}
+
 <div class="navbar bg-base-100">
   <div class="navbar-start">
     <div class="dropdown">
@@ -143,14 +139,17 @@
     {/if}
     <div class="dropdown dropdown-bottom dropdown-end">
       <div tabindex="0" role="button" class="btn m-1 ml-4">
-        <iconify-icon icon="mdi:theme-light-dark" class="text-xl"
-        ></iconify-icon>
+        <iconify-icon icon="mdi:dots-horizontal" class="text-xl"></iconify-icon>
       </div>
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <ul
         tabindex="0"
         class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
       >
+        <button class="btn" on:click={() => (isInfoModalOpen = true)}
+          >About AdventureLog</button
+        >
+        <p class="font-bold m-4 text-lg">Theme Selection</p>
         <form method="POST" use:enhance={submitUpdateTheme}>
           <li>
             <button formaction="/?/setTheme&theme=light"

src/lib/components/UserAvatar.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import { goto } from "$app/navigation";
-  import InfoModal from "./InfoModal.svelte";
   export let user: any;
 
   let icon: string = "";
@@ -18,8 +17,6 @@
   async function navToLog() {
     goto("/log");
   }
-
-  let isInfoModalOpen: boolean = false;
 </script>
 
 <div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
@@ -45,17 +42,9 @@
         <button on:click={() => goto("/settings/admin")}>Admin Settings</button>
       </li>
     {/if}
-    <li>
-      <button on:click={() => (isInfoModalOpen = true)}
-        >About AdventureLog</button
-      >
-    </li>
+
     <form method="post">
       <li><button formaction="/?/logout">Logout</button></li>
     </form>
   </ul>
 </div>
-
-{#if isInfoModalOpen}
-  <InfoModal on:close={() => (isInfoModalOpen = false)} />
-{/if}

src/lib/config.ts

@@ -1,3 +1,3 @@
-export let appVersion = "Web 0.1.7-alpha";
+export let appVersion = "Web v0.2.0";
 export let appTitle = "AdventureLog";
 export let copyrightYear = "2024";