Skip to content

Commit 4bd545c

Browse files
jc21jc21
committed
Fix #4831 mobile header menu not working
1 parent 7f0cce9 commit 4bd545c

File tree

3 files changed

+106
-104
lines changed

3 files changed

+106
-104
lines changed

‎frontend/src/Router.tsx‎

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

@@ -55,7 +46,6 @@ function Router() {
5546
<Page>
5647
<div>
5748
<SiteHeader />
58-
<SiteMenu />
5949
</div>
6050
<SiteContainer>
6151
<Suspense fallback={<LoadingPage noLogo />}>

‎frontend/src/components/SiteHeader.tsx‎

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

1417
return (
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-
/>
38-
</div>
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-
}}
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"
6442
/>
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">
73-
<a
74-
href="?"
75-
className="dropdown-item"
76-
onClick={(e) => {
77-
e.preventDefault();
78-
showUserModal("me");
79-
}}
80-
>
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" />
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>
55+
</div>
56+
<div className="nav-item d-none d-md-flex me-3">
57+
<div className="nav-item dropdown">
9658
<a
97-
href="?"
98-
className="dropdown-item"
99-
onClick={(e) => {
100-
e.preventDefault();
101-
logout();
102-
}}
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"
10363
>
104-
<IconLogout width={18} />
105-
<T id="user.logout" />
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>
10676
</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>
107113
</div>
108114
</div>
109115
</div>
110116
</div>
111-
</div>
112-
</header>
117+
</header>
118+
<SiteMenu mobileExpanded={expanded} setMobileExpanded={setExpanded} />
119+
</>
113120
);
114121
}

‎frontend/src/components/SiteMenu.tsx‎

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

178-
export function SiteMenu() {
178+
interface Props {
179+
mobileExpanded?: boolean;
180+
setMobileExpanded?: (expanded: boolean) => void;
181+
}
182+
export function SiteMenu({ mobileExpanded = false, setMobileExpanded }: Props) {
179183
// This is hacky AF. But that's the price of using a non-react UI kit.
180184
const closeMenus = () => {
181185
const navMenus = document.querySelectorAll(".nav-item.dropdown");
@@ -185,12 +189,13 @@ export function SiteMenu() {
185189
if (dropdown) {
186190
dropdown.classList.remove("show");
187191
}
192+
setMobileExpanded?.(false);
188193
});
189194
};
190195

191196
return (
192197
<header className="navbar-expand-md">
193-
<div className="collapse navbar-collapse">
198+
<div className={cn("collapse", "navbar-collapse", { show: mobileExpanded })} id="navbar-menu">
194199
<div className="navbar">
195200
<div className="container-xl">
196201
<div className="row flex-column flex-md-row flex-fill align-items-center">

0 commit comments

Comments
 (0)