Skip to content

Commit d83a732

Browse files
codepraycodecodepraycode
committed
updated navbar
1 parent ecc0ee2 commit d83a732

4 files changed

Lines changed: 80 additions & 2 deletions

File tree

‎public/assets/css/styles.css‎

Lines changed: 31 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/assets/css/styles.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/scss/components/_navbar.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,42 @@
22
@use '../utils/mixins' as *;
33
.menu {
44
@include gradient;
5+
.navbar-toggler {
6+
border: 0 !important;
7+
width: fit-content;
8+
&:focus {
9+
border: 0 !important;
10+
outline: 0 !important;
11+
box-shadow: none;
12+
}
13+
&-icon {
14+
background: none;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
// padding: 20px;
19+
font-size: 25px;
20+
i {
21+
display: none;
22+
}
23+
}
24+
&:not([aria-expanded="true"]) i {
25+
&:first-of-type {
26+
display: block;
27+
}
28+
&:last-of-type {
29+
display: none;
30+
}
31+
}
32+
&[aria-expanded="true"] i {
33+
&:first-of-type {
34+
display: none;
35+
}
36+
&:last-of-type {
37+
display: block;
38+
}
39+
}
40+
}
541
li {
642
padding: 0 0.7rem;
743
a {

‎src/components/Header/navbar.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,18 @@ const NavBar = () => {
1212
</a>
1313

1414
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
15-
<span className="navbar-toggler-icon"></span>
15+
<span className="navbar-toggler-icon open">
16+
<i className="fa fa-bars" aria-hidden="true"></i>
17+
<i class="fa fa-times" aria-hidden="true"></i>
18+
</span>
19+
{/* <span className="navbar-toggler-icon open">
20+
<i class="far fa-bars"></i>
21+
22+
</span> */}
23+
{/* <span className="navbar-toggler-icon close"></span> */}
24+
{/* <span className="close">
25+
<i class="far fa-times"></i>
26+
</span> */}
1627
</button>
1728

1829
<div className="collapse navbar-collapse justify-content-end" id="navbarNav">

0 commit comments

Comments
 (0)