Cleaner header and hub

gui/rpk-gui/src/components/header/index.tsx

@@ -1,18 +1,21 @@
 import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
 import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
+import HubIcon from '@mui/icons-material/Hub';
+import { Button, Menu, MenuItem } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Avatar from "@mui/material/Avatar";
 import IconButton from "@mui/material/IconButton";
 import Stack from "@mui/material/Stack";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
+import React, { useContext } from "react";
+import { Link } from "react-router";
 import { useGetIdentity } from "@refinedev/core";
 import { HamburgerMenu, RefineThemedLayoutV2HeaderProps } from "@refinedev/mui";
-import React, { useContext } from "react";
 import { ColorModeContext } from "../../contexts/color-mode";
+import { FirmContext } from "../../contexts/FirmContext";
 import { Logout } from "../auth/Logout";
 import { IUser } from "../../interfaces";
-import { FirmContext } from "../../contexts/FirmContext";
 
 export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
   sticky = true,
@@ -22,31 +25,39 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
 
   const { data: user } = useGetIdentity<IUser>();
 
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const openUserMenu = Boolean(anchorEl);
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  }
+  const handleCloseUserMenu = () => {
+    setAnchorEl(null);
+  };
+
   return (
     <AppBar position={sticky ? "sticky" : "relative"}>
       <Toolbar>
         <Stack
           direction="row"
           width="100%"
-          justifyContent="flex-end"
+          justifyContent="space-between"
           alignItems="center"
         >
           <HamburgerMenu />
+          {currentFirm && (
+            <Link to={`/firm/${currentFirm.instance}/${currentFirm.firm}`} ><Typography variant="h4" >{currentFirm.instance}&nbsp;/&nbsp;{currentFirm.firm}</Typography></Link>
+          )}
+          {!currentFirm && (
+            <Link to="/" ><Typography variant="h4">Roleplay&nbsp;Contracts</Typography></Link>
+          )}
+          {(user?.email) && (
+            <Link to="/hub"><HubIcon /></Link>
+          )}
           <Stack
             direction="row"
-            width="100%"
             justifyContent="flex-end"
             alignItems="center"
           >
-            <IconButton
-              color="inherit"
-              onClick={() => {
-                setMode();
-              }}
-            >
-              {mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
-            </IconButton>
-
             {(user?.email) && (
               <Stack
                 direction="row"
@@ -54,7 +65,12 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
                 alignItems="center"
                 justifyContent="center"
               >
-                {user?.email && (
+                <Button
+                  id="user-menu-button"
+                  aria-controls={openUserMenu ? 'user-menu' : undefined}
+                  aria-haspopup="true"
+                  aria-expanded={openUserMenu ? 'true' : undefined}
+                  onClick={handleOpenUserMenu}>
                   <Typography
                     sx={{
                       display: {
@@ -65,12 +81,31 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
                     variant="subtitle2"
                   >
                     {user?.email}
-                  </Typography>
-                )}
-                <Avatar src={"user?.avatar"} alt={user?.email} />
-                <Logout />
+                  </Typography>&nbsp;
+                  <Avatar src={"user?.avatar"} alt={user?.email} />
+                </Button>
+                <Menu
+                  id="user-menu"
+                  anchorEl={anchorEl}
+                  open={openUserMenu}
+                  onClose={handleCloseUserMenu}
+                  MenuListProps={{
+                    'aria-labelledby': 'user-menu-button',
+                  }}
+                >
+                  <MenuItem onClick={handleCloseUserMenu}><Logout /></MenuItem>
+                  <MenuItem onClick={setMode}>
+                    <IconButton color="inherit">
+                      {mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
+                    </IconButton>
+                  </MenuItem>
+                </Menu>
               </Stack>
             )}
+            {!user && (
+              <Link to="/auth/login"><Button>Login</Button></Link>
+            )}
+
           </Stack>
         </Stack>
       </Toolbar>