From a5ea74c996dd3aa7fd6626c91ec410367928f560 Mon Sep 17 00:00:00 2001
From: Mattias <mattias.rasmusson.1032@student.lu.se>
Date: Thu, 4 Apr 2024 10:29:25 +0200
Subject: [PATCH] Add useNavigate hook and handle navigation based on user
 "role"

---
 frontend/src/Components/Header.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Components/Header.tsx b/frontend/src/Components/Header.tsx
index eb4fa5a..9be2f4b 100644
--- a/frontend/src/Components/Header.tsx
+++ b/frontend/src/Components/Header.tsx
@@ -1,6 +1,6 @@
 //info: Header component to display the header of the page including the logo and user information where thr user can logout
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import backgroundImage from "../assets/1.jpg";
 
 /**
@@ -9,23 +9,33 @@ import backgroundImage from "../assets/1.jpg";
  */
 function Header(): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
+  const username = localStorage.getItem("username");
+  const navigate = useNavigate();
 
   const handleLogout = (): void => {
     localStorage.clear();
   };
 
+  const handleNavigation = (): void => {
+    if (username === "admin") {
+      navigate("/admin");
+    } else {
+      navigate("/yourProjects");
+    }
+  };
+
   return (
     <header
       className="fixed top-0 left-0 right-0 border-[1.75px] border-black text-black p-3 pl-5 flex items-center justify-between bg-cover"
       style={{ backgroundImage: `url(${backgroundImage})` }}
     >
-      <Link to="/your-projects">
+      <div onClick={handleNavigation}>
         <img
           src="/src/assets/Logo.svg"
           alt="TTIME Logo"
           className="w-11 h-14 cursor-pointer"
         />
-      </Link>
+      </div>
 
       <div
         className="relative"