jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: resolve sidebar nav hydration mismatch and admin events 500 error

Browse source 
Wrap auth-dependent sidebar navigation and meta in ClientOnly with
SSR fallback slots to prevent hydration mismatch that caused all
authenticated nav links to point to wrong pages. Fix admin events
page crash by replacing empty string USelect values with 'all'.
This commit is contained in:
Jennie Robinson Faber 2026-04-03 09:24:29 +01:00
parent 27d8f678ad
commit f16f9ada64
3 changed files with 181 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

180
app/components/AppNavigation.vue
View file

@ -7,85 +7,123 @@
<!-- Navigation sections -->
<div class="sidebar-body">
<template v-if="isAuthenticated">
<!-- Logged-in nav -->
<div class="sidebar-section">You</div>
<ul class="sidebar-nav">
<li v-for="item in youItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
<ClientOnly>
<template v-if="isAuthenticated">
<!-- Logged-in nav -->
<div class="sidebar-section">You</div>
<ul class="sidebar-nav">
<li v-for="item in youItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
<div class="sidebar-section">Explore</div>
<ul class="sidebar-nav">
<li v-for="item in exploreItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
<div class="sidebar-section">Explore</div>
<ul class="sidebar-nav">
<li v-for="item in exploreItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
<div class="sidebar-section">Community</div>
<ul class="sidebar-nav">
<li v-for="item in communityItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
</template>
<div class="sidebar-section">Community</div>
<ul class="sidebar-nav">
<li v-for="item in communityItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
</template>
<template v-else>
<!-- Public nav -->
<div class="sidebar-section">Navigate</div>
<ul class="sidebar-nav">
<li v-for="item in publicItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
<template v-else>
<!-- Public nav -->
<div class="sidebar-section">Navigate</div>
<ul class="sidebar-nav">
<li v-for="item in publicItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
<div class="sidebar-section">Join</div>
<ul class="sidebar-nav">
<li v-for="item in joinItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
</template>
<div class="sidebar-section">Join</div>
<ul class="sidebar-nav">
<li v-for="item in joinItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
</template>
<template #fallback>
<!-- Public nav (SSR fallback) -->
<div class="sidebar-section">Navigate</div>
<ul class="sidebar-nav">
<li v-for="item in publicItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
<div class="sidebar-section">Join</div>
<ul class="sidebar-nav">
<li v-for="item in joinItems" :key="item.path">
<NuxtLink
:to="item.path"
:class="{ active: isActive(item.path) }"
@click="handleNavigate"
>{{ item.label }}</NuxtLink>
</li>
</ul>
</template>
</ClientOnly>
</div>
<!-- Meta at bottom -->
<div class="sidebar-meta">
<template v-if="isAuthenticated">
<span class="member-name">{{ memberData?.name || 'Member' }}</span><br>
<span
v-if="memberData?.circle"
class="member-circle"
:style="{ color: `var(--c-${memberData.circle})` }"
>{{ memberData.circle }}</span>
<br v-if="memberData?.circle">
<a href="#" @click.prevent="handleLogout">Sign out</a>
</template>
<template v-else>
Part of <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br>
A Canadian nonprofit<br>
<a href="#" @click.prevent="openLogin">Sign in</a>
</template>
<ClientOnly>
<template v-if="isAuthenticated">
<span class="member-name">{{ memberData?.name || 'Member' }}</span><br>
<span
v-if="memberData?.circle"
class="member-circle"
:style="{ color: `var(--c-${memberData.circle})` }"
>{{ memberData.circle }}</span>
<br v-if="memberData?.circle">
<a href="#" @click.prevent="handleLogout">Sign out</a>
</template>
<template v-else>
Part of <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br>
A Canadian nonprofit<br>
<a href="#" @click.prevent="openLogin">Sign in</a>
</template>
<template #fallback>
Part of <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br>
A Canadian nonprofit<br>
<a href="#" @click.prevent="openLogin">Sign in</a>
</template>
</ClientOnly>
<ClientOnly>
<ColorModeToggle />
</ClientOnly>
</div>
</aside>
</template>