feat(nav): pin Settings to the right edge, separated from content nav
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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user