From 59d64be489cc162ec2f469571621ed8a1c1cdcc3 Mon Sep 17 00:00:00 2001
From: Lewis Grice <lewisgrice2005@icloud.com>
Date: Fri, 26 Apr 2024 02:22:28 +0100
Subject: [PATCH] dashboard and transaction greyed out and won't redirect when
 clicked unless logged in.

---
 src/assets/css/Header.css | 9 +++++++++
 src/components/Header.tsx | 9 ++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/Header.css b/src/assets/css/Header.css
index 42af6c9..dd954d5 100644
--- a/src/assets/css/Header.css
+++ b/src/assets/css/Header.css
@@ -94,4 +94,13 @@ body {
     background-color: transparent;
     border: none;
     cursor: pointer;
+}
+
+.text-muted {
+    color: #6c757d;
+    pointer-events: none;
+}
+
+.bg-transparent {
+    background-color: transparent;
 }
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2fd496f..394cd6e 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import useWindowDimensions from "../hooks/WindowDimensionsHook.tsx";
 import "../assets/css/Header.css"
-import {Link, useNavigate} from "react-router-dom";
+import {Link, useNavigate, useLocation} from "react-router-dom";
 import {auth} from "../utils/firebase.ts";
 
 interface Props {
@@ -16,12 +16,15 @@ export function Header({ user }: Props) {
     const currentUser = auth.currentUser?.displayName?? "";
 
     const navigate = useNavigate();
+    const location = useLocation();
 
     const handleLogout = () => {
         auth.signOut();
         navigate("/", { replace: true });
     };
 
+    const isIndexPage = location.pathname === "/";
+
     return (
         <header className="header">
             {/* App Name reloads home page */}
@@ -32,10 +35,10 @@ export function Header({ user }: Props) {
             {/* Pages */}
             <ul className="header-nav">
                 {/* Links to dashboard with tiles */}
-                <li><Link to="/dash" className="header-item">Dashboard</Link></li>
+                <li><Link to="/dash" className={`header-item ${isIndexPage ? "text-muted bg-transparent" : "header-item"}`}>Dashboard</Link></li>
 
                 {/* Links to transactions page with table of expenses */}
-                <li><Link to="/transactions" className="header-item">Transactions</Link></li>
+                <li><Link to="/transactions" className={`header-item ${isIndexPage ? "text-muted bg-transparent" : "header-item"}`}>Transactions</Link></li>
 
                 <li><Link to="/test" className="header-item">Firestore Test</Link></li>