adds user management

web/src/lib/components/base/dropdown.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
 
-    export let items: { text: string; value: any }[] = [];
+    export let items: { text: string; value: any; icon?: string }[] = [];
+    export let size: string = "regular";
 
     const dispatch = createEventDispatcher();
 
@@ -26,28 +27,31 @@
 <svelte:window on:mouseup={() => (isOpen = false)} />
 
 <div class="dropdown relative">
-    <button
-        class="hover:bg-gray-100 w-8 h-8 rounded-full"
-        on:click={toggleMenu}
-        type="button"
-    >
-        <i class="fa fa-ellipsis-vertical"></i>
+    <button class="flex items-center justify-center" on:click={toggleMenu} type="button">
+        <slot>
+            <i
+                class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 px-[14px] py-2 rounded-full hover:bg-opacity-50"
+            ></i>
+        </slot>
     </button>
-
     {#if isOpen}
         <ul
-            class="menu absolute bg-white border rounded-l-xl rounded-b-xl shadow-md z-10 right-0 overflow-hidden"
+            class="menu absolute bg-white border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden text-black"
             class:none={isOpen}
+            style="z-index: 1001"
         >
             {#each items as item}
                 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                 <li
-                    class="menu-item p-4 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
+                    class="menu-item flex items-center p-4 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
                     tabindex="0"
                     on:mouseup|stopPropagation={() => handleItemClick(item)}
                     on:keydown|stopPropagation={() => handleItemClick(item)}
                 >
+                    {#if item.icon}
+                        <i class="fa fa-{item.icon} mr-6"></i>
+                    {/if}
                     {item.text}
                 </li>
             {/each}