Spa topbar

spa/web/src/Navbar.tsx

@@ -0,0 +1,18 @@
+import { NavLink } from "react-router-dom";
+import "./navbar.css";
+import ExplorerLogo from "./assets/ExploreLogo.svg"
+import Persona from "./assets/Persona.png"
+
+function Navbar() {
+    return(
+        <nav className="Navbar-container">
+            <NavLink to="/"><img src={ExplorerLogo} alt="Explorer Logo"/></NavLink>
+            <NavLink  to="/" className="Navbar-title">
+                SPA
+            </NavLink>
+            <NavLink to="/"><img src={Persona} alt="Profile Picture" width={50}/></NavLink>
+        </nav>
+    )
+}
+
+export default Navbar;

spa/web/src/navbar.css

@@ -0,0 +1,13 @@
+.Navbar-container{
+    position: sticky;
+    top:0;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    width: 100%;
+    background-color: #0a2242;
+}
+.Navbar-title{
+    color: white;
+    font-size: 5em;
+}

spa/web/src/pages/ConfirmationPage.tsx

@@ -4,7 +4,8 @@ import { Guest, Room } from 'cms-types';
 import { useEffect } from 'react';
 import useAccessToken from '../auth/useAccessToken';
 import { useGet } from '../hooks/useGet';
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom';
+import Navbar from '../Navbar';
 
 const ConfirmationPage = () => {
   const { accounts } = useMsal();
@@ -61,6 +62,8 @@ const ConfirmationPage = () => {
   }, [guest, account, accessToken, mutate, isLoading]);
 
   return (
+    <div>
+    <Navbar/>
     <Flex
       width="100vw"
       height="100vh"
@@ -105,6 +108,7 @@ const ConfirmationPage = () => {
         </Card>
       </Box>
     </Flex>
+    </div>
   );
 };
 

spa/web/src/pages/Home.tsx

@@ -4,6 +4,7 @@ import { Guest, Room } from 'cms-types';
 import { useEffect } from 'react';
 import useAccessToken from '../auth/useAccessToken';
 import { useGet } from '../hooks/useGet';
+import Navbar from '../Navbar';
 import { useNavigate } from 'react-router-dom';
 
 
@@ -69,6 +70,8 @@ const Home = () => {
   }, [guest, account, accessToken, mutate, isLoading]);
 
   return (
+    <div>
+    <Navbar/>
     <Flex
       width="100vw"
       height="100vh"
@@ -111,6 +114,7 @@ const Home = () => {
       </Button>
       </Box>
     </Flex>
+    </div>
   );
 };
 

spa/web/src/pages/TreatmentPage.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import useAccessToken from '../auth/useAccessToken';
 import { useGet } from '../hooks/useGet';
 import { useNavigate } from 'react-router-dom';
+import Navbar from '../Navbar';
 import hydrotherapyImage from '../assets/images/hydrotherapy.png';
 import mudbathImage from '../assets/images/mudbath.png';
 import saunaImage from '../assets/images/sauna.png';
@@ -82,11 +83,12 @@ const TreatmentPage = () => {
   }, [guest, account, accessToken, mutate, isLoading]);
 
   return (
+    <div>
+    <Navbar/>
     <Flex
       width="100vw"
       height="100vh"
       alignContent="center"
-      justifyContent="center"
       flexDirection="column"
       backgroundColor="#f0f0f0"
     >
@@ -360,6 +362,7 @@ const TreatmentPage = () => {
 
   </Box>
   </Flex>
+  </div>
   );
 };