Change nav title based on page

src/components/about_page/header.tsx

@@ -0,0 +1,11 @@
+function Header() {
+    return (
+        <div className="about-header">
+            <div className="image-overlay">
+                <h1>About Us</h1>
+            </div>
+        </div>
+    )
+}
+
+export default Header;

src/components/home_page/content.tsx

@@ -9,11 +9,11 @@ function Content() {
 
         const image: string = Projects_Content[i][0][0];
         const title: string = Projects_Content[i][0][1];
-        const descritpion: string = Projects_Content[i][0][1];
+        const description: string = Projects_Content[i][0][1];
 
         content_list.push(
             <div className="content-card">
-                <Link to={path}>
+                <Link to={path }>
                     <img src={image} alt={title}></img>
                 </Link>
                 <div className="info">
@@ -22,7 +22,7 @@ function Content() {
                             {title}
                         </Link>
                     </h3>
-                    <p>{descritpion}</p>
+                    <p>{description}</p>
                 </div>
             </div>
         );

src/components/home_page/header.tsx

@@ -1,8 +1,9 @@
 function Header() {
     return (
         <div className="club-header">
-            <div className="image-overlay"></div>
-            <h1>Computer Science Club</h1>
+            <div className="image-overlay">
+                <h1>Computer Science Club</h1>
+            </div>
         </div>
     );
 }

src/components/nav_bar.tsx

@@ -1,18 +1,23 @@
 import {Link} from "react-router-dom";
 
-function Navigation_Bar() {
+interface Navigation_Bar_Props {
+    nav_bar_title: string;
+    onNavLinkClick: (new_title: string) => void;
+}
+
+function Navigation_Bar({nav_bar_title, onNavLinkClick}: Navigation_Bar_Props) {
     return (
         <div className="nav-container">
             <nav className="nav-bar">
                 <div className="left">
                     <a href="https://www.callutheran.edu/"><img src="https://news.callutheran.edu/wp-content/uploads/sites/23/2023/01/wp-logo-1x.png" alt="CLU Logo"></img></a>
-                    <h2>Club Projects and Activites</h2>
+                    <h2>{nav_bar_title}</h2>
                 </div>
 
                 <ul className="right">
-                    <Link to="/">Home</Link>
-                    <Link to="/about">About</Link>
-                    <Link to="/contact">Contact</Link>
+                    <Link to="/" onClick={() => onNavLinkClick("Club Projects and Activities")}>Home</Link>
+                    <Link to="/about" onClick={() => onNavLinkClick("About The Club")}>About</Link>
+                    <Link to="/contact" onClick={() => onNavLinkClick("Contact The Club")}>Contact</Link>
                 </ul>
             </nav>
         </div>

src/components/project_page/content.tsx

@@ -2,8 +2,7 @@ import Projects_Content from "../../content/projects_content";
 
 function Content() {
     let url: string = window.location.pathname;
-    console.log(url);
-
+
     let content: string[] = [];
     for (let i = 0; i < Projects_Content.length; i++) {
         if ("/" + Projects_Content[i][1][1].replace(/\s/g, "-") == url) {

src/index.scss

@@ -11,6 +11,10 @@ $max-width: 1230px;
   margin: 0;
 }
 
+html {
+  overflow-y: scroll;
+}
+
 .nav-container {
   background-color: $clu-purple;
   display: flex;
@@ -76,23 +80,22 @@ $max-width: 1230px;
     background-position: center center;
     height: 400px;
     width: 100vw;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 
     .image-overlay {
       background-color: rgba(0,0,0,.5);
       width: 100%;
       height: 100%;
-    }
-
-    h1 {
-      color: white;
-      font-family: "Raleway",Helvetica,Arial,sans-serif;
-      font-size: 3.5rem;
-      font-weight: 700;
-      line-height: normal;
-      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      h1 {
+        color: white;
+        font-family: "Raleway",Helvetica,Arial,sans-serif;
+        font-size: 3.5rem;
+        font-weight: 700;
+        line-height: normal;
+      }
     }
   }
 
@@ -167,7 +170,7 @@ $max-width: 1230px;
       width: 100%;
       display: flex;
       justify-content: center;
-      padding: $base-padding / 2;
+      padding: calc($base-padding / 2);
 
       iframe{
         border: none;
@@ -180,7 +183,7 @@ $max-width: 1230px;
       width: 100%;
       display: flex;
       justify-content: center;
-      padding: $base-padding / 2;
+      padding: calc($base-padding / 2);
 
       img {
         width: 66%;
@@ -196,9 +199,33 @@ $max-width: 1230px;
         color: white;
         font-family: "Courier";
         font-size: 1.3em;
-        padding: $base-padding / 2;
+        padding: calc($base-padding / 2);
         width: 80%;
       }
     }
   }
+}
+
+.about-page {
+  .about-header {
+    background-image:url(https://www.mtu.edu/business/undergraduate/organizations/student-organizations/finance-club/images/finance-club-banner1200.jpg);
+    height: 400px;
+
+    .image-overlay {
+      background-color: rgba(0,0,0,.5);
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      h1 {
+        color: white;
+        font-family: "Raleway",Helvetica,Arial,sans-serif;
+        font-size: 3.5rem;
+        font-weight: 700;
+        line-height: normal;
+      }
+    }
+  }
 }

src/index.tsx

@@ -1,3 +1,4 @@
+import {SetStateAction, useState} from "react";
 import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
 import Home from "./pages/home";
 import Project from "./pages/project"
@@ -7,20 +8,26 @@ import Navigation_Bar from "./components/nav_bar";
 import Projects_Content from "./content/projects_content";
 
 function App() {
-    // let project_path: string = "";
+    const [nav_bar_title, setNavBarTitle] = useState<string>("Club Projects and Activities");
+
+    const update_title = (new_title: string) => {
+        setNavBarTitle(new_title);
+    };
+
+    let project_path: string = "";
     let project_routes: any[] = [];
     for (let i = 0; i < Projects_Content.length; i++) {
         // project_path = "/:" + Projects_Content[i][1][1].replace(/\s/g, "-"); // Replace spaces with dashes for url
         project_routes.push (
             // Project_Content[i][1][1] gets first element after descriptor from project page (should probably be a title)
-            <Route path={`/:${Projects_Content[i][1][1].replace(/\s/g, "-")}`} element={<Project></Project>}></Route>
+            <Route path={`/:${Projects_Content[i][1][1].replace(/\s/g, "-")}`} element={<Project></Project>} key={i}></Route>
         )
     }
 
     return (
         <div className="page-wrapper">
             <Router>
-                <Navigation_Bar></Navigation_Bar>
+                <Navigation_Bar nav_bar_title={nav_bar_title} onNavLinkClick={update_title}></Navigation_Bar>
                 <Routes>
                     <Route path="/" element={<Home></Home>}></Route>
                     {project_routes}

src/pages/about.tsx

@@ -1,9 +1,9 @@
-import Test from '../components/about_page/test_component'
+import Header from '../components/about_page/header'
 
 function About() {
     return (
         <div className="about-page">
-            <Test></Test>
+            <Header></Header>
         </div>
     );
 }