Merge pull request #8 from PrinceSumberia/modifylogo

Add logo and make navbar responsive

Author: PrinceSumberia

src/components/Navbar.js

@@ -6,73 +6,107 @@ import {
   faHeadSideCough,
   faFlask,
   faBox,
+  faBars,
 } from "@fortawesome/free-solid-svg-icons";
 import styles from "../styles/NavbarStyles";
 import { NavLink } from "react-router-dom";
+import logo from "../assets/SVG/06.svg";
+import classNames from "classnames";
 
 class Navbar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isExpanded: false,
+    };
+    this.handleToggle = this.handleToggle.bind(this);
+  }
+
+  handleToggle(e) {
+    this.setState(
+      { isExpanded: !this.state.isExpanded },
+      console.log(this.state.isExpanded)
+    );
+    // console.log("clicked");
+  }
+
   render() {
     const { classes } = this.props;
     return (
-      <nav className={classes.nav}>
-        <ul className={classes.navItems}>
-          <li className={classes.navItem}>
-            <NavLink
-              exact
-              to="/"
-              className={classes.navLinks}
-              activeClassName={classes.active}
-            >
-              <div className={classes.iconBox}>
-                <FontAwesomeIcon icon={faHome} className={classes.icons} />
-                <p>Overview</p>
-              </div>
-            </NavLink>
-          </li>
-          <li className={classes.navItem}>
-            <NavLink
-              exact
-              to="/symptoms"
-              className={classes.navLinks}
-              activeClassName={classes.active}
-            >
-              <div className={classes.iconBox}>
-                <FontAwesomeIcon
-                  icon={faHeadSideCough}
-                  className={classes.icons}
-                />
-                <p>Symptoms</p>
-              </div>
-            </NavLink>
-          </li>
-          <li className={classes.navItem}>
-            <NavLink
-              exact
-              to="/stay-safe"
-              className={classes.navLinks}
-              activeClassName={classes.active}
-            >
-              <div className={classes.iconBox}>
-                <FontAwesomeIcon icon={faFlask} className={classes.icons} />
-                <p>Prevention</p>
-              </div>
-            </NavLink>
-          </li>
-          <li className={classes.navItem}>
-            <NavLink
-              exact
-              to="/essentials"
-              className={classes.navLinks}
-              activeClassName={classes.active}
-            >
-              <div className={classes.iconBox}>
-                <FontAwesomeIcon icon={faBox} className={classes.icons} />
-                <p>Essentials</p>
-              </div>
-            </NavLink>
-          </li>
-        </ul>
-      </nav>
+      <div className={classes.navbar}>
+        <div className={classes.logo}>
+          <img src={logo} alt="logo" />
+        </div>
+        <nav className={classes.nav}>
+          <FontAwesomeIcon
+            icon={faBars}
+            className={classes.hamburger}
+            onClick={this.handleToggle}
+          />
+          <ul
+            className={classNames([classes.navItems], {
+              [classes.expand]: this.state.isExpanded,
+            })}
+          >
+            <li className={classes.navItem}>
+              <NavLink
+                exact
+                to="/"
+                className={classes.navLinks}
+                activeClassName={classes.active}
+              >
+                <div className={classes.iconBox}>
+                  <FontAwesomeIcon icon={faHome} className={classes.icons} />
+                  <p>Overview</p>
+                </div>
+              </NavLink>
+            </li>
+            <li className={classes.navItem}>
+              <NavLink
+                exact
+                to="/symptoms"
+                className={classes.navLinks}
+                activeClassName={classes.active}
+              >
+                <div className={classes.iconBox}>
+                  <FontAwesomeIcon
+                    icon={faHeadSideCough}
+                    className={classes.icons}
+                  />
+                  <p>Symptoms</p>
+                </div>
+              </NavLink>
+            </li>
+            <li className={classes.navItem}>
+              <NavLink
+                exact
+                to="/stay-safe"
+                className={classes.navLinks}
+                activeClassName={classes.active}
+              >
+                <div className={classes.iconBox}>
+                  <FontAwesomeIcon icon={faFlask} className={classes.icons} />
+                  <p>Prevention</p>
+                </div>
+              </NavLink>
+            </li>
+            <li className={classes.navItem}>
+              <NavLink
+                exact
+                to="/essentials"
+                className={classes.navLinks}
+                activeClassName={classes.active}
+              >
+                <div className={classes.iconBox}>
+                  <FontAwesomeIcon icon={faBox} className={classes.icons} />
+                  <p>Essentials</p>
+                </div>
+              </NavLink>
+            </li>
+          </ul>
+        </nav>
+      </div>
     );
   }
 }

src/styles/NavbarStyles.js

@@ -2,30 +2,85 @@ import colors from "../constants/colors";
 import sizes from "./sizes";
 
 export default {
-  nav: {
-    paddingTop: "12rem",
+  navbar: {
+    display: "flex",
+    flexDirection: "column",
 
     [sizes.down("md")]: {
-      paddingTop: "2.5rem",
+      padding: "0 3rem",
       width: "100%",
+      flexDirection: "row",
+      // alignItems: "center",
+      justifyContent: "space-between",
+    },
+  },
+  logo: {
+    // width: "100%",
+
+    "& img": {
+      // width: "50%",
+      [sizes.down("md")]: {
+        width: "50%",
+      },
+
+      [sizes.down("xs")]: {
+        width: "30%",
+      },
+    },
+  },
+
+  hamburger: {
+    display: "none",
+
+    [sizes.down("md")]: {
+      display: "inline-block",
+      marginBottom: "1.5rem",
+    },
+  },
+
+  nav: {
+    marginTop: "7rem",
+
+    [sizes.down("md")]: {
+      marginTop: "2.5rem",
+      // width: "50%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     },
 
     [sizes.down("sm")]: {
-      paddingTop: "2rem",
+      marginTop: "2rem",
     },
 
     [sizes.down("xs")]: {
-      paddingTop: "1rem",
+      marginTop: "1rem",
     },
   },
 
+  expand: {
+    maxHeight: "25rem !important",
+  },
+
   navItems: {
+    transition: "all .5s",
     listStyle: "none",
     [sizes.down("md")]: {
+      fontSize: "1.5rem",
+      overflow: "hidden",
+      maxHeight: 0,
       display: "flex",
-      justifyContent: "space-evenly",
+      flexDirection: "column",
+      // justifyContent: "center",
+      // alignItems: "center",
+      // justifyContent: "space-evenly",
+    },
+
+    [sizes.down("xs")]: {
+      fontSize: "1.2rem",
+      marginBottom: ".5rem",
     },
-    
   },
 
   navItem: {
@@ -115,6 +170,10 @@ export default {
           // padding: "2rem 1rem",
           borderRadius: "0",
         },
+
+        [sizes.down("xs")]: {
+          content: "none",
+        },
       },
 
       "&::after": {