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

Revert "Fix #4831 mobile header menu not working"

Browse Source 
This reverts commit 4bd545c88e.
This commit is contained in:
Jamie Curnow
2025-11-11 15:35:34 +10:00
parent e3f5cd9a58
commit 2c26ed8b11
3 changed files with 105 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/Router.tsx
View File

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

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

@@ -175,11 +175,7 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
); );
}; };
interface Props { export function SiteMenu() {
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");
@@ -189,13 +185,12 @@ export function SiteMenu({ mobileExpanded = false, setMobileExpanded }: Props) {
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={cn("collapse", "navbar-collapse", { show: mobileExpanded })} id="navbar-menu"> <div className="collapse navbar-collapse">
<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">