Add active class

Author: PrinceSumberia

package-lock.json

@@ -11,6 +11,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.19.2",
+    "classnames": "^2.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

package.json

@@ -12,7 +12,7 @@ const styles = {
   navBar: {
     flex: "0 0 10%",
     backgroundColor: colors.darkPurple,
-    color: "#ffffff",
+    color: "rgba(255,255,255,.9)",
     textTransform: "capitalize",
     display: "flex",
     justifyContent: "center",

src/components/CovidApp.js

@@ -1,5 +1,14 @@
 import React, { Component } from "react";
 import { withStyles } from "@material-ui/styles";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faHome,
+  faHeadSideCough,
+  faFlask,
+  faQuestionCircle,
+} from "@fortawesome/free-solid-svg-icons";
+import colors from "../colors";
+import classNames from "classnames";
 
 const styles = {
   nav: {
@@ -9,21 +18,76 @@ const styles = {
     listStyle: "none",
   },
   navLinks: {
-    marginBottom: "7rem",
+    marginBottom: "5rem",
     fontWeight: "500",
   },
+  iconBox: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    zIndex: "50",
+  },
+  icons: {
+    fontSize: "2.5rem",
+    padding: "1rem 0",
+  },
+  active: {
+    color: colors.purple,
+    position: "relative",
+    zIndex: "10",
+
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      width: "165%",
+      height: "110%",
+      display: "block",
+      backgroundColor: "rgb(245, 245, 245)",
+      transform: "translateX(-1rem) skewX(10deg)",
+      borderRadius: "25px",
+    },
+  },
 };
 
 class Navbar extends Component {
   render() {
     const { classes } = this.props;
+    const activeClasses = classNames(classes.navLinks, classes.active);
     return (
       <nav className={classes.nav}>
         <ul className={classes.navItems}>
-          <li className={classes.navLinks}>Overview</li>
-          <li className={classes.navLinks}>Symptoms</li>
-          <li className={classes.navLinks}>Test Yourself</li>
-          <li className={classes.navLinks}>Help</li>
+          <li className={activeClasses}>
+            <div className={classes.iconBox}>
+              <FontAwesomeIcon icon={faHome} className={classes.icons} />
+              Overview
+            </div>
+          </li>
+          <li className={classes.navLinks}>
+            <div className={classes.iconBox}>
+              <FontAwesomeIcon
+                icon={faHeadSideCough}
+                className={classes.icons}
+              />
+              Symptoms
+            </div>
+          </li>
+          <li className={classes.navLinks}>
+            <div className={classes.iconBox}>
+              <FontAwesomeIcon icon={faFlask} className={classes.icons} />
+              Test Yourself
+            </div>
+          </li>
+          <li className={classes.navLinks}>
+            <div className={classes.iconBox}>
+              <FontAwesomeIcon
+                icon={faQuestionCircle}
+                className={classes.icons}
+              />
+              Help
+            </div>
+          </li>
         </ul>
       </nav>
     );

src/components/Navbar.js

@@ -21,7 +21,8 @@ body {
   font-size: 1.6rem;
   line-height: 1.7;
   color: #1A1053;
-  background-color: rgba(185, 185, 185, 0.281);
+  background-color: rgb(245, 245, 245);
+  /* background-color: rgba(185, 185, 185, 0.281); */
 }
 
 code {