Skip to content

Commit b7e50f4

Browse files
krsnapaudelkrsnapaudel
committed
fix mobile mode
1 parent 36abc76 commit b7e50f4

File tree

3 files changed

+175
-15
lines changed

3 files changed

+175
-15
lines changed

‎frontend/src/pages/Dashboard.tsx

+46-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { lazy, Suspense } from "react";
1+
import { lazy, Suspense, useState } from "react";
22
import { Link, useLocation } from "react-router-dom";
33
import { useNetworkStatus } from "../hooks/useNetworkStatus";
44
import { usePaymasterWallets } from "../hooks/usePaymasterWallets";
@@ -11,6 +11,10 @@ const Bridge = lazy(() => import("./Bridge"));
1111
const Usage = lazy(() => import("./Usage"));
1212

1313
export default function Dashboard() {
14+
const [isMenuOpen, setMenuOpen] = useState(false);
15+
const toggleMenu = () => {
16+
setMenuOpen((prev) => !prev);
17+
};
1418
const { pathname } = useLocation(); // Get current URL path
1519
const { data, isLoading, error } = useNetworkStatus();
1620
const { data: wallets, isLoading: bal_isLoading, error: bal_error } = usePaymasterWallets();
@@ -19,16 +23,50 @@ export default function Dashboard() {
1923
<div className="dashboard">
2024
<div className="sidebar">
2125
{/* Logo Wrapper */}
22-
<a href="/" className="logoWrapper">
23-
<div className="logoSvg">
26+
<a href="/" className="logo-wrapper">
27+
<div className="logo-svg">
2428
<img src="/Strata_full_logo_sand.png" alt="STRATA" />
2529
</div>
2630
</a>
27-
{/* Menu */}
28-
<div className="menu">
29-
<Link to="/" className={`menu-item ${pathname === "/" ? "active" : ""}`}>Network</Link>
30-
<Link to="/bridge" className={`menu-item ${pathname === "/bridge" ? "active" : ""}`}>Bridge</Link>
31-
<Link to="/usage" className={`menu-item ${pathname === "/usage" ? "active" : ""}`}>Activity</Link>
31+
{/* Hamburger / Cross toggle — only shown on mobile */}
32+
<div className="menu-button" onClick={toggleMenu}>
33+
{isMenuOpen ? (
34+
<div className="cross">
35+
<div className="cross-bar"></div>
36+
<div className="cross-bar"></div>
37+
</div>
38+
) : (
39+
<div className="hamburger">
40+
<div className="hamburger-bar"></div>
41+
<div className="hamburger-bar"></div>
42+
<div className="hamburger-bar"></div>
43+
</div>
44+
)}
45+
</div>
46+
47+
{/* Responsive menu dropdown (mobile) */}
48+
<div className={`navbar-menu-wrapper ${isMenuOpen ? "show-menu" : ""}`}>
49+
<Link
50+
to="/"
51+
className={`menu-item ${pathname === "/" ? "active" : ""}`}
52+
onClick={() => setMenuOpen(false)}
53+
>
54+
Network
55+
</Link>
56+
<Link
57+
to="/bridge"
58+
className={`menu-item ${pathname === "/bridge" ? "active" : ""}`}
59+
onClick={() => setMenuOpen(false)}
60+
>
61+
Bridge
62+
</Link>
63+
<Link
64+
to="/usage"
65+
className={`menu-item ${pathname === "/usage" ? "active" : ""}`}
66+
onClick={() => setMenuOpen(false)}
67+
>
68+
Activity
69+
</Link>
3270
</div>
3371
</div>
3472

‎frontend/src/styles/bridge.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
.operators-table,
2727
.transactions-table {
28-
min-width: 800px;
28+
min-width: 768px;
2929
width: auto;
3030
border-collapse: collapse;
3131
}

‎frontend/src/styles/index.css

+128-6
Original file line numberDiff line numberDiff line change
@@ -79,21 +79,51 @@ main {
7979

8080
.sidebar {
8181
width: 15%;
82-
min-height: 100vh;
82+
min-height: 120vh;
8383
background-color: var(--strata-terracotta-med);
8484
color: var(--strata-sand-light);
8585
padding: 20px;
8686
display: flex;
8787
flex-direction: column;
8888
align-items: center;
8989
margin: 0;
90+
position: relative;
91+
}
92+
93+
.hamburger {
94+
display: none;
95+
font-size: 36px;
96+
color: var(--strata-sand-light);
97+
background: none;
98+
border: none;
99+
padding: 0;
100+
cursor: pointer;
101+
margin: 0 20px;
102+
}
103+
104+
.cross {
105+
display: none;
106+
font-size: 36px;
107+
background: var(--strata-terracotta-med);
108+
color: white;
109+
cursor: pointer;
110+
margin: 0 20px;
111+
padding: 0;
90112
}
91113

92114
.content {
93115
flex-grow: 1;
94116
padding: 40px;
95117
}
96118

119+
.navbar-menu-wrapper {
120+
display: flex;
121+
flex-direction: column;
122+
align-items: center;
123+
gap: 1rem;
124+
padding-top: 40px;
125+
}
126+
97127
.menu {
98128
margin-top: 100px;
99129
display: flex;
@@ -104,7 +134,6 @@ main {
104134
.menu-item {
105135
color: var(--strata-sand-light);
106136
margin: 0.5rem 0;
107-
padding-top: 5px;
108137
padding-bottom: 5px;
109138
}
110139

@@ -114,19 +143,25 @@ main {
114143
padding-bottom: 5px;
115144
}
116145

117-
.logoWrapper {
146+
.menu-button {
147+
display: none;
148+
cursor: pointer;
149+
margin-right: 16px;
150+
}
151+
152+
.logo-wrapper {
118153
max-width: 80%;
119154
}
120155

121-
.logoSvg {
156+
.logo-svg {
122157
display: flex;
123158
align-items: center;
124159
justify-content: center;
125160
}
126161

127-
.logoSvg img {
162+
.logo-svg img {
128163
max-width: 80%;
129-
min-width: 100px;
164+
min-width: 80px;
130165
height: auto;
131166
}
132167

@@ -147,3 +182,90 @@ main {
147182
background-color: var(--strata-terracotta-med);
148183
}
149184
}
185+
186+
@media screen and (max-width: 768px) {
187+
html, body, #root, .content {
188+
overflow-x: hidden;
189+
padding-right: 0;
190+
padding-left: 0;
191+
}
192+
193+
.dashboard {
194+
flex-direction: column;
195+
}
196+
197+
.sidebar {
198+
width: 100%;
199+
min-height: auto;
200+
flex-direction: row;
201+
justify-content: space-between;
202+
align-items: center;
203+
padding: 10px 16px;
204+
}
205+
206+
.logo-wrapper {
207+
max-width: 40%;
208+
}
209+
210+
.menu-button {
211+
display: flex;
212+
color: white;
213+
margin-right: 16px; /* ✅ spacing to right */
214+
}
215+
216+
.hamburger {
217+
display: flex;
218+
flex-direction: column;
219+
gap: 5px;
220+
}
221+
222+
.hamburger-bar {
223+
width: 25px;
224+
height: 3px;
225+
background-color: var(--strata-sand-light);
226+
border-radius: 2px;
227+
}
228+
229+
.cross {
230+
position: relative;
231+
width: 25px;
232+
height: 25px;
233+
display: flex;
234+
justify-content: center;
235+
align-items: center;
236+
}
237+
238+
.cross-bar {
239+
position: absolute;
240+
width: 25px;
241+
height: 3px;
242+
background-color: var(--strata-sand-light);
243+
border-radius: 2px;
244+
}
245+
246+
.cross-bar:first-child {
247+
transform: rotate(45deg);
248+
}
249+
250+
.cross-bar:last-child {
251+
transform: rotate(-45deg);
252+
}
253+
254+
.navbar-menu-wrapper {
255+
display: none;
256+
flex-direction: column;
257+
align-items: center;
258+
position: absolute;
259+
top: 74px;
260+
left: 0;
261+
width: 100%;
262+
background-color: var(--strata-terracotta-med);
263+
z-index: 10;
264+
padding: 20px 0;
265+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
266+
}
267+
268+
.navbar-menu-wrapper.show-menu {
269+
display: flex;
270+
}
271+
}

0 commit comments

Comments
 (0)