Add navbar

Author: PrinceSumberia

public/index.html

@@ -13,7 +13,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
 
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/App.js

@@ -4,7 +4,7 @@ import CovidApp from "./components/CovidApp";
 
 function App() {
   return (
-    <div className="App">
+    <div>
       <CovidApp />
     </div>
   );

src/components/CovidApp.js

@@ -1,13 +1,59 @@
 import React, { Component } from "react";
 import Overview from "./Overview";
+import Navbar from "./Navbar";
+import { withStyles } from "@material-ui/styles";
+import colors from "../colors";
+
+const styles = {
+  root: {
+    display: "flex",
+    height: "100vh",
+  },
+  navBar: {
+    flex: "0 0 10%",
+    backgroundColor: colors.darkPurple,
+    color: "#ffffff",
+    textTransform: "capitalize",
+    display: "flex",
+    justifyContent: "center",
+  },
+  mainContent: {
+    flex: 1,
+    padding: "4rem",
+  },
+  heading: {
+    fontWeight: "500",
+    "& span": {
+      color: colors.purple,
+      fontWeight: "900",
+      marginRight: "1rem",
+    },
+  },
+};
+
+class CovidApp extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
 
-export default class CovidApp extends Component {
   render() {
+    const { classes } = this.props;
     return (
-      <div>
-        <h1>Covid-19 India Trend</h1>
-        <Overview />
+      <div className={classes.root}>
+        <div className={classes.navBar}>
+          <Navbar />
+        </div>
+        <div className={classes.mainContent}>
+          <h1 className={classes.heading}>
+            <span>Covid-19</span> India Trend
+          </h1>
+          <Overview />
+        </div>
       </div>
     );
   }
 }
+
+export default withStyles(styles)(CovidApp);

src/components/DisplayPanels.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { withStyles } from "@material-ui/styles";
+import colors from "../colors";
 
 const styles = {
   panel: {
@@ -22,13 +23,13 @@ const styles = {
       let color;
       let title = props.title.toLowerCase();
       if (title === "recovered") {
-        color = "green";
+        color = colors.green;
       } else if (title === "deceased") {
-        color = "purple";
+        color = colors.purple;
       } else if (title === "active") {
-        color = "orange";
+        color = colors.orange;
       } else if (title === "confirmed") {
-        color = "red";
+        color = colors.red;
       }
       return color;
     },
@@ -41,13 +42,13 @@ const styles = {
       let color;
       let title = props.title.toLowerCase();
       if (title === "recovered") {
-        color = "green";
+        color = colors.green;
       } else if (title === "deceased") {
-        color = "purple";
+        color = colors.purple;
       } else if (title === "active") {
-        color = "orange";
+        color = colors.orange;
       } else if (title === "confirmed") {
-        color = "red";
+        color = colors.red;
       }
       return color;
     },

src/components/Navbar.js

@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import { withStyles } from "@material-ui/styles";
+
+const styles = {
+  nav: {
+    marginTop: "12rem",
+  },
+  navItems: {
+    listStyle: "none",
+  },
+  navLinks: {
+    marginBottom: "7rem",
+    fontWeight: "500",
+  },
+};
+
+class Navbar extends Component {
+  render() {
+    const { classes } = this.props;
+    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>
+        </ul>
+      </nav>
+    );
+  }
+}
+
+export default withStyles(styles)(Navbar);

src/components/Overview.js

@@ -5,11 +5,11 @@ import { withStyles } from "@material-ui/styles";
 
 const styles = {
   root: {
-    // display: "flex",
+    textAlign: "center",
   },
   panels: {
     display: "flex",
-    justifyContent: "space-evenly",
+    justifyContent: "space-between",
     alignItems: "center",
   },
 };

src/index.css

@@ -13,13 +13,13 @@ html {
 
 
 body {
-  margin: 0;
   font-family: 'Roboto',
     sans-serif;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 1.6rem;
+  line-height: 1.7;
   background-color: rgba(185, 185, 185, 0.281);
 }