Task/wp 209 header, footer main menu

react/src/components/HeaderNavBar/HeaderNavBar.module.css

@@ -0,0 +1,10 @@
+.root {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  height: var(--hazmapper-header-navbar-height);
+}
+.userName {
+  color: white;
+}

react/src/components/HeaderNavBar/HeaderNavBar.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Layout } from 'antd';
+import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
+import { useNavigate } from 'react-router-dom';
+import { Button, InlineMessage, LoadingSpinner } from '@tacc/core-components';
+import styles from './HeaderNavBar.module.css';
+
+export const HeaderNavBar: React.FC = () => {
+  const { Header } = Layout;
+  const navigate = useNavigate();
+
+  const {
+    data: userData,
+    isLoading: isUserLoading,
+    error: isUserError,
+  } = useAuthenticatedUser();
+
+  const handleLogin = () => {
+    const url = `/login?to=${encodeURIComponent(location.pathname)}`;
+    navigate(url);
+  };
+
+  if (isUserLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (isUserError) {
+    return (
+      <InlineMessage type="error">
+        {' '}
+        There was an error loading your username.
+      </InlineMessage>
+    );
+  }
+
+  return (
+    <Header className={styles.root}>
+      <img
+        width="150px"
+        src="./src/assets/hazmapper-header-logo.png"
+        alt="Hazmapper Logo"
+      />
+      {userData && userData.username ? (
+        <div className={styles.userName}>{userData.username}</div>
+      ) : (
+        <Button type="link" className={styles.userName} onClick={handleLogin}>
+          Login
+        </Button>
+      )}
+    </Header>
+  );
+};
+export default HeaderNavBar;

react/src/components/HeaderNavBar/index.tsx

@@ -0,0 +1 @@
+export { default } from './HeaderNavBar';

react/src/components/Projects/ProjectListing.module.css

@@ -1,50 +1,90 @@
 .root {
   display: flex;
+  flex-direction: column;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+.errorMessage {
   width: 100%;
+  padding: 10px;
 }
+.errorMessage p {
+  justify-content: center;
+}
+
 .projectList {
-  width: 100%;
-  table-layout: fixed;
+  flex-grow: 1;
+  overflow: hidden;
+  justify-content: center;
   padding: 10px;
 }
-.errorMessage {
+
+.projectList table {
   width: 100%;
-  padding: 10px;
+  table-layout: fixed;
+  border-collapse: collapse;
 }
-.projectList th {
+
+.projectList thead {
+  position: sticky;
+  top: 0;
+  z-index: 10;
   background: #d0d0d0;
+}
+
+.projectList thead th {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  background: #d0d0d0;
+}
+
+.projectList tbody {
+  display: block;
+  max-height: 300px;
+  overflow-y: auto;
 }
-.projectList tr,
-td {
+
+.projectList tr {
+  display: table;
   width: 100%;
+  table-layout: fixed;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
+
 .projectList tr:hover td {
   color: white;
   background-color: var(--global-color-accent--light);
 }
+
 .projectList tr:hover td button {
   color: white;
 }
+
 .mapColumn {
   width: 42%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
+
 .projectColumn {
   width: 42%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
+
 .buttonColumn {
   width: 16%;
   text-align: end;
 }
+
 .buttonColumn button {
   max-width: 100%;
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
   justify-content: flex-start;
 }