Added groups to dropdown menu

app/components/Track/Row.vue

@@ -14,7 +14,8 @@ const hovering = ref(false)
 
 const toast = useToast()
 
-const dropdownMenuItems: DropdownMenuItem[] = [
+const dropdownMenuItems: DropdownMenuItem[][] = [
+	[
 		{
 			label: "Play only this",
 			icon: "lucide:play",
@@ -34,6 +35,7 @@ const dropdownMenuItems: DropdownMenuItem[] = [
 				toast.show("Added to queue")
 			},
 		},
+	],
 ]
 
 const durationFormatted = computed(() =>

app/ui/DropdownMenu.vue

@@ -6,7 +6,7 @@ export interface DropdownMenuItem {
 }
 
 interface DropdownMenuProps {
-	items: DropdownMenuItem[]
+	items: DropdownMenuItem[][]
 }
 
 const props = defineProps<DropdownMenuProps>()
@@ -85,9 +85,14 @@ onBeforeMount(() => {
 
 		<Transition name="dropdown">
 			<div v-show="open" class="menu" :class="placement">
+				<div
+					v-for="(group, i) in items"
+					:key="`group-${i}`"
+					class="group"
+				>
 					<button
-					v-for="(item, i) in items"
+						v-for="(item, i) in group"
-					:key="i"
+						:key="`item-${i}`"
 						class="item"
 						@click="
 							() => {
@@ -100,6 +105,7 @@ onBeforeMount(() => {
 						<span>{{ item.label }}</span>
 					</button>
 				</div>
+			</div>
 		</Transition>
 	</div>
 </template>
@@ -113,11 +119,10 @@ onBeforeMount(() => {
 
 	.menu {
 		position: absolute;
-
 		right: 0;
 
-		min-width: 180px;
 		padding: 0.5rem;
+		min-width: 180px;
 
 		background-color: $color-secondary-background;
 		border-radius: $border-radius-standard;
@@ -125,7 +130,6 @@ onBeforeMount(() => {
 
 		display: flex;
 		flex-direction: column;
-		gap: 2px;
 
 		z-index: 1000;
 
@@ -140,6 +144,26 @@ onBeforeMount(() => {
 		}
 	}
 
+	.group {
+		width: 100%;
+
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		padding: 0.4rem 0;
+		border-bottom: 1px solid $color-border;
+
+		&:first-child {
+			padding-top: 0;
+		}
+
+		&:last-child {
+			border-bottom: none;
+			padding-bottom: 0;
+		}
+	}
+
 	.item {
 		display: flex;
 		align-items: center;