updated dropdown

frontend/components/global/Dropdown.vue

@@ -2,7 +2,7 @@
 // types
 
 type Props = {
-    items: DropdownItem[];
+    items?: DropdownItem[];
 };
 
 // props
@@ -21,9 +21,10 @@ const toggleState = ref(false);
         </DropdownMenuTrigger>
 
         <DropdownMenuPortal>
+            <slot v-if="!!$slots.content" name="content" />
             <DropdownMenuContent
-                v-if="items"
+                v-else
-                class="min-w-[220px] w-full outline-none bg-white border border-gray-300 rounded-xl font-iran-yekan-x p-2 shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slide-down-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-up-fade data-[side=left]:animate-slide-right-fade z-10000"
+                class="min-w-[220px] w-full divide-y divide-gray-300 outline-none bg-gray-50 border border-gray-300 rounded-2xl font-iran-yekan-x p-2 shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slide-down-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-up-fade data-[side=left]:animate-slide-right-fade z-10000"
                 :side-offset="5"
             >
                 <DropdownMenuItem
@@ -33,7 +34,7 @@ const toggleState = ref(false);
                     :class="
                         item.itemClass ? item.itemClass : 'hover:!text-black'
                     "
-                    class="group text-xs leading-none text-black hover:!bg-gray-100 rounded-md flex items-center justify-between py-3 px-1.5 relative select-none outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-black data-[highlighted]:text-white"
+                    class="group text-xs leading-none text-black hover:!bg-gray-200 cursor-pointer rounded-lg flex items-center justify-between py-3 px-1.5 relative select-none outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-black data-[highlighted]:text-white"
                 >
                     <span>
                         {{ item.title }}
@@ -48,8 +49,6 @@ const toggleState = ref(false);
 
                 <DropdownMenuArrow class="fill-white stroke-gray-300" />
             </DropdownMenuContent>
-
-            <slot v-else name="content" />
         </DropdownMenuPortal>
     </DropdownMenuRoot>
 </template>