EmilandClaude Sonnet 5
04c1cc5877
Adds a Russian version (data/resume.ru.json, default language) with an RU/EN switch stored under the key shared with the front page and the portfolio. The top bar becomes the site-wide one (brand, Resume, Portfolio, Gitea, Contact, language, theme) with a second row of anchors for this page's sections, and the fonts move to Unbounded and Onest so the three pages share one type system. Portfolio links now point at /portfolio/. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useLang } from '@/lib/useLang'
|
|
import styles from './topbar.module.css'
|
|
|
|
type Theme = 'dark' | 'light'
|
|
|
|
/** Switches between the dark (default) and light theme; the choice is remembered in this browser. */
|
|
export default function ThemeToggle() {
|
|
const [theme, setTheme] = useState<Theme>('dark')
|
|
const lang = useLang()
|
|
|
|
// The page starts dark; a small script in <head> applies a stored "light" choice before the first paint.
|
|
useEffect(() => {
|
|
setTheme(document.documentElement.dataset.theme === 'light' ? 'light' : 'dark')
|
|
}, [])
|
|
|
|
const toggle = () => {
|
|
const next: Theme = theme === 'dark' ? 'light' : 'dark'
|
|
document.documentElement.dataset.theme = next
|
|
try {
|
|
localStorage.setItem('theme', next)
|
|
} catch {
|
|
// Storage can be blocked; the theme still switches for this visit.
|
|
}
|
|
setTheme(next)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={styles.toggle}
|
|
onClick={toggle}
|
|
aria-label={
|
|
theme === 'dark'
|
|
? lang === 'ru' ? 'Включить светлую тему' : 'Switch to the light theme'
|
|
: lang === 'ru' ? 'Включить тёмную тему' : 'Switch to the dark theme'
|
|
}
|
|
>
|
|
{theme === 'dark' ? (
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="4" />
|
|
<path d="M12 2.5v2.2M12 19.3v2.2M4.2 4.2l1.6 1.6M18.2 18.2l1.6 1.6M2.5 12h2.2M19.3 12h2.2M4.2 19.8l1.6-1.6M18.2 5.8l1.6-1.6" />
|
|
</svg>
|
|
) : (
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M20.5 14.2A8.5 8.5 0 0 1 9.8 3.5a8.5 8.5 0 1 0 10.7 10.7z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|