Skip to content

Commit

Permalink
Add link to main page when clicking in HeaderNavBar
Browse files Browse the repository at this point in the history
  • Loading branch information
nathanfranklin committed Dec 4, 2024
1 parent e879744 commit 45ff038
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 8 deletions.
3 changes: 3 additions & 0 deletions react/src/components/HeaderNavBar/HeaderNavBar.module.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
.root {
background-color: black;
color: white;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
height: var(--hazmapper-header-navbar-height);
padding: 5px;
}
.userName {
color: white;
Expand Down
24 changes: 16 additions & 8 deletions react/src/components/HeaderNavBar/HeaderNavBar.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import React from 'react';
import { Layout } from 'antd';
import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useLocation } from 'react-router-dom';
import { Button, InlineMessage, LoadingSpinner } from '@tacc/core-components';
import styles from './HeaderNavBar.module.css';
import * as ROUTES from '@hazmapper/constants/routes';

export const HeaderNavBar: React.FC = () => {
const { Header } = Layout;
const navigate = useNavigate();
const location = useLocation();

const {
data: userData,
isLoading: isUserLoading,
error: isUserError,
} = useAuthenticatedUser();

const handleLogin = () => {
const url = `/login?to=${encodeURIComponent(location.pathname)}`;
const handleLogin = (e: React.MouseEvent) => {
e.stopPropagation();

const url = `${ROUTES.LOGIN}?to=${encodeURIComponent(location.pathname)}`;
navigate(url);
};

Expand All @@ -34,20 +36,26 @@ export const HeaderNavBar: React.FC = () => {
}

return (
<Header className={styles.root}>
<div
className={styles.root}
onKeyDown={() => navigate(ROUTES.MAIN)}
onClick={() => navigate(ROUTES.MAIN)}
role="button"
tabIndex={0}
>
<img
width="150px"
src="./src/assets/hazmapper-header-logo.png"
alt="Hazmapper Logo"
/>
{userData && userData.username ? (
{userData?.username ? (
<div className={styles.userName}>{userData.username}</div>
) : (
<Button type="link" className={styles.userName} onClick={handleLogin}>
Login
</Button>
)}
</Header>
</div>
);
};
export default HeaderNavBar;

0 comments on commit 45ff038

Please sign in to comment.