Merge pull request #115 from Spiderpig02/develop

fix: 💄 Fix styling of Navbar so that it is visible even when scrolling down on the AboutUs-page
Spiderpig02 · Sep 19, 2024 · 9185871 · 9185871
2 parents 810a9d4 + 212a7af
commit 9185871
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/frontend/src/components/navbar/Navbar.css b/frontend/src/components/navbar/Navbar.css
@@ -7,8 +7,11 @@
   justify-content: flex-start;
   padding: 0.7rem;
   z-index: 1000;
+}
 
-  /* background-color: red; */
+.navbar-solid {
+  background-image: linear-gradient(to right, #05445e, #581c87, #05445e); /* Gradient background */
+  transition: background-color 0.3s ease-in-out;
 }
 
 .navbar-logo {

diff --git a/frontend/src/components/navbar/Navbar.tsx b/frontend/src/components/navbar/Navbar.tsx
@@ -1,12 +1,21 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Link, useLocation } from "react-router-dom";
 import "./Navbar.css";
 
 const Navbar: React.FC = () => {
   const location = useLocation();
+  const [shouldHaveSolidColour, setShouldHaveSolidColour] = useState(false);
+
+  useEffect(() => {
+    if (location.pathname === "/about-us") {
+      setShouldHaveSolidColour(true);
+    } else {
+      setShouldHaveSolidColour(false);
+    }
+  }, [location.pathname]);
 
   return (
-    <nav className="navbar">
+    <nav className={`navbar ${shouldHaveSolidColour ? "navbar-solid" : ""}`}>
       <div className="navbar-logo" onClick={() => (window.location.href = "/")}>
         GalacticPathFinder
       </div>