Merge pull request #47 from UoaWDCC/nick/feature/20/navigation-bar

created nav bar

web/src/components/Header.tsx

@@ -1,9 +1,34 @@
+import peacockLogo from '../assets/peacock-logo.png';
+import whiteName from '../assets/auis_white.png';
+
 function Header() {
-  return (
-    <header>
-      <h1>Header</h1>
-    </header>
-  );
+    return (
+        <header className="bg-[#034159] h-[90px] w-full px-[15px] flex justify-between items-center">
+                {/* Images and logo */}
+                <a className="flex items-center" href="/">
+                    <img className="object-contain w-[70px] h-[70px]" src = {peacockLogo}/>
+                    <img className="object-contain w-[172px] h-[62px]" src = {whiteName}/>
+                </a>
+                {/* Links */}
+                <nav>
+                    <ul className="text-white flex items-center gap-8 text-lg">
+                        <li><a className="hover:bg-[#05394d] px-3 py-2 rounded" href="#">Events</a></li>
+                        <li><a className="hover:bg-[#05394d] px-3 py-2 rounded" href="/pvv">About Us</a></li>
+                        <li><a className="hover:bg-[#05394d] px-3 py-2 rounded" href="/exec">Leadership Team</a></li>
+                        <li><a className="hover:bg-[#05394d] px-3 py-2 rounded" href="/credits">Credits</a></li>
+                    </ul>
+                </nav>
+                {/* Login signup buttons */}
+                <div className="flex items-center gap-8 px-[10px]">
+                    <a href="/login">
+                        <button className="bg-[#FC8700] hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-base rounded" style={{borderRadius: '10px' }}>Log-in</button>
+                    </a>
+                    <a href="/signup">
+                        <button className="bg-[#FC8700] hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-base rounded" style={{borderRadius: '10px' }}>Sign-up</button>
+                    </a>
+                </div>
+        </header>
+    );
 }
 
 export default Header;

web/src/main.tsx

@@ -10,14 +10,14 @@ import { RouterProvider } from "react-router-dom";
 
 import App from "./App.tsx";
 import "./index.css";
-
 import HomeScreen from "./screens/HomeScreen.tsx";
 import TestScreen from "./screens/Test.tsx";
 import ExecScreen from "./screens/ExecScreen.tsx";
 import LoginScreen from "./screens/LoginScreen.tsx";
 import SignUpScreen from "./screens/SignUpScreen.tsx";
 import PhotosScreen from "./screens/PhotosScreen.tsx";
 import PPVScreen from "./screens/PPVScreen.tsx";
+import CreditsScreen from './screens/CreditsScreen.tsx';
 import { execs } from "./data/data.ts";
 
 //Add any routes for screens below
@@ -31,6 +31,7 @@ const router = createBrowserRouter(
       <Route path="/signup" element={<SignUpScreen />} />
       <Route path="/pvv" element={<PPVScreen />} />
       <Route path="/photos" element={<PhotosScreen />} />
+      <Route path="/credits" element={<CreditsScreen />} />
     </Route>
   )
 );