Remodeled MainNav with an extra component

components/MainNav.vue

@@ -0,0 +1,311 @@
+<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="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>

layouts/default.vue

@@ -1,6 +1,8 @@
 <script setup>
 
 
+import MainNav from "~/components/MainNav.vue";
+
 const dataStore = useDataStore()
 const colorMode = useColorMode()
 const { isHelpSlideoverOpen } = useDashboard()
@@ -498,9 +500,10 @@ const footerLinks = [/*{
           <UDashboardSearchButton label="Suche..."/>
         </template>
 
-        <UDashboardSidebarLinks :links="links">
+<!--        <UDashboardSidebarLinks :links="links">
 
-        </UDashboardSidebarLinks>
+        </UDashboardSidebarLinks>-->
+        <MainNav/>
 
 <!--        <UAccordion
           :items="links"