Reworked the repo

Author: Zerofour04

src/App.css

@@ -38,3 +38,11 @@
   }
 }
 
+.user-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-right: 1rem;
+  color: #61dafb;
+}
+

src/App.tsx

@@ -9,8 +9,6 @@ import { Button, Container, Nav, Navbar, NavbarBrand, NavDropdown } from 'react-
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { useSelector } from 'react-redux';
 import { selectLoggedInUser } from './store/employee/employeeSelectors';
-import Input from './component/projects/input';
-import ProjectList from './component/projects/list';
 import Page from './component/page';
 
 
@@ -26,6 +24,7 @@ const App = () => {
       interactionType={InteractionType.Redirect}
       authenticationRequest={authRequest}
       errorComponent={ErrorComponent}>
+        <Header/>
         <Page/>
     </MsalAuthenticationTemplate>
   );

src/component/Header.tsx

@@ -1,11 +1,57 @@
-import { useMsal } from "@azure/msal-react";
+
+import { Button, Container, Nav, Navbar } from 'react-bootstrap';
+import { useSelector } from 'react-redux';
+import { selectLoggedInUser } from '../store/employee/employeeSelectors';
+import { useMsal } from '@azure/msal-react';
+import { Route, Routes } from "react-router-dom";
+import headerLogo from ''
 
 const Header = () => {
 
     const msal = useMsal()
+    console.log(msal)
+    // @ts-ignore
+    const employee = useSelector(selectLoggedInUser)
+    const { instance, accounts } = useMsal();
+  
+  
+    const ErrorComponent = (error: any) => {
+      return <p>An Error Occurred: {error.error}</p>;
+    }
+  
+    const logOutHandler = () => {
+      const logOutRequest = {
+        account: accounts[0],
+        postLogoutRedirectUri: "/"
+      }
+      instance.logoutRedirect(logOutRequest)
+    };
 
     return (
-        <h1>Welcome back {msal.accounts[0].name}</h1>
+        <div>
+        <Navbar bg="light" expand="lg">
+        <Container>
+          <Navbar.Brand href="#home">
+            <img src={headerLogo} className="App-logo" alt="logo" width={150} />
+          </Navbar.Brand>
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+          </Navbar.Collapse>
+          <div className="user-container">
+                    <div className="float-end text-center user">Ben</div>
+                </div>
+          <div className="col-3 text-right d-flex justify-content-between flex-column pr-4 w-200">
+            <div>
+              <Button onClick={logOutHandler}>Log out</Button>
+            </div>
+            <div className="mb-1">
+              <span className="float-right">Welcome {msal.accounts[0]?.name}</span>
+
+            </div>
+          </div>
+        </Container>
+      </Navbar>
+      </div>
     )
 };
 

src/component/page.tsx

@@ -1,67 +1,17 @@
 import React from "react";
-import { Button, Container, Nav, Navbar } from 'react-bootstrap';
-import { useSelector } from 'react-redux';
-import { selectLoggedInUser } from '../store/employee/employeeSelectors';
 import { useMsal } from '@azure/msal-react';
-import { Route, Routes } from "react-router-dom";
-import headerLogo from '../pictures/logo-dialogdata.png'
 import Header from "./Header";
-import ProjectList from "./projects/list";
+
 
 const Page = () => {
-    const msal = useMsal()
-    console.log(msal)
-    // @ts-ignore
-    const employee = useSelector(selectLoggedInUser)
-    const {instance, accounts} = useMsal();
 
-    const ErrorComponent = (error:any) => {
-      return <p>An Error Occurred: {error.error}</p>;
-    }
-  
-    const logOutHandler = () => {
-        const logOutRequest = {
-            account: accounts[0],
-            postLogoutRedirectUri: "/"
-        }
-        instance.logoutRedirect(logOutRequest)
-    };
+  const msal = useMsal()
 
-    return (
-        <div>
-        <Navbar bg="light" expand="lg">
-          <Container>
-            <Navbar.Brand href="#home">
-            <img src={ headerLogo } className="App-logo" alt="logo" width={150}/>
-            </Navbar.Brand>
-            <Navbar.Toggle aria-controls="basic-navbar-nav" />
-            <Navbar.Collapse id="basic-navbar-nav">
-              <Nav className="me-auto">
-                <Nav.Link href="/home">Home</Nav.Link>
-                <Nav.Link href="projects">Projects</Nav.Link>
-                <Nav.Link href="mission-assignments">Mission assignments</Nav.Link>
-                <Nav.Link href="business-domains">Business Domains</Nav.Link>
-              </Nav>
-            </Navbar.Collapse>
-            <div className="col-3 text-right d-flex justify-content-between flex-column pr-4 w-200">
-                    <div>
-                        <Button onClick={logOutHandler}>Log out</Button>
-                    </div>
-                    <div className="mb-1">
-                        <span className="float-right">Welcome {msal.accounts[0].name}</span>
-                    </div>
-                </div>
-          </Container>
-        </Navbar>
+  return (
+    <div>
 
-        <Routes>
-          <Route path="/home" element={<Header />} />
-          <Route path="/projects" element={<ProjectList/>} />
-          <Route path="/mission-assignments" />
-          <Route path="/business-domains" />
-        </Routes>
-      </div>
-    )
+    </div>
+  )
 }
 
 export default Page;