Revert "Fix #4831 mobile header menu not working"

This reverts commit 4bd545c88e.

frontend/src/Router.tsx

@@ -1,6 +1,15 @@
 import { lazy, Suspense } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { ErrorNotFound, LoadingPage, Page, SiteContainer, SiteFooter, SiteHeader, Unhealthy } from "src/components";
+import {
+	ErrorNotFound,
+	LoadingPage,
+	Page,
+	SiteContainer,
+	SiteFooter,
+	SiteHeader,
+	SiteMenu,
+	Unhealthy,
+} from "src/components";
 import { useAuthState } from "src/context";
 import { useHealth } from "src/hooks";
 
@@ -46,6 +55,7 @@ function Router() {
 			<Page>
 				<div>
 					<SiteHeader />
+					<SiteMenu />
 				</div>
 				<SiteContainer>
 					<Suspense fallback={<LoadingPage noLogo />}>

frontend/src/components/SiteHeader.tsx

@@ -1,7 +1,5 @@
 import { IconLock, IconLogout, IconUser } from "@tabler/icons-react";
-import cs from "classnames";
-import { useState } from "react";
-import { LocalePicker, NavLink, SiteMenu, ThemeSwitcher } from "src/components";
+import { LocalePicker, NavLink, ThemeSwitcher } from "src/components";
 import { useAuthState } from "src/context";
 import { useUser } from "src/hooks";
 import { T } from "src/locale";
@@ -12,21 +10,18 @@ export function SiteHeader() {
 	const { data: currentUser } = useUser("me");
 	const isAdmin = currentUser?.roles.includes("admin");
 	const { logout } = useAuthState();
-	const [expanded, setExpanded] = useState(false);
 
 	return (
-		<>
 		<header className="navbar navbar-expand-md d-print-none">
 			<div className="container-xl">
 				<button
-						className={cs("navbar-toggler", { collapsed: !expanded })}
+					className="navbar-toggler"
 					type="button"
 					data-bs-toggle="collapse"
 					data-bs-target="#navbar-menu"
 					aria-controls="navbar-menu"
-						aria-expanded={expanded}
+					aria-expanded="false"
 					aria-label="Toggle navigation"
-						onClick={() => setExpanded(!expanded)}
 				>
 					<span className="navbar-toggler-icon" />
 				</button>
@@ -115,7 +110,5 @@ export function SiteHeader() {
 				</div>
 			</div>
 		</header>
-			<SiteMenu mobileExpanded={expanded} setMobileExpanded={setExpanded} />
-		</>
 	);
 }

frontend/src/components/SiteMenu.tsx

@@ -175,11 +175,7 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
 	);
 };
 
-interface Props {
-	mobileExpanded?: boolean;
-	setMobileExpanded?: (expanded: boolean) => void;
-}
-export function SiteMenu({ mobileExpanded = false, setMobileExpanded }: Props) {
+export function SiteMenu() {
 	// This is hacky AF. But that's the price of using a non-react UI kit.
 	const closeMenus = () => {
 		const navMenus = document.querySelectorAll(".nav-item.dropdown");
@@ -189,13 +185,12 @@ export function SiteMenu({ mobileExpanded = false, setMobileExpanded }: Props) {
 			if (dropdown) {
 				dropdown.classList.remove("show");
 			}
-			setMobileExpanded?.(false);
 		});
 	};
 
 	return (
 		<header className="navbar-expand-md">
-			<div className={cn("collapse", "navbar-collapse", { show: mobileExpanded })} id="navbar-menu">
+			<div className="collapse navbar-collapse">
 				<div className="navbar">
 					<div className="container-xl">
 						<div className="row flex-column flex-md-row flex-fill align-items-center">