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

- 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:
Benjamin Admin
2026-04-15 23:58:48 +02:00
parent 91b5ce990f
commit 2b9788bdb0

View File

@@ -2,7 +2,7 @@
import { useState, useCallback } from 'react'
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 { t } from '@/lib/i18n'
@@ -25,6 +25,15 @@ export default function NavigationFAB({
}: NavigationFABProps) {
const [isOpen, setIsOpen] = 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 toggleFullscreen = useCallback(() => {
@@ -138,6 +147,23 @@ export default function NavigationFAB({
</div>
</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 */}
<button
onClick={toggleFullscreen}