Change navbar links in MCC (#324)

# Purpose
To change the navbar links in the MCC to be consistent with the ARO.

Notion task:
https://www.notion.so/uworbital/Change-the-Navbar-links-in-MCC-1908a26d767780af950cde20585f8ae0


![image.png](https://github.com/user-attachments/assets/b82478a7-2f87-4f9f-8c33-03fd4aad52ee)

# New Changes
- Changed navbar links in the MCC to use react-router
- Changed the navbar design to make it match the ARO (added the UW
Orbital logo on the left and made the navbar background black)

# Testing
- Tested it locally

# Outstanding Changes
- Generalize the navbar into a separate directory

Author: Jiatao7

gs/frontend/aro/src/common/navbar.tsx

@@ -4,21 +4,19 @@ import profile from "../assets/profile.png";
 
 function Navbar() {
   return (
-    <div>
-      <div className="nav">
-        <Link to="/">
-          <img src={logo} alt="orbital logo"></img>
+    <div className="nav">
+      <Link to="/">
+        <img src={logo} alt="orbital logo"></img>
+      </Link>
+      <div className="navmenu">
+        <Link to="/">Home</Link>
+        <Link to="/new-request">New</Link>
+        <Link to="/requests">Requests</Link>
+        <Link to="/profile">
+          <div className="profile">
+            <img src={profile} alt="profile"></img>
+          </div>
         </Link>
-        <div className="navmenu">
-          <Link to="/">Home</Link>
-          <Link to="/new-request">New</Link>
-          <Link to="/requests">Requests</Link>
-          <Link to="/profile">
-            <div className="profile">
-              <img src={profile} alt="profile"></img>
-            </div>
-          </Link>
-        </div>
       </div>
     </div>
   );

gs/frontend/mcc/src/common/header.css

@@ -0,0 +1,32 @@
+.nav img {
+  height: 75px;
+  margin: 0;
+}
+
+.nav {
+  background: black;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0 0 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.navmenu {
+  display: flex;
+  align-items: center;
+}
+
+.navmenu a {
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 0 16px;
+  text-decoration: none;
+  font-size: 18px;
+}
+
+.navmenu a:hover {
+  color: rgb(67, 146, 196);
+}

gs/frontend/mcc/src/common/header.tsx

@@ -1,30 +1,20 @@
-import Nav from "react-bootstrap/Nav";
 import { Link } from "react-router-dom";
+import logo from "../assets/logo.png";
+import "./header.css";
 
 function Header() {
   return (
-    <Nav className="header">
-      <Nav.Item className="item">
-        <Nav.Link eventKey="link-1">
-          <Link to="/">Dashboard</Link>
-        </Nav.Link>
-      </Nav.Item>
-      <Nav.Item className="item">
-        <Nav.Link eventKey="link-2">
-          <Link to="/mission-commands">Mission Commands</Link>
-        </Nav.Link>
-      </Nav.Item>
-      <Nav.Item className="item">
-        <Nav.Link eventKey="link-3">
-          <Link to="/telemetry-data">Telemetry Data</Link>
-        </Nav.Link>
-      </Nav.Item>
-      <Nav.Item className="item">
-        <Nav.Link eventKey="link-4">
-          <Link to="/aro-requests">ARO Requests</Link>
-        </Nav.Link>
-      </Nav.Item>
-    </Nav>
+    <div className="nav">
+      <Link to="/">
+        <img src={logo} alt="orbital logo"></img>
+      </Link>
+      <div className="navmenu">
+        <Link to="/">Dashboard</Link>
+        <Link to="/mission-commands">Mission Commands</Link>
+        <Link to="/telemetry-data">Telemetry Data</Link>
+        <Link to="/aro-requests">ARO Requests</Link>
+      </div>
+    </div>
   );
 }
 

gs/frontend/mcc/src/index.css

@@ -25,16 +25,6 @@ code {
     monospace;
 }
 
-.header {
-  background-image: url("./assets/banner.png");
-  border-bottom: 1px solid darkblue;
-}
-
-.header a {
-  text-decoration: none;
-  color: white;
-}
-
 .layout {
   display: flex;
   flex-direction: column;