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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user