Skip to content

Commit 9047cff

Browse files
PrinceSumberiaPrinceSumberia
committed
Add logo and make navbar responsive
1 parent 1005e80 commit 9047cff

File tree

2 files changed

+159
-66
lines changed

2 files changed

+159
-66
lines changed

‎src/components/Navbar.js‎

Lines changed: 93 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,73 +6,107 @@ import {
66
faHeadSideCough,
77
faFlask,
88
faBox,
9+
faBars,
910
} from "@fortawesome/free-solid-svg-icons";
1011
import styles from "../styles/NavbarStyles";
1112
import { NavLink } from "react-router-dom";
13+
import logo from "../assets/SVG/06.svg";
14+
import classNames from "classnames";
1215

1316
class Navbar extends Component {
17+
constructor(props) {
18+
super(props);
19+
20+
this.state = {
21+
isExpanded: false,
22+
};
23+
this.handleToggle = this.handleToggle.bind(this);
24+
}
25+
26+
handleToggle(e) {
27+
this.setState(
28+
{ isExpanded: !this.state.isExpanded },
29+
console.log(this.state.isExpanded)
30+
);
31+
// console.log("clicked");
32+
}
33+
1434
render() {
1535
const { classes } = this.props;
1636
return (
17-
<nav className={classes.nav}>
18-
<ul className={classes.navItems}>
19-
<li className={classes.navItem}>
20-
<NavLink
21-
exact
22-
to="/"
23-
className={classes.navLinks}
24-
activeClassName={classes.active}
25-
>
26-
<div className={classes.iconBox}>
27-
<FontAwesomeIcon icon={faHome} className={classes.icons} />
28-
<p>Overview</p>
29-
</div>
30-
</NavLink>
31-
</li>
32-
<li className={classes.navItem}>
33-
<NavLink
34-
exact
35-
to="/symptoms"
36-
className={classes.navLinks}
37-
activeClassName={classes.active}
38-
>
39-
<div className={classes.iconBox}>
40-
<FontAwesomeIcon
41-
icon={faHeadSideCough}
42-
className={classes.icons}
43-
/>
44-
<p>Symptoms</p>
45-
</div>
46-
</NavLink>
47-
</li>
48-
<li className={classes.navItem}>
49-
<NavLink
50-
exact
51-
to="/stay-safe"
52-
className={classes.navLinks}
53-
activeClassName={classes.active}
54-
>
55-
<div className={classes.iconBox}>
56-
<FontAwesomeIcon icon={faFlask} className={classes.icons} />
57-
<p>Prevention</p>
58-
</div>
59-
</NavLink>
60-
</li>
61-
<li className={classes.navItem}>
62-
<NavLink
63-
exact
64-
to="/essentials"
65-
className={classes.navLinks}
66-
activeClassName={classes.active}
67-
>
68-
<div className={classes.iconBox}>
69-
<FontAwesomeIcon icon={faBox} className={classes.icons} />
70-
<p>Essentials</p>
71-
</div>
72-
</NavLink>
73-
</li>
74-
</ul>
75-
</nav>
37+
<div className={classes.navbar}>
38+
<div className={classes.logo}>
39+
<img src={logo} alt="logo" />
40+
</div>
41+
<nav className={classes.nav}>
42+
<FontAwesomeIcon
43+
icon={faBars}
44+
className={classes.hamburger}
45+
onClick={this.handleToggle}
46+
/>
47+
<ul
48+
className={classNames([classes.navItems], {
49+
[classes.expand]: this.state.isExpanded,
50+
})}
51+
>
52+
<li className={classes.navItem}>
53+
<NavLink
54+
exact
55+
to="/"
56+
className={classes.navLinks}
57+
activeClassName={classes.active}
58+
>
59+
<div className={classes.iconBox}>
60+
<FontAwesomeIcon icon={faHome} className={classes.icons} />
61+
<p>Overview</p>
62+
</div>
63+
</NavLink>
64+
</li>
65+
<li className={classes.navItem}>
66+
<NavLink
67+
exact
68+
to="/symptoms"
69+
className={classes.navLinks}
70+
activeClassName={classes.active}
71+
>
72+
<div className={classes.iconBox}>
73+
<FontAwesomeIcon
74+
icon={faHeadSideCough}
75+
className={classes.icons}
76+
/>
77+
<p>Symptoms</p>
78+
</div>
79+
</NavLink>
80+
</li>
81+
<li className={classes.navItem}>
82+
<NavLink
83+
exact
84+
to="/stay-safe"
85+
className={classes.navLinks}
86+
activeClassName={classes.active}
87+
>
88+
<div className={classes.iconBox}>
89+
<FontAwesomeIcon icon={faFlask} className={classes.icons} />
90+
<p>Prevention</p>
91+
</div>
92+
</NavLink>
93+
</li>
94+
<li className={classes.navItem}>
95+
<NavLink
96+
exact
97+
to="/essentials"
98+
className={classes.navLinks}
99+
activeClassName={classes.active}
100+
>
101+
<div className={classes.iconBox}>
102+
<FontAwesomeIcon icon={faBox} className={classes.icons} />
103+
<p>Essentials</p>
104+
</div>
105+
</NavLink>
106+
</li>
107+
</ul>
108+
</nav>
109+
</div>
76110
);
77111
}
78112
}

