46 lines
1.5 KiB
Vue
46 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { type TabItem } from '../comp-tab/type'
|
|
|
|
const props = defineProps<{
|
|
initialActiveMenu: string
|
|
data: TabItem[]
|
|
}>()
|
|
|
|
const activeMenu = ref(props.initialActiveMenu)
|
|
const emit = defineEmits<{
|
|
changeMenu: [value: string]
|
|
}>()
|
|
|
|
function changeMenu(value: string) {
|
|
activeMenu.value = value
|
|
emit('changeMenu', value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-4 flex gap-4">
|
|
<!-- Menu Sidebar -->
|
|
<div v-if="data.length > 0" class="w-72 flex-shrink-0 rounded-md border bg-white shadow-sm dark:bg-neutral-950">
|
|
<div class="max-h-[calc(100vh-12rem)] overflow-y-auto p-2">
|
|
<button
|
|
v-for="menu in data"
|
|
:key="menu.value"
|
|
:data-active="activeMenu === menu.value"
|
|
class="w-full rounded-md px-4 py-3 text-left text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
|
|
@click="changeMenu(menu.value)"
|
|
>
|
|
{{ menu.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Menu Content -->
|
|
<div v-if="data.find((m) => m.value === activeMenu)?.component" class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
|
|
<component
|
|
:is="data.find((m) => m.value === activeMenu)?.component"
|
|
v-bind="data.find((m) => m.value === activeMenu)?.props"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|