feat: založení základní stránky příjem/výdej + import a statistiky

client/src/components/Header.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { Navbar, Nav, NavDropdown } from "react-bootstrap";
+import { useLocation, useNavigate } from "react-router";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon, faGear } from "@fortawesome/free-solid-svg-icons";
+import { useAuth } from "../context/auth";
+import { useSettings, ThemePreference } from "../context/settings";
+import { DEN_URL, STATISTIKY_URL } from "../routes";
+import SettingsModal from "./modals/SettingsModal";
+
+/** Položky hlavní navigace. */
+const NAV_ITEMS = [
+    { url: DEN_URL, label: 'Můj den' },
+    { url: STATISTIKY_URL, label: 'Statistiky' },
+];
+
+export default function Header() {
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const auth = useAuth();
+    const settings = useSettings();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const effectiveDark = settings?.effectiveDark ?? false;
+
+    const toggleTheme = () => {
+        const next: ThemePreference = effectiveDark ? 'light' : 'dark';
+        settings?.setThemePreference(next);
+    };
+
+    return (
+        <Navbar variant="dark" expand="lg">
+            <Navbar.Brand href={DEN_URL}>Food Tracer</Navbar.Brand>
+            <Navbar.Toggle aria-controls="main-navbar-nav" />
+            <Navbar.Collapse id="main-navbar-nav">
+                <Nav className="nav">
+                    {NAV_ITEMS.map(item => (
+                        <button
+                            key={item.url}
+                            className={`nav-pill ${location.pathname === item.url ? 'active' : ''}`}
+                            onClick={() => navigate(item.url)}
+                        >
+                            {item.label}
+                        </button>
+                    ))}
+                    <button
+                        className="theme-toggle"
+                        onClick={toggleTheme}
+                        title={effectiveDark ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
+                        aria-label="Přepnout světlý/tmavý režim"
+                    >
+                        <FontAwesomeIcon icon={effectiveDark ? faSun : faMoon} />
+                    </button>
+                    <NavDropdown align="end" title={auth?.login} id="user-nav-dropdown">
+                        <NavDropdown.Item onClick={() => navigate(DEN_URL)}>Můj den</NavDropdown.Item>
+                        <NavDropdown.Item onClick={() => navigate(STATISTIKY_URL)}>Statistiky</NavDropdown.Item>
+                        <NavDropdown.Item onClick={() => setSettingsOpen(true)}>
+                            <FontAwesomeIcon icon={faGear} /> Nastavení
+                        </NavDropdown.Item>
+                        <NavDropdown.Divider />
+                        <NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item>
+                    </NavDropdown>
+                </Nav>
+            </Navbar.Collapse>
+            <SettingsModal isOpen={settingsOpen} onClose={() => setSettingsOpen(false)} />
+        </Navbar>
+    );
+}