Skip to content

Commit 8fd8f55

Browse files
ffreddowffreddow
committed
frontend: fix navbar highlighting
1 parent 2523664 commit 8fd8f55

File tree

3 files changed

+121
-78
lines changed

3 files changed

+121
-78
lines changed

‎frontend/src/components/Navbar.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export function setAppNavigation() {
5252
}
5353

5454
export function CustomNavbar() {
55-
const { url } = useLocation();
55+
const { path } = useLocation();
5656
const [expanded, setExpanded] = useState(false);
5757
const {t} = useTranslation("", {useSuspense: false, keyPrefix: "navbar"});
5858

@@ -66,27 +66,27 @@ export function CustomNavbar() {
6666
<Navbar.Toggle onClick={() => setExpanded(!expanded)} id="navbar-toggler" aria-controls="basic-navbar-nav" />
6767
<Navbar.Collapse id="navbar-nav" className="sidebar px-2 py-1">
6868
<Nav className="me-auto ps-2">
69-
<Nav.Link className="d-flex align-items-center" onClick={() => setExpanded(false)} href="/devices" active={url === "/chargers"}>
69+
<Nav.Link className="d-flex align-items-center" onClick={() => setExpanded(false)} href="/devices" active={ path === "/devices"}>
7070
<Server />
7171
<p class="ms-1 mb-0">
7272
{t("chargers")}
7373
</p>
7474
</Nav.Link>
75-
<Nav.Link className="d-flex align-items-center" onClick={() => setExpanded(false)} href="/tokens" active={url === "/tokens"}>
75+
<Nav.Link className="d-flex align-items-center" onClick={() => setExpanded(false)} href="/tokens" active={ path === "/tokens"}>
7676
<Key />
7777
<p class="ms-1 mb-0">
7878
{t("token")}
7979
</p>
8080
</Nav.Link>
81-
<Nav.Link className="d-flex align-items-center" onClick={() => setExpanded(false)} href="/user" active={url === "/user"}>
81+
<Nav.Link className="d-flex align-items-center" onClick={() => setExpanded(false)} href="/user" active={ path === "/user"}>
8282
<User />
8383
<p class="ms-1 mb-0">
8484
{t("user")}
8585
</p>
8686
</Nav.Link>
8787
</Nav>
8888
<hr class="d-block d-md-none my-1" style={{color: "#5a6268"}} />
89-
<Nav>
89+
<Nav className="ps-2">
9090
<Nav.Link className="d-flex align-items-center" onClick={(e) => {
9191
e.preventDefault();
9292
logout(false);

‎frontend/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,9 +251,9 @@ export function App() {
251251
return (
252252
<>
253253
<ErrorAlert />
254-
<CustomNavbar />
255254
<Col>
256255
<LocationProvider>
256+
<CustomNavbar />
257257
<Router onRouteChange={() => {
258258
connected.value = false;
259259
// Ensure title is reset to translated app name when navigating away from a device connection

‎frontend/src/styles/main.scss‎

Lines changed: 115 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,162 @@
1-
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
1+
// Bootstrap imports
22
@import "../../node_modules/bootstrap/scss/functions";
33
@import "../../node_modules/bootstrap/scss/variables";
4+
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
45

5-
@media (max-width: 767.98px) {
6-
.sidebar {
7-
position: fixed;
8-
top: $navbar-height;
9-
bottom: 0;
10-
left: 0;
11-
width: 100%;
12-
z-index: 1019; /* Behind the navbar */
13-
background-color: rgba(var(--bs-light-rgb), 1);
14-
padding: $navbar-height 0 0; /* Height of navbar */
15-
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
6+
// =============================================================================
7+
// Navigation & Header
8+
// =============================================================================
9+
10+
.navbar {
11+
background-color: $navbar-color;
12+
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
13+
height: $navbar-height;
14+
color: white;
15+
z-index: 1020;
16+
17+
.nav-link .active {
18+
color: #fff !important;
1619
}
1720

18-
.sidebar .nav-link {
19-
font-weight: 500;
20-
color: #333;
21+
.navbar-toggler {
22+
top: 0.25rem;
23+
right: 1rem;
2124
}
2225
}
2326

24-
.footer {
27+
.navbar-extend {
2528
background-color: $navbar-color;
29+
border-radius: 0 0 15px 15px;
2630
}
2731

28-
.footer a {
29-
color: #ffff;
32+
.navbar-divide {
33+
color: #fff !important;
3034
}
3135

32-
.navbar-extend {
33-
background-color: $navbar-color;
34-
border-radius: 0 0 15px 15px;
36+
.navbar-dark .navbar-toggler:hover {
37+
background-color: #5a6268;
3538
}
3639

37-
@media (hover: hover) {
38-
.sidebar .nav-link:hover {
39-
color: var(--primary);
40-
}
41-
}
40+
// =============================================================================
41+
// Footer
42+
// =============================================================================
4243

43-
.navbar {
44+
.footer {
4445
background-color: $navbar-color;
45-
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
46-
height: $navbar-height;
47-
color: white;
48-
z-index: 1020;
49-
}
5046

51-
.navbar .navbar-toggler {
52-
top: 0.25rem;
53-
right: 1rem;
47+
a {
48+
color: #fff;
49+
}
5450
}
5551

56-
.navbar-divide {
57-
color: #ffff !important;
52+
// =============================================================================
53+
// Mobile Responsive Styles
54+
// =============================================================================
55+
56+
@media (max-width: 767.98px) {
57+
.sidebar {
58+
position: fixed;
59+
top: $navbar-height;
60+
bottom: 0;
61+
left: 0;
62+
width: 100%;
63+
z-index: 1019; // Behind the navbar
64+
background-color: rgba(var(--bs-light-rgb), 1);
65+
padding: $navbar-height 0 0; // Height of navbar
66+
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
67+
68+
.navbar-nav .nav-link {
69+
font-weight: 500;
70+
color: #333;
71+
}
72+
}
73+
74+
.active {
75+
color: #000 !important;
76+
}
5877
}
5978

60-
.navbar-dark .navbar-toggler:hover {
61-
background-color: #5a6268
79+
.sidebar {
80+
@media (hover: hover) {
81+
.nav-link:hover {
82+
color: var(--primary);
83+
}
84+
}
6285
}
6386

87+
6488
@media (max-width: 370px) {
6589
.navbar-toggler.mr-3 {
66-
margin-right: .5rem !important;
90+
margin-right: 0.5rem !important;
6791
}
6892
}
6993

94+
// =============================================================================
95+
// Table Styles
96+
// =============================================================================
97+
7098
th:hover:has(div) {
7199
background-color: rgba(var(--bs-emphasis-color-rgb), 0.075);
72100
}
73101

74102
.charger-head th {
75103
width: min-content;
76104
white-space: nowrap;
77-
}
78105

79-
.charger-head th:nth-last-child(2) {
80-
@media (max-width: 1600px) {
81-
width: 50% !important;
82-
}
83-
@media (max-width: 1200px) {
84-
width: 40% !important;
106+
&:nth-last-child(2) {
107+
width: 60%;
108+
109+
@media (max-width: 1600px) {
110+
width: 50% !important;
111+
}
112+
113+
@media (max-width: 1200px) {
114+
width: 40% !important;
115+
}
85116
}
86-
width: 60%;
87117
}
88118

89-
.btn-group .dropdown-btn:first-child button {
90-
border-bottom-right-radius: 0 !important;
91-
border-top-right-radius: 0 !important;
92-
margin-right: 1px;
119+
// =============================================================================
120+
// Button Groups
121+
// =============================================================================
122+
123+
.btn-group {
124+
.dropdown-btn {
125+
&:first-child button {
126+
border-bottom-right-radius: 0 !important;
127+
border-top-right-radius: 0 !important;
128+
margin-right: 1px;
129+
}
130+
131+
&:not(:first-child) button {
132+
border-bottom-left-radius: 0 !important;
133+
border-top-left-radius: 0 !important;
134+
}
135+
}
93136
}
94137

95-
.btn-group .dropdown-btn:not(:first-child) button {
96-
border-bottom-left-radius: 0 !important;
97-
border-top-left-radius: 0 !important;
138+
.token-group {
139+
@media (min-width: 768px) {
140+
gap: 0 !important;
141+
142+
.btn {
143+
border-radius: 0 !important;
144+
margin-left: 0;
145+
margin-right: 0;
146+
147+
&:last-of-type {
148+
margin-right: 0 !important;
149+
border-top-right-radius: 0.25rem !important;
150+
border-bottom-right-radius: 0.25rem !important;
151+
}
152+
}
153+
}
98154
}
99155

156+
// =============================================================================
157+
// Alert System
158+
// =============================================================================
159+
100160
.alert-container {
101161
position: fixed;
102162
top: 0;
@@ -114,20 +174,3 @@ th:hover:has(div) {
114174
width: 100%;
115175
padding: 0.5rem 1rem;
116176
}
117-
118-
.token-group {
119-
@media (min-width: 768px) {
120-
gap: 0 !important;
121-
122-
.btn {
123-
border-radius: 0 !important;
124-
margin-left: 0;
125-
margin-right: 0;
126-
}
127-
.btn:last-of-type {
128-
margin-right: 0 !important;
129-
border-top-right-radius: 0.25rem !important;
130-
border-bottom-right-radius: 0.25rem !important;
131-
}
132-
}
133-
}

0 commit comments

Comments
 (0)