feat: theme toggle

apps/web/app/components/ui/Navigation/Navigation.tsx

@@ -10,6 +10,7 @@ import {
 import { Brand } from "./Brand";
 import { DesktopNav } from "./DesktopNav";
 import { MobileNav } from "./MobileNav";
+import { ThemeToggle } from "./ThemeToggle";
 import { getDefaultNavItems, getNavigationStrings } from "./nav-items";
 import { cx } from "./styles";
 import type { NavItem, NavigationStrings, NavSurface } from "./types";
@@ -53,9 +54,10 @@ export interface NavigationProps {
  * and the whole tree moves into a full-screen drawer.
  *
  * EU VISIBILITY: the updated design has no funding badge in the bar - the
- * Actions slot holds the language globe alone. The mandatory "Funded by the
- * European Union" lockup is carried by <Footer />, which renders on every page,
- * and by the mobile drawer; it is not dropped from the site.
+ * Actions slot holds the language globe and the theme toggle. The mandatory
+ * "Funded by the European Union" lockup is carried by <Footer />, which
+ * renders on every page, and by the mobile drawer; it is not dropped from the
+ * site.
  */
 export function Navigation({
   locale = "en",
@@ -148,6 +150,11 @@ export function Navigation({
             </div>
           )}
 
+          {/* The theme control sits with the other actions at every breakpoint:
+              after the (desktop-only) language cluster on wide screens, beside
+              the hamburger on a compact bar. */}
+          <ThemeToggle locale={locale} />
+
           <MobileNav
             items={navItems}
             pathname={pathname}