46 lines
1.6 KiB
Vue
46 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { type EncounterItem } from "~/handlers/encounter-init.handler";
|
|
|
|
const props = defineProps<{
|
|
initialActiveMenu: string
|
|
data: EncounterItem[]
|
|
}>()
|
|
|
|
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="flex">
|
|
<!-- Menu Sidebar -->
|
|
<div v-if="data.length > 0" class="w-56 2xl:w-64 flex-shrink-0 rounded-md border bg-white dark:bg-slate-800 shadow-sm">
|
|
<div class="max-h-[calc(100vh-12rem)] overflow-y-auto px-2 py-3">
|
|
<button
|
|
v-for="menu in data"
|
|
:key="menu.id"
|
|
:data-active="activeMenu === menu.id"
|
|
class="w-full rounded-md px-4 py-3 text-left text-xs 2xl: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.id)">
|
|
{{ menu.title }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Active Menu Content -->
|
|
<div class="p-4 2xl:p-5 flex-grow">
|
|
<div v-if="data.find((m) => m.id === activeMenu)?.component"
|
|
class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
|
|
<component
|
|
:is="data.find((m) => m.id === activeMenu)?.component"
|
|
v-bind="data.find((m) => m.id === activeMenu)?.props" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|