ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-11-11 04:45:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix #4831 mobile header menu not working

Browse Source
This commit is contained in:
Jamie Curnow
2025-11-11 14:05:26 +10:00
parent 7f0cce944d
commit 4bd545c88e
3 changed files with 107 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/Router.tsx
View File

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

191
frontend/src/components/SiteHeader.tsx
View File

@@ -1,5 +1,7 @@
import { IconLock, IconLogout, IconUser } from "@tabler/icons-react"; 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 { useAuthState } from "src/context";
import { useUser } from "src/hooks"; import { useUser } from "src/hooks";
import { T } from "src/locale"; import { T } from "src/locale";
@@ -10,105 +12,110 @@ export function SiteHeader() {
const { data: currentUser } = useUser("me"); const { data: currentUser } = useUser("me");
const isAdmin = currentUser?.roles.includes("admin"); const isAdmin = currentUser?.roles.includes("admin");
const { logout } = useAuthState(); const { logout } = useAuthState();
const [expanded, setExpanded] = useState(false);
return ( return (
<header className="navbar navbar-expand-md d-print-none"> <>
<div className="container-xl"> <header className="navbar navbar-expand-md d-print-none">
<button <div className="container-xl">
className="navbar-toggler" <button
type="button" className={cs("navbar-toggler", { collapsed: !expanded })}
data-bs-toggle="collapse" type="button"
data-bs-target="#navbar-menu" data-bs-toggle="collapse"
aria-controls="navbar-menu" data-bs-target="#navbar-menu"
aria-expanded="false" aria-controls="navbar-menu"
aria-label="Toggle navigation" aria-expanded={expanded}
> aria-label="Toggle navigation"
<span className="navbar-toggler-icon" /> onClick={() => setExpanded(!expanded)}
</button> >
<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3"> <span className="navbar-toggler-icon" />
<NavLink to="/"> </button>
<div className={styles.logo}> <div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<img <NavLink to="/">
src="/images/logo-no-text.svg" <div className={styles.logo}>
width={40} <img
height={40} src="/images/logo-no-text.svg"
className="navbar-brand-image" width={40}
alt="Logo" height={40}
/> className="navbar-brand-image"
</div> alt="Logo"
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>
<div>{currentUser?.nickname}</div> Nginx Proxy Manager
<div className="mt-1 small text-secondary"> </NavLink>
<T id={isAdmin ? "role.admin" : "role.standard-user"} /> </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> </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>
</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> </div>
</div> </div>
</div> </header>
</header> <SiteMenu mobileExpanded={expanded} setMobileExpanded={setExpanded} />
</>
); );
} }

9
frontend/src/components/SiteMenu.tsx
View File

@@ -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. // This is hacky AF. But that's the price of using a non-react UI kit.
const closeMenus = () => { const closeMenus = () => {
const navMenus = document.querySelectorAll(".nav-item.dropdown"); const navMenus = document.querySelectorAll(".nav-item.dropdown");
@@ -185,12 +189,13 @@ export function SiteMenu() {
if (dropdown) { if (dropdown) {
dropdown.classList.remove("show"); dropdown.classList.remove("show");
} }
setMobileExpanded?.(false);
}); });
}; };
return ( return (
<header className="navbar-expand-md"> <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="navbar">
<div className="container-xl"> <div className="container-xl">
<div className="row flex-column flex-md-row flex-fill align-items-center"> <div className="row flex-column flex-md-row flex-fill align-items-center">