FEDEO/components/MainNav.vue

<script setup>
const dataStore = useDataStore()
const route = useRoute()

const links = computed(() => {
  return [
    {
      id: 'dashboard',
      label: "Dashboard",
      to: "/",
      icon: "i-heroicons-home"
    },
    {
      label: "Organisation",
      icon: "i-heroicons-rectangle-stack",
      defaultOpen: false,
      children: [
        {
          label: "Aufgaben",
          to: "/tasks",
          icon: "i-heroicons-rectangle-stack"
        },
        ... dataStore.ownTenant.features.planningBoard ? [{
          label: "Plantafel",
          to: "/calendar/timeline",
          icon: "i-heroicons-calendar-days"
        }] : [],
        ... dataStore.ownTenant.features.calendar ? [{
          label: "Kalender",
          to: "/calendar/grid",
          icon: "i-heroicons-calendar-days"
        }] : [],
        ... dataStore.ownTenant.features.calendar ? [{
          label: "Termine",
          to: "/events",
          icon: "i-heroicons-calendar-days"
        }] : [],
        {
          label: "Dokumente",
          to: "/documents",
          icon: "i-heroicons-document"
        },
      ]
    },
    /*{
      label: "E-Mail",
      to: "/email",
      icon: "i-heroicons-envelope"
    },*/
    ... dataStore.ownTenant.features.contacts ? [{
      label: "Kontakte",
      defaultOpen: false,
      icon: "i-heroicons-user-group",
      children: [
        {
          label: "Kunden",
          to: "/customers",
          icon: "i-heroicons-user-group"
        },
        {
          label: "Lieferanten",
          to: "/vendors",
          icon: "i-heroicons-truck"
        },
        {
          label: "Ansprechpartner",
          to: "/contacts",
          icon: "i-heroicons-user-group"
        },
      ]
    },] : [],
    {
      label: "Mitarbeiter",
      defaultOpen:false,
      icon: "i-heroicons-user-group",
      children: [
        ... dataStore.ownTenant.features.timeTracking ? [{
          label: "Zeiterfassung",
          to: "/employees/timetracking",
          icon: "i-heroicons-clock"
        }] : [],
        ... dataStore.ownTenant.features.workingTimeTracking ? [{
          label: "Anwesenheiten",
          to: "/workingtimes",
          icon: "i-heroicons-clock"
        }] : [],
        {
          label: "Abwesenheiten",
          to: "/absenceRequests",
          icon: "i-heroicons-document-text"
        },
      ]
    },
    ... dataStore.ownTenant.features.accounting ? [{
      label: "Buchhaltung",
      defaultOpen: false,
      icon: "i-heroicons-chart-bar-square",
      children: [
        {
          label: "Ausgangsbelege",
          to: "/createDocument",
          icon: "i-heroicons-document-text"
        },{
          label: "Eingangsbelege",
          to: "/incomingInvoices",
          icon: "i-heroicons-document-text"
        },
        {
          label: "Bank",
          to: "/banking",
          icon: "i-heroicons-document-text"
        },
      ]
    },] : [],
    ... dataStore.ownTenant.features.inventory ? [{
      label: "Lager",
      icon: "i-heroicons-puzzle-piece",
      defaultOpen: false,
      children: [
        {
          label: "Vorgänge",
          to: "/inventory",
          icon: "i-heroicons-square-3-stack-3d"
        },{
          label: "Bestände",
          to: "/inventory/stocks",
          icon: "i-heroicons-square-3-stack-3d"
        },
        {
          label: "Lagerplätze",
          to: "/spaces",
          icon: "i-heroicons-square-3-stack-3d"
        },
      ]
    },] : [],
    {
      label: "Inventar",
      to: "/inventoryitems",
      icon: "i-heroicons-puzzle-piece"
    },
    ... dataStore.ownTenant.features.vehicles ? [{
      label: "Fahrzeuge",
      to: "/vehicles",
      icon: "i-heroicons-truck",
    }] : [],
    {
      label: "Stammdaten",
      defaultOpen: false,
      icon: "i-heroicons-clipboard-document",
      children: [
        {
          label: "Artikelstamm",
          to: "/products",
          icon: "i-heroicons-puzzle-piece"
        },{
          label: "Leistungsstamm",
          to: "/services",
          icon: "i-heroicons-puzzle-piece"
        },

      ]
    },
    ... dataStore.ownTenant.features.projects ? [{
      label: "Projekte",
      to: "/projects",
      icon: "i-heroicons-clipboard-document-check"
    },] : [],
    ... dataStore.ownTenant.features.contracts ? [{
      label: "Verträge",
      to: "/contracts",
      icon: "i-heroicons-clipboard-document"
    }] : [],
    ... dataStore.ownTenant.features.objects ? [{
      label: "Objekte",
      to: "/plants",
      icon: "i-heroicons-clipboard-document"
    },] : [],

    {
      label: "Einstellungen",
      defaultOpen: false,
      icon: "i-heroicons-cog-8-tooth",
      children: [
        {
          label: "Nummernkreise",
          to: "/settings/numberRanges",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Mitarbeiter",
          to: "/profiles",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Bankkonten",
          to: "/settings/banking",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Text Vorlagen",
          to: "/settings/texttemplates",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Eigene Felder",
          to: "/settings/ownfields",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Firmeneinstellungen",
          to: "/settings/tenant",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Reparaturprozesse",
          to: "/repairs/prozess/",
          icon: "i-heroicons-bars-3-solid"
        }
      ]
    },
  ]
})

