feat(pitch-deck): add day/night mode toggle to sidebar
All checks were successful
Build pitch-deck / build-push-deploy (push) Successful in 1m7s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 40s
CI / test-python-voice (push) Successful in 34s
CI / test-bqas (push) Successful in 34s
All checks were successful
Build pitch-deck / build-push-deploy (push) Successful in 1m7s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 40s
CI / test-python-voice (push) Successful in 34s
CI / test-bqas (push) Successful in 34s
- Theme toggle button below language toggle - Uses existing theme-light CSS class from globals.css - Moon/Sun icons with Nacht/Tag labels (DE) or Dark/Light (EN) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { useState, useCallback } from 'react'
|
import { useState, useCallback } from 'react'
|
||||||
import { motion, AnimatePresence } from 'framer-motion'
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
import { Menu, X, Maximize, Minimize, Bot } from 'lucide-react'
|
import { Menu, X, Maximize, Minimize, Bot, Sun, Moon } from 'lucide-react'
|
||||||
import { Language } from '@/lib/types'
|
import { Language } from '@/lib/types'
|
||||||
import { t } from '@/lib/i18n'
|
import { t } from '@/lib/i18n'
|
||||||
|
|
||||||
@@ -25,6 +25,15 @@ export default function NavigationFAB({
|
|||||||
}: NavigationFABProps) {
|
}: NavigationFABProps) {
|
||||||
const [isOpen, setIsOpen] = useState(false)
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||||
|
const [isLightMode, setIsLightMode] = useState(false)
|
||||||
|
|
||||||
|
const toggleTheme = useCallback(() => {
|
||||||
|
setIsLightMode(prev => {
|
||||||
|
const next = !prev
|
||||||
|
document.documentElement.classList.toggle('theme-light', next)
|
||||||
|
return next
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
const i = t(lang)
|
const i = t(lang)
|
||||||
|
|
||||||
const toggleFullscreen = useCallback(() => {
|
const toggleFullscreen = useCallback(() => {
|
||||||
@@ -138,6 +147,23 @@ export default function NavigationFAB({
|
|||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{/* Theme Toggle */}
|
||||||
|
<button
|
||||||
|
onClick={toggleTheme}
|
||||||
|
className="w-full flex items-center justify-between px-3 py-2 rounded-lg
|
||||||
|
bg-white/[0.05] hover:bg-white/[0.1] transition-colors text-sm"
|
||||||
|
>
|
||||||
|
<span className="text-white/50">{lang === 'de' ? 'Modus' : 'Mode'}</span>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span className={`px-2 py-0.5 rounded text-xs font-medium flex items-center gap-1 ${!isLightMode ? 'bg-indigo-500 text-white' : 'text-white/40'}`}>
|
||||||
|
<Moon className="w-3 h-3" /> {lang === 'de' ? 'Nacht' : 'Dark'}
|
||||||
|
</span>
|
||||||
|
<span className={`px-2 py-0.5 rounded text-xs font-medium flex items-center gap-1 ${isLightMode ? 'bg-amber-500 text-white' : 'text-white/40'}`}>
|
||||||
|
<Sun className="w-3 h-3" /> {lang === 'de' ? 'Tag' : 'Light'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
{/* Fullscreen */}
|
{/* Fullscreen */}
|
||||||
<button
|
<button
|
||||||
onClick={toggleFullscreen}
|
onClick={toggleFullscreen}
|
||||||
|
|||||||
Reference in New Issue
Block a user