update

frontend/src/App.vue

@@ -1,16 +1,33 @@
 <script setup>
-import { RouterView } from 'vue-router'
+import { computed } from 'vue'
+import { RouterView, RouterLink, useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const crumbs = computed(() => [
+  { label: 'Haushalt', to: '/' },
+  ...(route.meta.breadcrumb ?? []),
+])
 </script>
 
 <template>
-  <header class="navigation">
+  <header class="breadcrumb-bar">
     <div class="container">
-      <span class="brand">Haushalt</span>
+      <nav class="breadcrumb" aria-label="Breadcrumb">
+        <template v-for="(crumb, i) in crumbs" :key="i">
+          <span v-if="i > 0" class="sep">›</span>
+          <RouterLink
+            v-if="crumb.to && i < crumbs.length - 1"
+            :to="crumb.to"
+            class="crumb"
+          >
+            {{ crumb.label }}
+          </RouterLink>
+          <span v-else class="crumb current">{{ crumb.label }}</span>
+        </template>
+      </nav>
     </div>
   </header>
-  <nav class="subnavigation">
-    <div class="container"></div>
-  </nav>
   <main class="main-area">
     <div class="container">
       <RouterView />
@@ -19,29 +36,40 @@ import { RouterView } from 'vue-router'
 </template>
 
 <style scoped>
-.navigation {
-  background: var(--nav-bg);
+.breadcrumb-bar {
+  background: var(--breadcrumb-bg);
   border-bottom: 1px solid var(--border);
 }
 
-.navigation .container {
+.breadcrumb-bar .container {
   display: flex;
   align-items: center;
   height: 3rem;
 }
 
-.brand {
-  font-size: 1.125rem;
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.9375rem;
+}
+
+.crumb {
+  color: var(--text);
+  text-decoration: none;
+}
+
+.crumb:hover {
+  text-decoration: underline;
+}
+
+.crumb.current {
   font-weight: 600;
 }
 
-.subnavigation {
-  background: var(--subnav-bg);
-  border-bottom: 1px solid var(--border);
-}
-
-.subnavigation .container {
-  height: 2rem;
+.sep {
+  color: var(--text-muted);
+  padding: 0 0.25rem;
 }
 
 .main-area .container {

frontend/src/router/index.js

@@ -7,6 +7,7 @@ const router = createRouter({
       path: '/',
       name: 'start',
       component: () => import('../views/Startpage.vue'),
+      meta: { breadcrumb: [] },
     },
   ],
 })

frontend/src/style.css

@@ -1,9 +1,9 @@
 :root {
   --bg: #ffffff;
   --text: #1a1a1a;
+  --text-muted: #6b7280;
   --border: #e5e5e5;
-  --nav-bg: #f7f7f8;
-  --subnav-bg: #f0f0f2;
+  --breadcrumb-bg: #f7f7f8;
   color-scheme: light dark;
 }