3. Zwischenstand

frontend/components/UDashboardNavbar.vue

@@ -0,0 +1,94 @@
+<script setup>
+import DashboardNavbarBase from "@nuxt/ui-pro/runtime/components/DashboardNavbar.vue"
+import UBadge from "@nuxt/ui/components/Badge.vue"
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  as: {
+    type: null,
+    required: false
+  },
+  icon: {
+    type: String,
+    required: false
+  },
+  title: {
+    type: String,
+    required: false
+  },
+  toggle: {
+    type: [Boolean, Object],
+    required: false,
+    default: true
+  },
+  toggleSide: {
+    type: String,
+    required: false,
+    default: "left"
+  },
+  badge: {
+    type: [String, Number],
+    required: false
+  },
+  class: {
+    type: null,
+    required: false
+  },
+  ui: {
+    type: null,
+    required: false
+  }
+})
+</script>
+
+<template>
+  <DashboardNavbarBase
+      :as="as"
+      :icon="icon"
+      :title="title"
+      :toggle="toggle"
+      :toggle-side="toggleSide"
+      :class="props.class"
+      :ui="ui"
+      v-bind="$attrs"
+  >
+    <template v-if="$slots.toggle" #toggle="slotProps">
+      <slot name="toggle" v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.left" #left="slotProps">
+      <slot name="left" v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.leading" #leading="slotProps">
+      <slot name="leading" v-bind="slotProps" />
+    </template>
+
+    <template #title>
+      <slot name="title">
+        <span class="inline-flex min-w-0 items-center gap-2">
+          <span class="truncate">{{ title }}</span>
+          <UBadge
+              v-if="badge !== undefined && badge !== null && badge !== ''"
+              size="sm"
+              color="neutral"
+              variant="subtle"
+          >
+            {{ badge }}
+          </UBadge>
+        </span>
+      </slot>
+    </template>
+
+    <template v-if="$slots.trailing" #trailing="slotProps">
+      <slot name="trailing" v-bind="slotProps" />
+    </template>
+
+    <slot />
+
+    <template v-if="$slots.right" #right="slotProps">
+      <slot name="right" v-bind="slotProps" />
+    </template>
+  </DashboardNavbarBase>
+</template>