refactor(#35): use dropdown component for user/signin

src/lib/components/Dropdown.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 
   export let indicator: boolean = false;
+  export let posRight: boolean = false;
 
   let isOpen = false;
   let dropdown: HTMLDivElement;
@@ -27,7 +28,7 @@
   });
 </script>
 
-<div bind:this={dropdown}>
+<div bind:this={dropdown} class="relative">
   <div class="dropdown-title">
     <button class="flex" on:click={() => isOpen = !isOpen}>
       {#if indicator}
@@ -36,7 +37,7 @@
       <slot name="dropdown"></slot>
     </button>
   </div>
-  <ul class:flex={isOpen} class:hidden={!isOpen} class="absolute rounded-box w-52 shadow z-[1] menu p-2 bg-base-100 text-base-content">
+  <ul class:flex={isOpen} class:hidden={!isOpen} class:right-0={posRight} class="absolute rounded-box min-w-52 shadow z-[1] menu p-2 bg-base-100 text-base-content">
     <slot />
   </ul>
 </div>

src/lib/components/Nav.svelte

@@ -3,6 +3,7 @@
 	import MagicLink from "./MagicLink.svelte";
 	import NavLinks from "./NavLinks.svelte";
 	import SignOut from "./SignOut.svelte";
+  import Dropdown from "./Dropdown.svelte";
 	import { basket, type Basket } from '$lib/stores/basket.js';
 	import { onDestroy } from "svelte";
 
@@ -73,8 +74,9 @@
       </a>
 
       <!-- User Account Dropdown -->
-      <details class="dropdown dropdown-end">
-        <summary tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
+      <Dropdown posRight>
+        <div slot="dropdown">
+          <div class="btn btn-ghost btn-circle avatar">
             <div class="w-10 rounded-full">
               {#if session?.user}
                 <div class="user-circle text-primary-content border-primary-content">
@@ -90,25 +92,17 @@
                 </svg>
               {/if}
             </div>
-        </summary>
+          </div>
+        </div>
 
         {#if session?.user}
-          <ul
-            tabindex="-1"
-            class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
-          >
           <li><a href="/account">Account</a></li>
           <li><a href="/settings">Settings</a></li>
           <li><SignOut {supabase} /></li>
-          </ul>
         {:else}
-          <div
-            class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
-          >
           <MagicLink {supabase} />
-          </div>
         {/if}
-      </details>
+      </Dropdown>
     </div>
   </div>
 </nav>

src/lib/components/NavLinks.svelte

@@ -30,7 +30,7 @@
 
 <ul class="flex space-x-4">
 	{#each links as link}
-		<li class="relative">
+		<li>
 			{#if link.isParent}
 				<NavLinkParent text={link.text} children={link.children} />
 			{:else}