‎src/styles/NavbarStyles.js‎

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,85 @@ import colors from "../constants/colors";
22
import sizes from "./sizes";
33

44
export default {
5-
nav: {
6-
paddingTop: "12rem",
5+
navbar: {
6+
display: "flex",
7+
flexDirection: "column",
78

89
[sizes.down("md")]: {
9-
paddingTop: "2.5rem",
10+
padding: "0 3rem",
1011
width: "100%",
12+
flexDirection: "row",
13+
// alignItems: "center",
14+
justifyContent: "space-between",
15+
},
16+
},
17+
logo: {
18+
// width: "100%",
19+
20+
"& img": {
21+
// width: "50%",
22+
[sizes.down("md")]: {
23+
width: "50%",
24+
},
25+
26+
[sizes.down("xs")]: {
27+
width: "30%",
28+
},
29+
},
30+
},
31+
32+
hamburger: {
33+
display: "none",
34+
35+
[sizes.down("md")]: {
36+
display: "inline-block",
37+
marginBottom: "1.5rem",
38+
},
39+
},
40+
41+
nav: {
42+
marginTop: "7rem",
43+
44+
[sizes.down("md")]: {
45+
marginTop: "2.5rem",
46+
// width: "50%",
47+
display: "flex",
48+
flexDirection: "column",
49+
justifyContent: "center",
50+
alignItems: "center",
1151
},
1252

1353
[sizes.down("sm")]: {
14-
paddingTop: "2rem",
54+
marginTop: "2rem",
1555
},
1656

1757
[sizes.down("xs")]: {
18-
paddingTop: "1rem",
58+
marginTop: "1rem",
1959
},
2060
},
2161

62+
expand: {
63+
maxHeight: "25rem !important",
64+
},
65+
2266
navItems: {
67+
transition: "all .5s",
2368
listStyle: "none",
2469
[sizes.down("md")]: {
70+
fontSize: "1.5rem",
71+
overflow: "hidden",
72+
maxHeight: 0,
2573
display: "flex",
26-
justifyContent: "space-evenly",
74+
flexDirection: "column",
75+
// justifyContent: "center",
76+
// alignItems: "center",
77+
// justifyContent: "space-evenly",
78+
},
79+
80+
[sizes.down("xs")]: {
81+
fontSize: "1.2rem",
82+
marginBottom: ".5rem",
2783
},
28-
2984
},
3085

3186
navItem: {
@@ -115,6 +170,10 @@ export default {
115170
// padding: "2rem 1rem",
116171
borderRadius: "0",
117172
},
173+
174+
[sizes.down("xs")]: {
175+
content: "none",
176+
},
118177
},
119178

120179
"&::after": {

0 commit comments

Comments
 (0)