Fix #4831 mobile header menu not working

frontend/src/Router.tsx

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

frontend/src/components/SiteHeader.tsx

@@ -1,5 +1,7 @@
 import { IconLock, IconLogout, IconUser } from "@tabler/icons-react";
-import { LocalePicker, NavLink, ThemeSwitcher } from "src/components";
+import cs from "classnames";
+import { useState } from "react";
+import { LocalePicker, NavLink, SiteMenu, ThemeSwitcher } from "src/components";
 import { useAuthState } from "src/context";
 import { useUser } from "src/hooks";
 import { T } from "src/locale";
@@ -10,105 +12,110 @@ 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="navbar-toggler"
-					type="button"
-					data-bs-toggle="collapse"
-					data-bs-target="#navbar-menu"
-					aria-controls="navbar-menu"
-					aria-expanded="false"
-					aria-label="Toggle navigation"
-				>
-					<span className="navbar-toggler-icon" />
-				</button>
-				<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
-					<NavLink to="/">
-						<div className={styles.logo}>
-							<img
-								src="/images/logo-no-text.svg"
-								width={40}
-								height={40}
-								className="navbar-brand-image"
-								alt="Logo"
-							/>
-						</div>
-						Nginx Proxy Manager
-					</NavLink>
-				</div>
-				<div className="navbar-nav flex-row order-md-last">
-					<div className="d-none d-md-flex">
-						<div className="nav-item">
-							<LocalePicker />
-						</div>
-						<div className="nav-item">
-							<ThemeSwitcher />
-						</div>
-					</div>
-					<div className="nav-item d-none d-md-flex me-3">
-						<div className="nav-item dropdown">
-							<a
-								href="/"
-								className="nav-link d-flex lh-1 p-0 px-2"
-								data-bs-toggle="dropdown"
-								aria-label="Open user menu"
-							>
-								<span
-									className="avatar avatar-sm"
-									style={{
-										backgroundImage: `url(${currentUser?.avatar || "/images/default-avatar.jpg"})`,
-									}}
+		<>
+			<header className="navbar navbar-expand-md d-print-none">
+				<div className="container-xl">
+					<button
+						className={cs("navbar-toggler", { collapsed: !expanded })}
+						type="button"
+						data-bs-toggle="collapse"
+						data-bs-target="#navbar-menu"
+						aria-controls="navbar-menu"
+						aria-expanded={expanded}
+						aria-label="Toggle navigation"
+						onClick={() => setExpanded(!expanded)}
+					>
+						<span className="navbar-toggler-icon" />
+					</button>
+					<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+						<NavLink to="/">
+							<div className={styles.logo}>
+								<img
+									src="/images/logo-no-text.svg"
+									width={40}
+									height={40}
+									className="navbar-brand-image"
+									alt="Logo"
 								/>
-								<div className="d-none d-xl-block ps-2">
-									<div>{currentUser?.nickname}</div>
-									<div className="mt-1 small text-secondary">
-										<T id={isAdmin ? "role.admin" : "role.standard-user"} />
+							</div>
+							Nginx Proxy Manager
+						</NavLink>
+					</div>
+					<div className="navbar-nav flex-row order-md-last">
+						<div className="d-none d-md-flex">
+							<div className="nav-item">
+								<LocalePicker />
+							</div>
+							<div className="nav-item">
+								<ThemeSwitcher />
+							</div>
+						</div>
+						<div className="nav-item d-none d-md-flex me-3">
+							<div className="nav-item dropdown">
+								<a
+									href="/"
+									className="nav-link d-flex lh-1 p-0 px-2"
+									data-bs-toggle="dropdown"
+									aria-label="Open user menu"
+								>
+									<span
+										className="avatar avatar-sm"
+										style={{
+											backgroundImage: `url(${currentUser?.avatar || "/images/default-avatar.jpg"})`,
+										}}
+									/>
+									<div className="d-none d-xl-block ps-2">
+										<div>{currentUser?.nickname}</div>
+										<div className="mt-1 small text-secondary">
+											<T id={isAdmin ? "role.admin" : "role.standard-user"} />
+										</div>
 									</div>
+								</a>
+								<div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+									<a
+										href="?"
+										className="dropdown-item"
+										onClick={(e) => {
+											e.preventDefault();
+											showUserModal("me");
+										}}
+									>
+										<IconUser width={18} />
+										<T id="user.edit-profile" />
+									</a>
+									<a
+										href="?"
+										className="dropdown-item"
+										onClick={(e) => {
+											e.preventDefault();
+											showChangePasswordModal("me");
+										}}
+									>
+										<IconLock width={18} />
+										<T id="user.change-password" />
+									</a>
+									<div className="dropdown-divider" />
+									<a
+										href="?"
+										className="dropdown-item"
+										onClick={(e) => {
+											e.preventDefault();
+											logout();
+										}}
+									>
+										<IconLogout width={18} />
+										<T id="user.logout" />
+									</a>
 								</div>
-							</a>
-							<div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
-								<a
-									href="?"
-									className="dropdown-item"
-									onClick={(e) => {
-										e.preventDefault();
-										showUserModal("me");
-									}}
-								>
-									<IconUser width={18} />
-									<T id="user.edit-profile" />
-								</a>
-								<a
-									href="?"
-									className="dropdown-item"
-									onClick={(e) => {
-										e.preventDefault();
-										showChangePasswordModal("me");
-									}}
-								>
-									<IconLock width={18} />
-									<T id="user.change-password" />
-								</a>
-								<div className="dropdown-divider" />
-								<a
-									href="?"
-									className="dropdown-item"
-									onClick={(e) => {
-										e.preventDefault();
-										logout();
-									}}
-								>
-									<IconLogout width={18} />
-									<T id="user.logout" />
-								</a>
 							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-		</header>
+			</header>
+			<SiteMenu mobileExpanded={expanded} setMobileExpanded={setExpanded} />
+		</>
 	);
 }

frontend/src/components/SiteMenu.tsx

@@ -175,7 +175,11 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
 	);
 };
 
-export function SiteMenu() {
+interface Props {
+	mobileExpanded?: boolean;
+	setMobileExpanded?: (expanded: boolean) => void;
+}
+export function SiteMenu({ mobileExpanded = false, setMobileExpanded }: Props) {
 	// 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");
@@ -185,12 +189,13 @@ export function SiteMenu() {
 			if (dropdown) {
 				dropdown.classList.remove("show");
 			}
+			setMobileExpanded?.(false);
 		});
 	};
 
 	return (
 		<header className="navbar-expand-md">
-			<div className="collapse navbar-collapse">
+			<div className={cn("collapse", "navbar-collapse", { show: mobileExpanded })} id="navbar-menu">
 				<div className="navbar">
 					<div className="container-xl">
 						<div className="row flex-column flex-md-row flex-fill align-items-center">