simrsx-fe/app/components/pub/my-ui/menus/submenu.vue

<script setup lang="ts">
import { type EncounterItem } from "~/handlers/encounter-init.handler";

const props = defineProps<{
  initialActiveMenu: string
  data: EncounterItem[]
  canCreate?: boolean
  canRead?: boolean
  canUpdate?: boolean
  canDelete?: boolean
}>()

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"
          :can-create="canCreate"
          :can-read="canRead"
          :can-update="canUpdate"
          :can-delete="canDelete"
        />
      </div>
    </div>
  </div>
</template>