Changed Main NAV
This commit is contained in:
@@ -262,11 +262,7 @@ const links = computed(() => {
|
||||
}] : [],
|
||||
]
|
||||
},
|
||||
... has("checks") ? [{
|
||||
label: "Überprüfungen",
|
||||
to: "/standardEntity/checks",
|
||||
icon: "i-heroicons-magnifying-glass"
|
||||
},] : [],
|
||||
|
||||
... has("projects") ? [{
|
||||
label: "Projekte",
|
||||
to: "/standardEntity/projects",
|
||||
@@ -282,7 +278,11 @@ const links = computed(() => {
|
||||
to: "/standardEntity/plants",
|
||||
icon: "i-heroicons-clipboard-document"
|
||||
},] : [],
|
||||
|
||||
... has("checks") ? [{
|
||||
label: "Überprüfungen",
|
||||
to: "/standardEntity/checks",
|
||||
icon: "i-heroicons-magnifying-glass"
|
||||
},] : [],
|
||||
{
|
||||
label: "Einstellungen",
|
||||
defaultOpen: false,
|
||||
@@ -304,11 +304,13 @@ const links = computed(() => {
|
||||
},{
|
||||
label: "E-Mail Konten",
|
||||
to: "/settings/emailAccounts",
|
||||
icon: "i-heroicons-envelope"
|
||||
icon: "i-heroicons-envelope",
|
||||
disabled: true
|
||||
},{
|
||||
label: "Bankkonten",
|
||||
to: "/settings/banking",
|
||||
icon: "i-heroicons-currency-euro"
|
||||
icon: "i-heroicons-currency-euro",
|
||||
disabled: true
|
||||
},{
|
||||
label: "Textvorlagen",
|
||||
to: "/settings/texttemplates",
|
||||
@@ -334,10 +336,83 @@ const links = computed(() => {
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// nur Items mit Children → für Accordion
|
||||
const accordionItems = computed(() =>
|
||||
links.value.filter(item => Array.isArray(item.children) && item.children.length > 0)
|
||||
)
|
||||
|
||||
// nur Items ohne Children → als Buttons
|
||||
const buttonItems = computed(() =>
|
||||
links.value.filter(item => !item.children || item.children.length === 0)
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Standalone Buttons -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<UButton
|
||||
v-for="item in buttonItems"
|
||||
:key="item.label"
|
||||
:variant="item.pinned ? 'ghost' : 'ghost'"
|
||||
:color="(item.to && route.path === item.to) ? 'primary' : (item.pinned ? 'amber' : 'gray')"
|
||||
:icon="item.pinned ? 'i-heroicons-star' : item.icon"
|
||||
class="w-full"
|
||||
:to="item.to"
|
||||
:target="item.target"
|
||||
>
|
||||
<UIcon
|
||||
v-if="item.pinned"
|
||||
:name="item.icon"
|
||||
class="w-5 h-5 me-2"
|
||||
/>
|
||||
{{ item.label }}
|
||||
</UButton>
|
||||
</div>
|
||||
<UDivider/>
|
||||
<!-- Accordion für die Items mit Children -->
|
||||
<UAccordion
|
||||
:items="accordionItems"
|
||||
:multiple="false"
|
||||
class="mt-2"
|
||||
>
|
||||
<template #default="{ item, open }">
|
||||
<UButton
|
||||
:variant="'ghost'"
|
||||
:color="(item.children?.some(c => route.path.includes(c.to))) ? 'primary' : 'gray'"
|
||||
:icon="item.icon"
|
||||
class="w-full"
|
||||
>
|
||||
{{ 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 }">
|
||||
<div class="flex flex-col">
|
||||
<UButton
|
||||
v-for="child in item.children"
|
||||
:key="child.label"
|
||||
variant="ghost"
|
||||
:color="child.to === route.path ? 'primary' : 'gray'"
|
||||
:icon="child.icon"
|
||||
class="ml-4"
|
||||
:to="child.to"
|
||||
:target="child.target"
|
||||
:disabled="child.disabled"
|
||||
>
|
||||
{{ child.label }}
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UAccordion>
|
||||
<!-- <UAccordion
|
||||
:items="links"
|
||||
:multiple="false"
|
||||
>
|
||||
@@ -381,6 +456,6 @@ const links = computed(() => {
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UAccordion>
|
||||
</UAccordion>-->
|
||||
|
||||
</template>
|
||||
Reference in New Issue
Block a user