Skip to content

Commit 2c26ed8

Browse files
jc21jc21
committed
Revert "Fix #4831 mobile header menu not working"
This reverts commit 4bd545c.
1 parent e3f5cd9 commit 2c26ed8

File tree

3 files changed

+104
-106
lines changed

3 files changed

+104
-106
lines changed

‎frontend/src/Router.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
import { lazy, Suspense } from "react";
22
import { BrowserRouter, Route, Routes } from "react-router-dom";
3-
import { ErrorNotFound, LoadingPage, Page, SiteContainer, SiteFooter, SiteHeader, Unhealthy } from "src/components";
3+
import {
4+
ErrorNotFound,
5+
LoadingPage,
6+
Page,
7+
SiteContainer,
8+
SiteFooter,
9+
SiteHeader,
10+
SiteMenu,
11+
Unhealthy,
12+
} from "src/components";
413
import { useAuthState } from "src/context";
514
import { useHealth } from "src/hooks";
615

@@ -46,6 +55,7 @@ function Router() {
4655
<Page>
4756
<div>
4857
<SiteHeader />
58+
<SiteMenu />
4959
</div>
5060
<SiteContainer>
5161
<Suspense fallback={<LoadingPage noLogo />}>

‎frontend/src/components/SiteHeader.tsx‎

Lines changed: 91 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { IconLock, IconLogout, IconUser } from "@tabler/icons-react";
2-
import cs from "classnames";
3-
import { useState } from "react";
4-
import { LocalePicker, NavLink, SiteMenu, ThemeSwitcher } from "src/components";
2+
import { LocalePicker, NavLink, ThemeSwitcher } from "src/components";
53
import { useAuthState } from "src/context";
64
import { useUser } from "src/hooks";
75
import { T } from "src/locale";
@@ -12,110 +10,105 @@ export function SiteHeader() {
1210
const { data: currentUser } = useUser("me");
1311
const isAdmin = currentUser?.roles.includes("admin");
1412
const { logout } = useAuthState();
15-
const [expanded, setExpanded] = useState(false);
1613

1714
return (
18-
<>
19-
<header className="navbar navbar-expand-md d-print-none">
20-
<div className="container-xl">
21-
<button
22-
className={cs("navbar-toggler", { collapsed: !expanded })}
23-
type="button"
24-
data-bs-toggle="collapse"
25-
data-bs-target="#navbar-menu"
26-
aria-controls="navbar-menu"
27-
aria-expanded={expanded}
28-
aria-label="Toggle navigation"
29-
onClick={() => setExpanded(!expanded)}
30-
>
31-
<span className="navbar-toggler-icon" />
32-
</button>
33-
<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
34-
<NavLink to="/">
35-
<div className={styles.logo}>
36-
<img
37-
src="/images/logo-no-text.svg"
38-
width={40}
39-
height={40}
40-
className="navbar-brand-image"
41-
alt="Logo"
42-
/>
43-
</div>
44-
Nginx Proxy Manager
45-
</NavLink>
46-
</div>
47-
<div className="navbar-nav flex-row order-md-last">
48-
<div className="d-none d-md-flex">
49-
<div className="nav-item">
50-
<LocalePicker />
51-
</div>
52-
<div className="nav-item">
53-
<ThemeSwitcher />
54-
</div>
15+
<header className="navbar navbar-expand-md d-print-none">
16+
<div className="container-xl">
17+
<button
18+
className="navbar-toggler"
19+
type="button"
20+
data-bs-toggle="collapse"
21+
data-bs-target="#navbar-menu"
22+
aria-controls="navbar-menu"
23+
aria-expanded="false"
24+
aria-label="Toggle navigation"
25+
>
26+
<span className="navbar-toggler-icon" />
27+
</button>
28+
<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
29+
<NavLink to="/">
30+
<div className={styles.logo}>
31+
<img
32+
src="/images/logo-no-text.svg"
33+
width={40}
34+
height={40}
35+
className="navbar-brand-image"
36+
alt="Logo"
37+
/>
5538
</div>
56-
<div className="nav-item d-none d-md-flex me-3">
57-
<div className="nav-item dropdown">
39+
Nginx Proxy Manager
40+
</NavLink>
41+
</div>
42+
<div className="navbar-nav flex-row order-md-last">
43+
<div className="d-none d-md-flex">
44+
<div className="nav-item">
45+
<LocalePicker />
46+
</div>
47+
<div className="nav-item">
48+
<ThemeSwitcher />
49+
</div>
50+
</div>
51+
<div className="nav-item d-none d-md-flex me-3">
52+
<div className="nav-item dropdown">
53+
<a
54+
href="/"
55+
className="nav-link d-flex lh-1 p-0 px-2"
56+
data-bs-toggle="dropdown"
57+
aria-label="Open user menu"
58+
>
59+
<span
60+
className="avatar avatar-sm"
61+
style={{
62+
backgroundImage: `url(${currentUser?.avatar || "/images/default-avatar.jpg"})`,
63+
}}
64+
/>
65+
<div className="d-none d-xl-block ps-2">
66+
<div>{currentUser?.nickname}</div>
67+
<div className="mt-1 small text-secondary">
68+
<T id={isAdmin ? "role.admin" : "role.standard-user"} />
69+
</div>
70+
</div>
71+
</a>
72+
<div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
5873
<a
59-
href="/"
60-
className="nav-link d-flex lh-1 p-0 px-2"
61-
data-bs-toggle="dropdown"
62-
aria-label="Open user menu"
74+
href="?"
75+
className="dropdown-item"
76+
onClick={(e) => {
77+
e.preventDefault();
78+
showUserModal("me");
79+
}}
6380
>
64-
<span
65-
className="avatar avatar-sm"
66-
style={{
67-
backgroundImage: `url(${currentUser?.avatar || "/images/default-avatar.jpg"})`,
68-
}}
69-
/>
70-
<div className="d-none d-xl-block ps-2">
71-
<div>{currentUser?.nickname}</div>
72-
<div className="mt-1 small text-secondary">
73-
<T id={isAdmin ? "role.admin" : "role.standard-user"} />
74-
</div>
75-
</div>
81+
<IconUser width={18} />
82+
<T id="user.edit-profile" />
83+
</a>
84+
<a
85+
href="?"
86+
className="dropdown-item"
87+
onClick={(e) => {
88+
e.preventDefault();
89+
showChangePasswordModal("me");
90+
}}
91+
>
92+
<IconLock width={18} />
93+
<T id="user.change-password" />
94+
</a>
95+
<div className="dropdown-divider" />
96+
<a
97+
href="?"
98+
className="dropdown-item"
99+
onClick={(e) => {
100+
e.preventDefault();
101+
logout();
102+
}}
103+
>
104+
<IconLogout width={18} />
105+
<T id="user.logout" />
76106
</a>
77-
<div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
78-
<a
79-
href="?"
80-
className="dropdown-item"
81-
onClick={(e) => {
82-
e.preventDefault();
83-
showUserModal("me");
84-
}}
85-
>
86-
<IconUser width={18} />
87-
<T id="user.edit-profile" />
88-
</a>
89-
<a
90-
href="?"
91-
className="dropdown-item"
92-
onClick={(e) => {
93-
e.preventDefault();
94-
showChangePasswordModal("me");
95-
}}
96-
>
97-
<IconLock width={18} />
98-
<T id="user.change-password" />
99-
</a>
100-
<div className="dropdown-divider" />
101-
<a
102-
href="?"
103-
className="dropdown-item"
104-
onClick={(e) => {
105-
e.preventDefault();
106-
logout();
107-
}}
108-
>
109-
<IconLogout width={18} />
110-
<T id="user.logout" />
111-
</a>
112-
</div>
113107
</div>
114108
</div>
115109
</div>
116110
</div>
117-
</header>
118-
<SiteMenu mobileExpanded={expanded} setMobileExpanded={setExpanded} />
119-
</>
111+
</div>
112+
</header>
120113
);
121114
}

‎frontend/src/components/SiteMenu.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -175,11 +175,7 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
175175
);
176176
};
177177

178-
interface Props {
179-
mobileExpanded?: boolean;
180-
setMobileExpanded?: (expanded: boolean) => void;
181-
}
182-
export function SiteMenu({ mobileExpanded = false, setMobileExpanded }: Props) {
178+
export function SiteMenu() {
183179
// This is hacky AF. But that's the price of using a non-react UI kit.
184180
const closeMenus = () => {
185181
const navMenus = document.querySelectorAll(".nav-item.dropdown");
@@ -189,13 +185,12 @@ export function SiteMenu({ mobileExpanded = false, setMobileExpanded }: Props) {
189185
if (dropdown) {
190186
dropdown.classList.remove("show");
191187
}
192-
setMobileExpanded?.(false);
193188
});
194189
};
195190

196191
return (
197192
<header className="navbar-expand-md">
198-
<div className={cn("collapse", "navbar-collapse", { show: mobileExpanded })} id="navbar-menu">
193+
<div className="collapse navbar-collapse">
199194
<div className="navbar">
200195
<div className="container-xl">
201196
<div className="row flex-column flex-md-row flex-fill align-items-center">

0 commit comments

Comments
 (0)