diff --git a/src/components/Header/HeaderTabletAndMobile.tsx b/src/components/Header/HeaderTabletAndMobile.tsx index c4669e2a..c93d0bde 100644 --- a/src/components/Header/HeaderTabletAndMobile.tsx +++ b/src/components/Header/HeaderTabletAndMobile.tsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import { NavLink, Link, useNavigate } from 'react-router-dom'; +import React, { useEffect, useState } from 'react'; +import { NavLink, Link, useNavigate, useLocation } from 'react-router-dom'; import styled from 'styled-components'; import Logo from "./components/LogoMobile"; import menuClearIcon from '../../assets/header/Menu_Cancel_Icon.svg'; @@ -171,10 +171,12 @@ const Header = () => { const navbarMobileList: NavbarMobileList = navMobileListHookResult[0]; const setNavbarMobileList = navMobileListHookResult[1]; const [showLogoutAlert, setShowLogoutAlert] = useState(false); + const [restorePath, setRestorePath] = useState(null); const authData = useAuthContext(); const displayName = authData?.user?.firstName || "N/A"; const navigate = useNavigate(); + const location = useLocation(); const handleLogout = async () => { const logoutStatus = await authData.logout(); @@ -236,6 +238,15 @@ const Header = () => { setNavbarMobileList(navbarSublists[clickTitle]); }; + useEffect(() => { + if (!location?.pathname || location?.pathname === "/") { + setRestorePath(null); + return; + } + + setRestorePath(location?.pathname); + }, [location]); + return ( <> @@ -401,15 +412,13 @@ const Header = () => { > {displayName} - ) - : ( - -
{ if (e.key === "Enter") { setNavMobileDisplay('none'); } }} onClick={() => setNavMobileDisplay('none')}> - Login -
- - - )) : null} + ) : ( + +
{ if (e.key === "Enter") { setNavMobileDisplay('none'); } }} onClick={() => setNavMobileDisplay('none')}> + Login +
+ + )) : null}
{ const clickableTitle = clickableObject.map((item) => item.name); const navigate = useNavigate(); const authData = useAuthContext(); + const location = useLocation(); const displayName = authData?.user?.firstName?.toUpperCase() || "N/A"; const [showLogoutAlert, setShowLogoutAlert] = useState(false); + const [restorePath, setRestorePath] = useState(null); + clickableTitle.push(displayName); useOutsideAlerter(dropdownSelection, nameDropdownSelection); @@ -432,6 +435,16 @@ const NavBar = () => { useEffect(() => { setClickedTitle(""); }, []); + + useEffect(() => { + if (!location?.pathname || location?.pathname === "/") { + setRestorePath(null); + return; + } + + setRestorePath(location?.pathname); + }, [location]); + return (
- ) - : ( - + ) : ( + Login )} diff --git a/src/config/globalHeaderData.tsx b/src/config/globalHeaderData.tsx index edf15c40..97e13f59 100644 --- a/src/config/globalHeaderData.tsx +++ b/src/config/globalHeaderData.tsx @@ -51,10 +51,12 @@ export const navbarSublists = { // className: 'navMobileSubTitle', // }, // ], + // + // To make it a link, the className has to be navMobileSubItem "Model Navigator": DataCommons.map((dc) => ({ name: `${dc.name} Model`, link: `/model-navigator/${dc.name}`, text: '', - className: 'navMobileSubTitle', + className: 'navMobileSubItem', })), };