feat(nav): pin Settings to the right edge, separated from content nav
CI / lint (push) Successful in 3s
CI / frontend-build (push) Successful in 25s
CI / backend-lint-and-test (push) Successful in 49s
CI / integration (push) Successful in 3m20s

Settings is configuration, not content, but sat mid-row (between Series and
Posts). Pull it out of the centered content links and pin it to the right as a
gear+label, matching the convention that config lives at the right edge. Mobile
is unchanged — Settings stays in the hamburger menu (navRoutes still includes
it). Operator-asked 2026-06-09.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-09 20:37:50 -04:00
parent c999c64cbe
commit a50902071a
+31 -1
View File
@@ -15,7 +15,7 @@
where they fold into the hamburger menu on the right. -->
<nav class="fc-links">
<RouterLink
v-for="r in navRoutes"
v-for="r in contentRoutes"
:key="r.name"
:to="{ name: r.name }"
class="fc-link"
@@ -27,6 +27,19 @@
Gallery: Select). TopNav owns the slot, not its contents. -->
<div id="fc-nav-actions" class="fc-nav-actions" />
<!-- Settings is config, not content pinned to the right edge,
separated from the content nav (desktop). On mobile it lives in
the hamburger menu below like every other route. -->
<RouterLink
v-if="settingsRoute"
:to="{ name: settingsRoute.name }"
class="fc-link fc-link--settings"
:aria-label="settingsRoute.meta.title"
>
<v-icon size="small">mdi-cog-outline</v-icon>
<span class="fc-link--settings__label">{{ settingsRoute.meta.title }}</span>
</RouterLink>
<!-- Mobile nav: the link row collides with brand + actions below ~768px
(7+ links in one flex row), so collapse it into a menu. -->
<v-menu location="bottom end">
@@ -64,6 +77,14 @@ onMounted(() => system.refreshHealth())
const navRoutes = computed(() =>
router.getRoutes().filter(r => r.meta?.title)
)
// Content links for the centered desktop row — everything EXCEPT Settings,
// which is config and gets pinned to the right edge instead.
const contentRoutes = computed(() =>
navRoutes.value.filter(r => r.name !== 'settings')
)
const settingsRoute = computed(() =>
navRoutes.value.find(r => r.name === 'settings') || null
)
const health = computed(() => {
if (system.healthy === null) {
@@ -147,6 +168,13 @@ const health = computed(() => {
.fc-link.router-link-exact-active {
color: rgb(var(--v-theme-accent));
}
/* Settings: gear + label, pinned right of the content nav. */
.fc-link--settings {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.fc-nav-left {
flex: 1 1 0;
@@ -181,6 +209,8 @@ const health = computed(() => {
.fc-topnav { gap: 0.5rem; padding: 0.6rem 0.75rem; }
/* Fold the link row into the hamburger menu. */
.fc-links { display: none; }
/* Settings is in the hamburger menu on mobile (navRoutes includes it). */
.fc-link--settings { display: none; }
.fc-nav-burger { display: inline-flex; }
}
@media (max-width: 480px) {