Add react router dom and navlinks

Author: PrinceSumberia

package-lock.json

@@ -16,6 +16,7 @@
     "classnames": "^2.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
     "react-simple-maps": "^2.0.0",
     "react-tooltip": "^4.2.5",

package.json

@@ -1,39 +1,21 @@
-.App {
-  text-align: center;
-}
+ .root {
+   display: flex;
+ }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+ .navBar {
+   flex: 0 0 10%;
+   min-height: 100vh;
+   background-color: #1A1053;
+   color: rgba(255, 255, 255, .9);
+   /* color: (props)=> props.isDarkMode ? "rgba(255,255,255,.87)": "rgba(255,255,255,.9)", */
+   text-transform: capitalize;
+   display: flex;
+   justify-content: center;
+ }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
+ .mainContent {
+   flex: 1;
+   padding: 4rem;
+   position: relative;
+   overflow: hidden;
+ }

src/App.css

@@ -2,6 +2,8 @@ import React, { Component } from "react";
 import CovidApp from "./components/CovidApp";
 import Paper from "./components/Paper";
 import "./App.css";
+import Navbar from "./components/Navbar";
+import { Switch, Route } from "react-router-dom";
 
 class App extends Component {
   constructor(props) {
@@ -17,12 +19,44 @@ class App extends Component {
   }
 
   render() {
+    const { isDarkMode } = this.state;
     return (
       <Paper isDarkMode={this.state.isDarkMode}>
-        <CovidApp
-          setDarkMode={this.setDarkMode}
-          isDarkMode={this.state.isDarkMode}
-        />
+        <div className="root">
+          <div className="navBar">
+            <Navbar isDarkMode={isDarkMode} />
+          </div>
+          <div className="mainContent">
+            <Switch>
+              <Route
+                exact
+                path="/"
+                render={() => (
+                  <CovidApp
+                    setDarkMode={this.setDarkMode}
+                    isDarkMode={this.state.isDarkMode}
+                  />
+                )}
+              />
+              <Route exact path="/symptoms" render={() => <h1>Help Page</h1>} />
+              <Route
+                exact
+                path="/stay-safe"
+                render={() => <h1>Stay Safe</h1>}
+              />
+              <Route exact path="/help" render={() => <h1>Help Page</h1>} />
+              <Route
+                path="/"
+                render={() => (
+                  <CovidApp
+                    setDarkMode={this.setDarkMode}
+                    isDarkMode={this.state.isDarkMode}
+                  />
+                )}
+              />
+            </Switch>
+          </div>
+        </div>
       </Paper>
     );
   }