Added nav links to home and profile pages

Author: Sathya Sreenivasan

src/App.tsx

@@ -1,23 +1,15 @@
 import React from "react";
-import "./App.scss";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import NavBar from "./Components/AddNavBar/NavBar";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<NavBar/>}/>
+      </Routes>
+    </Router>
+    
   );
 }
 

src/Components/AddNavBar/NavBar.scss

@@ -0,0 +1,34 @@
+@import "../../Styles/GlobalStyles.scss";
+
+ body {
+    background-color: $blueBackground;
+    font-family: $PublicSans;
+ }
+
+.navBarContainer {
+    display: flex;
+    background: $blueBackground;
+    justify-content: center;
+
+}
+
+a {
+    margin: 15px 10px 10px 10px;
+    background: $greyBackground;
+    color: $whiteFontColor;
+    background-color: $greyBackground;
+    box-shadow: 2px 2px $orangeBackground;
+    padding: 2.5px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    border-radius: 25px;
+}
+
+a:active {
+     box-shadow: 1px 1px $orangeBackground;
+}
+
+a:hover {
+    color: $orangeBackground
+}

src/Components/AddNavBar/NavBar.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import "./NavBar.scss"
+import { Link } from "react-router";
+
+
+export default function NavBar() {
+  return (
+    <div >
+      <header className="navBarHeader">
+        <nav className="navBarContainer">
+      <div>
+        <Link to="/" className = "homeButton">Home</Link>
+      </div>
+      <div>
+        <Link to="profile" className = "profilePageButton">Profile</Link>
+      </div>
+      </nav>
+      </header>
+      
+    </div>
+  );
+}