orario/src/components/HamburgerMenu.jsx

import { ComboBox } from './ComboBox.jsx'
import { MODE_COURSE, MODE_WORKWEEK } from './EventsView.jsx'
import { Help } from './Help.jsx'
import { Icon } from './Icon.jsx'

export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme, setTheme }) => {
    return (
        <div class="menu">
            <div class="header">
                <div class="option-group">
                    <button class="flat icon" onClick={onClose}>
                        <Icon name="close" />
                    </button>
                    <button
                        class="icon"
                        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                    >
                        <Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
                    </button>
                </div>
                <div class="item logo">
                    <img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
                </div>
            </div>
            <div class="options">
                <div class="label">Gruppo Corsi</div>
                <ComboBox
                    value={source}
                    setValue={setSource}
                    options={[
                        { value: 'anno-1', label: 'I' },
                        { value: 'anno-2', label: 'II' },
                        { value: 'anno-3', label: 'III' },
                        { value: 'magistrale', label: 'Magistrale' },
                        { value: 'tutti', label: 'Tutti' },
                    ]}
                />
                <div class="label">Visualizzazione</div>
                <ComboBox
                    value={mode}
                    setValue={setMode}
                    options={[
                        { value: MODE_COURSE, label: 'Corsi' },
                        { value: MODE_WORKWEEK, label: 'Settimana' },
                    ]}
                />
            </div>
            <hr />
            <div class="help">
                <h2>
                    <Icon name="info" />
                    Guida
                </h2>
                <Help />
            </div>
        </div>
    )
}