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,42 +74,35 @@
       </a>
 
       <!-- User Account Dropdown -->
-      <details class="dropdown dropdown-end">
+      <Dropdown posRight>
-        <summary tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
+        <div slot="dropdown">
-          <div class="w-10 rounded-full">
+          <div class="btn btn-ghost btn-circle avatar">
-            {#if session?.user}
+            <div class="w-10 rounded-full">
-              <div class="user-circle text-primary-content border-primary-content">
+              {#if session?.user}
-                {session?.user.email ? session?.user.email[0].toUpperCase() : '?'}
+                <div class="user-circle text-primary-content border-primary-content">
-              </div>
+                  {session?.user.email ? session?.user.email[0].toUpperCase() : '?'}
-            {:else}
+                </div>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              {:else}
-                <path
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                  fill-rule="evenodd"
+                  <path
-                  d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+                    fill-rule="evenodd"
-                  clip-rule="evenodd"
+                    d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
-                />
+                    clip-rule="evenodd"
-              </svg>
+                  />
-            {/if}
+                </svg>
+              {/if}
+            </div>
           </div>
-        </summary>
+        </div>
 
         {#if session?.user}
-          <ul
+          <li><a href="/account">Account</a></li>
-            tabindex="-1"
+          <li><a href="/settings">Settings</a></li>
-            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><SignOut {supabase} /></li>
-          >
-            <li><a href="/account">Account</a></li>
-            <li><a href="/settings">Settings</a></li>
-            <li><SignOut {supabase} /></li>
-          </ul>
         {:else}
-          <div
+          <MagicLink {supabase} />
-            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}