antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ensure game names persist in navigation on page reload

Browse Source 
Remove hydration dependency for route-based theme detection:
- Game names now display immediately on page load/reload
- Route-based theme backgrounds apply without waiting for hydration
- Maintains SSR compatibility while fixing reload persistence

Game names and themed navigation now work consistently across all scenarios.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-28 12:23:37 -05:00
parent 3dcff2ff88
commit 9191b12493
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/components/AppNavBar.tsx
View File

@@ -42,8 +42,8 @@ export function AppNavBar({ variant = 'full' }: AppNavBarProps) {
// Helper function to get themed background colors
const getThemedBackground = (opacity: number = 0.85) => {
// Only apply theming after hydration to prevent SSR/client mismatch
if (isHydrated && currentTheme?.backgroundColor) {
// Apply theming for route-based themes immediately, or after hydration for context themes
if (currentTheme?.backgroundColor && (getRouteBasedTheme() || isHydrated)) {
const color = currentTheme.backgroundColor
if (color.startsWith('#')) {
// Convert hex to rgba
@@ -111,7 +111,7 @@ export function AppNavBar({ variant = 'full' }: AppNavBarProps) {
alignItems: 'center',
gap: '12px',
padding: '8px 16px',
background: isHydrated && currentTheme ? getThemedBackground(0.85) : 'rgba(0, 0, 0, 0.85)',
background: currentTheme ? getThemedBackground(0.85) : 'rgba(0, 0, 0, 0.85)',
border: '1px solid rgba(255, 255, 255, 0.1)',
borderRadius: '8px',
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
@@ -125,7 +125,7 @@ export function AppNavBar({ variant = 'full' }: AppNavBarProps) {
backgroundClip: 'text',
color: 'transparent'
})}>
🕹️ {(isHydrated && currentTheme?.gameName) || (isArcadePage ? 'Arcade' : 'Game')}
🕹️ {currentTheme?.gameName || (isArcadePage ? 'Arcade' : 'Game')}
</h1>
<div className={css({
px: '2',
@@ -149,7 +149,7 @@ export function AppNavBar({ variant = 'full' }: AppNavBarProps) {
alignItems: 'center',
gap: '8px',
padding: '8px 12px',
background: isHydrated && currentTheme ? getThemedBackground(isFullscreen ? 0.85 : 1) : (isFullscreen ? 'rgba(0, 0, 0, 0.85)' : 'white'),
background: currentTheme ? getThemedBackground(isFullscreen ? 0.85 : 1) : (isFullscreen ? 'rgba(0, 0, 0, 0.85)' : 'white'),
border: isFullscreen ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid #e5e7eb',
borderRadius: '8px',
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
@@ -198,7 +198,7 @@ export function AppNavBar({ variant = 'full' }: AppNavBarProps) {
alignItems: 'center',
gap: '8px',
padding: '8px 12px',
background: isHydrated && currentTheme ? getThemedBackground(isFullscreen ? 0.85 : 1) : (isFullscreen ? 'rgba(0, 0, 0, 0.85)' : 'white'),
background: currentTheme ? getThemedBackground(isFullscreen ? 0.85 : 1) : (isFullscreen ? 'rgba(0, 0, 0, 0.85)' : 'white'),
border: isFullscreen ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid #e5e7eb',
borderRadius: '8px',
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',