fix: split umožní hledat i v prvním sloupci, kopírují se i podrobné hodnoty

fix: tlačítka z headeru jdou i přes kolečko
feat: nový mode zobrazení

client/src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Navbar, Nav, NavDropdown } from "react-bootstrap";
-import { useLocation, useNavigate } from "react-router";
+import { Link, useLocation } from "react-router";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSun, faMoon, faGear } from "@fortawesome/free-solid-svg-icons";
 import { useAuth } from "../context/auth";
@@ -21,7 +21,6 @@ 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;
@@ -37,18 +36,18 @@ export default function Header() {
 
     return (
         <Navbar variant="dark" expand="lg">
-            <Navbar.Brand href={DEN_URL}>Food Tracer</Navbar.Brand>
+            <Navbar.Brand as={Link} to={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
+                        <Link
                             key={item.url}
+                            to={item.url}
                             className={`nav-pill ${isActive(item.url) ? 'active' : ''}`}
-                            onClick={() => navigate(item.url)}
                         >
                             {item.label}
-                        </button>
+                        </Link>
                     ))}
                     <button
                         className="theme-toggle"