Add nav bar (#25)

Co-authored-by: Sathya Sreenivasan <sathya.sreenivasan@softwire.com>
Co-authored-by: Eleanor <eleanor.scott@softwire.com>

Author: 3 people

package-lock.json

@@ -3,26 +3,30 @@ import "./App.scss";
 import { Link, Route, BrowserRouter as Router, Routes } from "react-router";
 import PhotoOfTheDay from "./Components/photoOfTheDay/photoOfTheDay";
 import ProfilePage from "./pages/Profile/ProfilePage";
+import NavBar from "./Components/AddNavBar/NavBar";
 
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<PhotoOfTheDay />} />
-        <Route path="/profile" element={<ProfilePage />} />
-        <Route
-          path="*"
-          element={
-            <div>
-              Sorry, that page does not exist, try these:
+    <div>
+      <Router>
+        <NavBar />
+        <Routes>
+          <Route path="/" element={<PhotoOfTheDay />} />
+          <Route path="/profile" element={<ProfilePage />} />
+          <Route
+            path="*"
+            element={
               <div>
-                <Link to="/profile">Profile Page</Link>
+                Sorry, that page does not exist, try these:
+                <div>
+                  <Link to="/profile">Profile Page</Link>
+                </div>
               </div>
-            </div>
-          }
-        />
-      </Routes>
-    </Router>
+            }
+          />
+        </Routes>
+      </Router>
+    </div>
   );
 }
 

src/App.tsx

@@ -0,0 +1,60 @@
+@import "../../Styles/GlobalStyles.scss";
+
+ body {
+    background-color: $blueBackground;
+    font-family: $PublicSans;
+ }
+
+.navBarContainer {
+    display: flex;
+    background: $blueBackground;
+    justify-content: space-between;
+
+}
+
+.homeButton  {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.profilePageButton {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  
+}
+
+#astroButton {
+    width: 5vw;
+    min-width: 50px;
+
+}
+
+#earthButton {
+    width: 5vw;
+    min-width: 50px;
+    
+}
+
+a {
+    margin: 15px 10px 10px 10px;
+    color: $orangeBackground;
+    padding: 2.5px 20px;
+    border: solid 2px $orangeBackground;
+    text-decoration: none;
+    border-radius: 25px;
+}
+
+
+
+a:hover {
+    
+    color: $whiteFontColor;
+    box-shadow: 0px 0px 3px 3px $greyBackground;
+}
+
+a:active {
+     box-shadow: none;
+     color: $orangeBackground;
+}

src/Components/AddNavBar/Images/astronautcartoon.png

@@ -0,0 +1,18 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import NavBar from "./NavBar";
+import { BrowserRouter } from "react-router";
+
+describe(NavBar, () => {
+  it("Should change current location to profile when link is clicked", () => {
+    render(
+      <BrowserRouter>
+        <NavBar />
+      </BrowserRouter>,
+    );
+    const linkProfile = screen.getByText("Profile");
+    userEvent.click(linkProfile);
+  });
+});

src/Components/AddNavBar/Images/cartoon earth.png

@@ -0,0 +1,32 @@
+import React from "react";
+import "./NavBar.scss";
+import { Link } from "react-router";
+import imageAstro from "./Images/astronautcartoon.png";
+import imageEarth from "./Images/cartoon earth.png";
+
+export default function NavBar() {
+  return (
+    <div>
+      <header className="navBarHeader">
+        <nav className="navBarContainer">
+          <div>
+            <Link to="/" className="homeButton" id="homeLink">
+              <img src={imageEarth} alt="imageEarth" id="earthButton" />
+              Home
+            </Link>
+          </div>
+          <div>
+            <Link to="/profile" className="profilePageButton" id="profileLink">
+              <img
+                src={imageAstro}
+                alt="cartoon astronaut illustration"
+                id="astroButton"
+              />
+              Profile
+            </Link>
+          </div>
+        </nav>
+      </header>
+    </div>
+  );
+}

src/Components/AddNavBar/NavBar.scss

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}

src/Components/AddNavBar/NavBar.spec.tsx

@@ -21,6 +21,6 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src",
   ]
 }