Add persistent language switcher across all learn/parent pages

useNativeLanguage: Now has setNativeLang() that persists to localStorage.
Language selection carries across all pages automatically.

LanguageSwitcher: Compact dropdown component added to learn/layout.tsx
and parent/layout.tsx — visible on every sub-page (top-right).

Parent portal: Language dropdown syncs both UI language and native
language. Parents can switch language mid-session (e.g. when both
parents speak different languages).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-27 09:23:01 +02:00
parent d8771bb509
commit 5012699aaf
5 changed files with 108 additions and 23 deletions

View File

@@ -2,13 +2,16 @@
import { Sidebar } from '@/components/Sidebar'
import { useTheme } from '@/lib/ThemeContext'
import { useNativeLanguage } from '@/lib/useNativeLanguage'
import { LanguageSwitcher } from '@/components/learn/LanguageSwitcher'
/**
* Shared layout for ALL /parent/* pages.
* Same design as learn layout — Sidebar + gradient.
* Same design as learn layout — Sidebar + gradient + language switcher.
*/
export default function ParentLayout({ children }: { children: React.ReactNode }) {
const { isDark } = useTheme()
const { nativeLang, setNativeLang } = useNativeLanguage()
return (
<div className={`min-h-screen flex relative overflow-hidden ${
@@ -20,6 +23,14 @@ export default function ParentLayout({ children }: { children: React.ReactNode }
<Sidebar />
</div>
<div className="flex-1 flex flex-col relative z-10 overflow-y-auto scrollbar-hide" style={{ scrollbarWidth: 'none' }}>
{/* Sticky language switcher at top-right */}
<div className="sticky top-0 z-20 flex justify-end px-4 py-2">
<LanguageSwitcher
currentLang={nativeLang}
onLangChange={setNativeLang}
isDark={isDark}
/>
</div>
{children}
</div>
</div>