Add all links to navbar

src/components/Navbar.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import "./assets/Navbar.scss";
+import logo from "./assets/img/logo_tr_bg.png"
 
 export default function Navbar(props) {
   const handleBurger = () => {
@@ -29,7 +30,7 @@ export default function Navbar(props) {
     <nav>
       <div className="brand">
         <NavLink to="/" exact>
-          Potentia Robotics
+          <img src={logo} className="nav-logo"></img>
         </NavLink>
       </div>
       <ul className="nav-links">
@@ -46,16 +47,41 @@ export default function Navbar(props) {
           </NavLink>
         </li>
         <li>
+          {" "}
+          <NavLink to="/timeline" activeClassName="active-link">
+            Timeline
+          </NavLink>
+        </li>
+        <li>
+          {" "}
+          <NavLink to="/olympian" activeClassName="active-link">
+            Meet Olympian
+          </NavLink>
+        </li>
+        <li>
+          {" "}
           <NavLink to="/blog" activeClassName="active-link">
             Blog
           </NavLink>
         </li>
+        <li>
+          {" "}
+          <NavLink to="/sponsors" activeClassName="active-link">
+            Sponsors
+          </NavLink>
+        </li>
         <li>
           {" "}
           <NavLink to="/contact" activeClassName="active-link">
             Contact Us
           </NavLink>
         </li>
+        <li>
+          {" "}
+          <NavLink to="/donate" activeClassName="active-link">
+            Donate
+          </NavLink>
+        </li>
       </ul>
       <div className="burger" onClick={handleBurger}>
         <div className="line1"></div>

src/components/assets/Navbar.scss

@@ -36,24 +36,20 @@ nav {
   align-items: center;
   min-height: 10vh;
   font-family: "Poppins", sans-serif;
-  background-color: $black;
 }
 
-.brand {
-  color: $white;
-  background: linear-gradient(135deg, #f0f2f0, 95%, #000c40);
-  background: linear-gradient(135deg, #f0f2f0, 95%, #000c40);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-size: 20px;
-  font-weight: bold;
+.nav-logo {
+  margin-top: 5px;
+  margin-left: -40px;
+  float: left;
+  width: 276px;
+  height: 115px;
 }
 
 .nav-links {
   display: flex;
   justify-content: space-around;
-  width: 20%;
+  width: 750px;
   z-index: 9999;
 
   @include tablet {
@@ -70,7 +66,7 @@ nav {
 }
 
 .active-link {
-  color: $white !important;
+  color: $black !important;
 }
 
 .burger {
@@ -85,7 +81,7 @@ nav {
   }
 }
 
-@include mobile {
+@media (max-width: 1200px) {
   body {
     overflow-x: hidden;
   }