current init

frontend/src/App.vue

@@ -1,7 +1,78 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+import { computed, provide, ref } from 'vue'
+import { RouterView, RouterLink, useRoute } from 'vue-router'
+
+const route = useRoute()
+const dynamicLabel = ref('')
+
+provide('setDynamicLabel', (label) => { dynamicLabel.value = label })
+
+const breadcrumbs = computed(() => {
+  const items = route.meta.breadcrumb || []
+  return items.map(item => ({
+    ...item,
+    label: item.dynamic ? dynamicLabel.value : item.label,
+  }))
+})
 </script>
 
 <template>
-  <HelloWorld />
+  <header class="app-header">
+    <nav class="breadcrumb">
+      <RouterLink to="/" class="breadcrumb-item">Haushalt</RouterLink>
+      <template v-for="(crumb, i) in breadcrumbs" :key="i">
+        <span class="breadcrumb-sep">&gt;</span>
+        <RouterLink v-if="crumb.to" :to="crumb.to" class="breadcrumb-item">{{ crumb.label }}</RouterLink>
+        <span v-else class="breadcrumb-item breadcrumb-current">{{ crumb.label }}</span>
+      </template>
+    </nav>
+  </header>
+  <main class="app-main">
+    <RouterView />
+  </main>
 </template>
+
+<style scoped>
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  padding: 0.75rem 1rem;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.breadcrumb-item {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-h);
+  text-decoration: none;
+}
+
+.breadcrumb-item:first-child {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.breadcrumb-sep {
+  color: var(--text);
+  font-size: 0.85rem;
+}
+
+.breadcrumb-current {
+  color: var(--text);
+  font-weight: 400;
+}
+
+.app-main {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+</style>