bvandeusen
bcd9a23501
Nav lists every FC-2 and FC-3 surface with a placeholder view that names the sub-project that will fill it. System store polls /api/health on mount and renders a status pip in the nav footer. Favicon uses Curator's aged amber accent (#A87338). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<template>
|
|
<v-navigation-drawer permanent :width="220" class="fc-nav">
|
|
<div class="fc-wordmark px-4 py-4">
|
|
<span class="fc-wordmark__text">FabledCurator</span>
|
|
</div>
|
|
<v-list nav density="compact">
|
|
<v-list-item
|
|
v-for="r in navRoutes"
|
|
:key="r.name"
|
|
:to="{ name: r.name }"
|
|
:title="r.meta.title"
|
|
:prepend-icon="iconFor(r.name)"
|
|
class="fc-nav-item"
|
|
/>
|
|
</v-list>
|
|
<template #append>
|
|
<div class="px-4 py-3 fc-status">
|
|
<v-icon size="x-small" :color="health.color">{{ health.icon }}</v-icon>
|
|
<span class="text-caption fc-status__label">{{ health.label }}</span>
|
|
</div>
|
|
</template>
|
|
</v-navigation-drawer>
|
|
|
|
<v-main>
|
|
<slot />
|
|
</v-main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted } from 'vue'
|
|
import { useSystemStore } from '../stores/system.js'
|
|
import router from '../router.js'
|
|
|
|
const system = useSystemStore()
|
|
onMounted(() => system.refreshHealth())
|
|
|
|
const navRoutes = computed(() =>
|
|
router.getRoutes().filter(r => r.meta?.title)
|
|
)
|
|
|
|
function iconFor(name) {
|
|
const map = {
|
|
gallery: 'mdi-image-multiple',
|
|
showcase: 'mdi-view-dashboard-variant',
|
|
tags: 'mdi-tag-multiple',
|
|
settings: 'mdi-cog',
|
|
subscriptions: 'mdi-rss',
|
|
credentials: 'mdi-key-variant',
|
|
downloads: 'mdi-download'
|
|
}
|
|
return map[name] ?? 'mdi-circle-small'
|
|
}
|
|
|
|
const health = computed(() => {
|
|
if (system.healthy === null) return { icon: 'mdi-circle-outline', color: 'on-surface', label: 'checking…' }
|
|
if (system.healthy === true) return { icon: 'mdi-circle', color: 'success', label: 'healthy' }
|
|
return { icon: 'mdi-alert-circle', color: 'error', label: 'unreachable' }
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-wordmark__text {
|
|
font-family: 'Fraunces', Georgia, serif;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
/* Accent color comes from the Vuetify theme via CSS var */
|
|
color: rgb(var(--v-theme-accent));
|
|
}
|
|
.fc-nav-item.v-list-item--active {
|
|
/* "you are here" indicator uses the accent per FabledDesignSystem */
|
|
color: rgb(var(--v-theme-accent));
|
|
}
|
|
.fc-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
</style>
|