80 lines
1.5 KiB
Vue
80 lines
1.5 KiB
Vue
<script setup>
|
||
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="breadcrumb-bar">
|
||
<div class="container">
|
||
<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>
|
||
<main class="main-area">
|
||
<div class="container">
|
||
<RouterView />
|
||
</div>
|
||
</main>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.breadcrumb-bar {
|
||
background: var(--breadcrumb-bg);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.breadcrumb-bar .container {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 3rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.sep {
|
||
color: var(--text-muted);
|
||
padding: 0 0.25rem;
|
||
}
|
||
|
||
.main-area .container {
|
||
padding-top: 1rem;
|
||
padding-bottom: 1rem;
|
||
}
|
||
</style>
|