YaleComputerSociety · ryanggum · Apr 14, 2024 · Apr 14, 2024
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -4,24 +4,18 @@ import React from "react";
 
 import { Route, Routes } from 'react-router-dom';
 
-import Navbar from './navbar/NavBar';
 import Courses from './pages/Courses';
 import Graduation from './pages/Graduation';
 import Majors from './pages/Majors';
 
 function App() {
   return (
   <div>
-    <div style={{ position: "relative", zIndex: "2" }}>
-      <Navbar/>
-    </div>
-    <div style={{ position: "relative", zIndex: "1" }}>
       <Routes>
-        <Route path=""             element={<Graduation />} />      
-        <Route path="/courses"      element={<Courses/>} />
+        <Route path="/"              element={<Graduation/>}/>      
+        <Route path="/courses"      element={<Courses/>}/>
         <Route path="/majors"       element={<Majors/>}/>
       </Routes>
-    </div>
   </div>
   );
 }

diff --git a/frontend/src/navbar/NavBar.module.css → ...mmons/components/navbar/NavBar.module.css b/frontend/src/navbar/NavBar.module.css → ...mmons/components/navbar/NavBar.module.css
@@ -5,6 +5,9 @@
 
 .NavBar {
   position: fixed;
+  z-index: 2;
+
+
   left: 0;
   width: 100%;
   top: 0;

diff --git a/frontend/src/navbar/NavBar.tsx b/frontend/src/navbar/NavBar.tsx
diff --git a/frontend/src/pages/Courses/Courses.tsx b/frontend/src/pages/Courses/Courses.tsx
@@ -7,6 +7,33 @@ import AddCourseMenu from "./components/add_course/AddCourse";
 
 import { MockStudent } from "./../../commons/mock/MockStudent";
 
+import nav_styles from "./../../commons/components/navbar/NavBar.module.css";
+import img_logo from "./../../commons/images/ma_logo.png";
+import { NavLink } from "react-router-dom";
+
+function NavBar() {
+  return (
+    <div className={nav_styles.NavBar}>
+      <div style={{ marginLeft: "20px" }}>
+        <img src={img_logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
+      </div>
+
+      <div className={nav_styles.row} style={{ marginRight: "20px" }}>
+        <NavLink to="/" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+          Graduation
+        </NavLink>
+        <NavLink to="/courses" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+          Courses
+        </NavLink>
+        <NavLink to="/majors" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+          Majors
+        </NavLink>
+        {/* <MeDropdown /> */}
+      </div>
+    </div>
+  );
+}
+
 export interface DisplaySetting {
   rating: boolean,
   workload: boolean,
@@ -66,15 +93,19 @@ function Courses() {
   }
 
   return(
-    <div className={styles.CoursesPage}>
-      <button className={styles.AddCourseButton} onClick={toggleAddCourse}>
-        +
-      </button>
-      <div className={`${styles.AddCourseMenuDormant} ${addCourse ? styles.AddCourseMenuActive : ''}`}>
-        {addCourse && (<AddCourseMenu/>)}
-      </div>
-      <div className={styles.column}>
-        {yearboxComponents}
+    <div>
+      <NavBar/>
+
+      <div className={styles.CoursesPage}>
+        <button className={styles.AddCourseButton} onClick={toggleAddCourse}>
+          +
+        </button>
+        <div className={`${styles.AddCourseMenuDormant} ${addCourse ? styles.AddCourseMenuActive : ''}`}>
+          {addCourse && (<AddCourseMenu/>)}
+        </div>
+        <div className={styles.column}>
+          {yearboxComponents}
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/pages/Graduation/Graduation.module.css b/frontend/src/pages/Graduation/Graduation.module.css
@@ -1,6 +1,7 @@
 
 .GraduationPage {
-    position: absolute;
+    position: relative;
+    z-index: 1;
 
     display: flex;
     flex-direction: row;
@@ -10,10 +11,7 @@
 
     top: 75px;
 
-    height: calc(100vh - 75px);
     width: 100%;
-
-    border: solid 1px red;
 }
 
 .row {

diff --git a/frontend/src/pages/Graduation/Graduation.tsx b/frontend/src/pages/Graduation/Graduation.tsx
@@ -7,6 +7,34 @@ import GraduationOverview from "./components/Overview";
 
 import { CPSC } from "./../../commons/mock/MockProgram"
 
+import nav_styles from "./../../commons/components/navbar/NavBar.module.css";
+import img_logo from "./../../commons/images/ma_logo.png";
+import { NavLink } from "react-router-dom";
+
+function NavBar() {
+  return (
+    <div className={nav_styles.NavBar}>
+
+      <div style={{ marginLeft: "20px" }}>
+        <img src={img_logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
+      </div>
+
+      <div className={nav_styles.row} style={{ marginRight: "20px" }}>
+        <NavLink to="/" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+          Graduation
+        </NavLink>
+        <NavLink to="/courses" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+          Courses
+        </NavLink>
+        <NavLink to="/majors" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+          Majors
+        </NavLink>
+        {/* <MeDropdown /> */}
+      </div>
+    </div>
+  );
+}
+
 function Recommendations(){
   return(
     <div>
@@ -26,13 +54,18 @@ const alterCurrYear = (num: number) => {
 };
 
 return (
-  <div className={styles.GraduationPage}>
-    <div className={styles.row}>
-      <div className={styles.column} style={{ marginRight: "60px" }}>
-        <Recommendations/>
-        <GraduationDistribution currYear={currYear} alterCurrYear={alterCurrYear}/>
+  <div>
+
+    <NavBar/>
+
+    <div className={styles.GraduationPage}>
+      <div className={styles.row}>
+        <div className={styles.column} style={{ marginRight: "60px" }}>
+          <Recommendations/>
+          <GraduationDistribution currYear={currYear} alterCurrYear={alterCurrYear}/>
+        </div>
+        <GraduationOverview degree={CPSC.degrees[0]}/>
       </div>
-      <GraduationOverview degree={CPSC.degrees[0]}/>
     </div>
   </div>
 );

diff --git a/frontend/src/pages/Majors/Majors.module.css b/frontend/src/pages/Majors/Majors.module.css
@@ -9,11 +9,8 @@
   padding-top: 100px;
 
   top: 75px;
-
-  height: calc(100vh - 75px);
   width: 100%;
-
-  border: solid 1px red;
+
 }
 
 .majorContainer {

diff --git a/frontend/src/pages/Majors/Majors.tsx b/frontend/src/pages/Majors/Majors.tsx
@@ -6,8 +6,36 @@ import ProgramRequirementsBox from "./components/ProgramRequirementsBox";
 import ProgramMetadataBox from "./components/ProgramMetadataBox";
 
 import { CPSC, ECON, HIST } from "./../../commons/mock/MockProgram";
+
+import nav_styles from "./../../commons/components/navbar/NavBar.module.css";
+import img_logo from "./../../commons/images/ma_logo.png";
+import { NavLink } from "react-router-dom";
+
 const programs = [CPSC, ECON, HIST];
 
+function NavBar() {
+  return (
+    <div className={nav_styles.NavBar}>
+      <div style={{ marginLeft: "20px" }}>
+        <img src={img_logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
+      </div>
+
+      <div className={nav_styles.row} style={{ marginRight: "20px" }}>
+        <NavLink to="/" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+          Graduation
+        </NavLink>
+        <NavLink to="/courses" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+          Courses
+        </NavLink>
+        <NavLink to="/majors" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+          Majors
+        </NavLink>
+        {/* <MeDropdown /> */}
+      </div>
+    </div>
+  );
+}
+
 export const Majors = () => {
 
   // Which Program
@@ -27,14 +55,17 @@ export const Majors = () => {
   };
 
   return(
-    <div className={styles.MajorsPage}>
-      <ProgramMetadataBox 
-        program={programs[currdex]} 
-        scrollProgram={alterCurrdex} 
-        seeProgram={seeProgram}
-        whichDegree={currDegree}
-        alterCurrDegree={alterCurrDegree}/>
-      <ProgramRequirementsBox degree={programs[currdex].degrees[currDegree]}/>
+    <div>
+      <NavBar/>
+      <div className={styles.MajorsPage}>
+        <ProgramMetadataBox 
+          program={programs[currdex]} 
+          scrollProgram={alterCurrdex} 
+          seeProgram={seeProgram}
+          whichDegree={currDegree}
+          alterCurrDegree={alterCurrDegree}/>
+        <ProgramRequirementsBox degree={programs[currdex].degrees[currDegree]}/>
+      </div>
     </div>
   );
 };