/*const setOpen = (index,open) => {
  console.log(!open)
}*/


</script>

<template>
<!--
  <UAccordion :items="links" :ui="{ wrapper: 'flex flex-col w-full' }">
    <template #default="{ item, index, open }">
      <UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded: 'rounded-none', padding: { sm: 'p-3' } }">
        <template #leading>
&lt;!&ndash;          <div class="w-6 h-6 rounded-full bg-primary-500 dark:bg-primary-400 flex items-center justify-center -my-1">
            <UIcon :name="item.icon" class="w-4 h-4 text-white dark:text-gray-900" />
          </div>&ndash;&gt;
          <UIcon :name="item.icon" class="w-4 h-4 dark:text-white text-gray-900" />
        </template>

        <span class="truncate">{{ item.label }}</span>

        <template #trailing>
          <UIcon
              name="i-heroicons-chevron-right-20-solid"
              class="w-5 h-5 ms-auto transform transition-transform duration-200"
              :class="[open && 'rotate-90']"
          />
        </template>
      </UButton>
    </template>
    <template #item="{item}">
      <div v-if="item.children" class="flex flex-col">
        <UButton
          v-for="child in item.children"
          variant="ghost"
          color="gray"
        >
          {{child.label}}
        </UButton>
      </div>
    </template>
  </UAccordion>
-->
  <div
    v-for="item in links"
  >
    <UAccordion
      v-if="item.children"
      :items="[item]"
    >
      <template #default="{item,index,open}">
        <UButton
          variant="ghost"
          :color="item.children.find(i => route.path.includes(i.to)) ? 'primary' :   'gray'"
          :icon="item.icon"
        >
          {{item.label}}

          <template #trailing>
            <UIcon
                name="i-heroicons-chevron-right-20-solid"
                class="w-5 h-5 ms-auto transform transition-transform duration-200"
                :class="[open && 'rotate-90']"
            />
          </template>
        </UButton>
      </template>
      <template #item="{item, open}">
        <div class="flex flex-col">
          <UButton
              variant="ghost"
              :color="child.to === route.path ? 'primary' : 'gray'"
              :icon="child.icon"
              v-for="child in item.children"
              class="ml-4"
              :to="child.to"
          >
            {{child.label}}
          </UButton>
        </div>
      </template>
    </UAccordion>
    <UButton
      v-else
      variant="ghost"
      :color="item.to === route.path ? 'primary' : 'gray'"
      class="w-full"
      :icon="item.icon"
      :to="item.to"
    >
      {{item.label}}
    </UButton>
  </div>
</template>