Feature/5883 update header

src/components/layout/components/Header.tsx

@@ -1,24 +1,42 @@
 import { FC } from "react";
-import MainMenu from "./MainMenu";
-import { padding } from "../../../styles/constants";
+import { color, padding } from "../../../styles/constants";
 import AODNSiteLogo from "./AODNSiteLogo";
 import SectionContainer from "./SectionContainer";
+import { Box } from "@mui/material";
+import HeaderMenu from "./HeaderMenu";
 
 const Header: FC = () => {
   return (
-    <SectionContainer
-      sectionAreaStyle={{
-        backgroundColor: "#fff",
-        paddingY: padding.medium,
-      }}
-      contentAreaStyle={{
-        flexDirection: "row",
-        justifyContent: "space-between",
-      }}
-    >
-      <AODNSiteLogo />
-      <MainMenu />
-    </SectionContainer>
+    <>
+      <SectionContainer
+        sectionAreaStyle={{
+          backgroundColor: color.blue.xLight,
+        }}
+      >
+        <Box
+          display="flex"
+          justifyContent="end"
+          alignItems="center"
+          width="100%"
+        >
+          <HeaderMenu />
+        </Box>
+      </SectionContainer>
+      <SectionContainer
+        sectionAreaStyle={{
+          backgroundColor: "#fff",
+          paddingY: padding.medium,
+        }}
+        contentAreaStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        <AODNSiteLogo />
+        {/* disable the MainMenu for demo, will implement later once design is finished */}
+        {/* <MainMenu /> */}
+      </SectionContainer>
+    </>
   );
 };
 

src/components/layout/components/HeaderMenu.tsx

@@ -0,0 +1,134 @@
+import { FC, useState } from "react";
+import { type Menu } from "../../menu/PlainMenu";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  Link,
+  Stack,
+  Typography,
+} from "@mui/material";
+import HoverMenu from "../../menu/HoverMenu";
+import {
+  color,
+  fontColor,
+  fontWeight,
+  gap,
+  margin,
+  padding,
+} from "../../../styles/constants";
+
+const HeaderMenu: FC = () => {
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  // Leave this component here because it is one of the menu items
+  const DisclaimerDialog: FC<{ open: boolean; onClose: () => void }> = ({
+    open,
+    onClose,
+  }) => (
+    <Dialog open={open} onClose={onClose}>
+      <DialogActions sx={{ position: "absolute", right: gap.sm }}>
+        <Button onClick={onClose}>X</Button>
+      </DialogActions>
+      <Box
+        display="flex"
+        justifyContent="center"
+        width="100%"
+        paddingY={padding.medium}
+      >
+        <Typography
+          padding={0}
+          color={fontColor.blue.dark}
+          fontWeight={fontWeight.bold}
+        >
+          Disclaimer
+        </Typography>
+      </Box>
+      <Box
+        width="100%"
+        padding={padding.medium}
+        bgcolor={color.blue.xLight}
+        marginBottom={margin.xxlg}
+      >
+        <Typography padding={0}>
+          You accept all risks and responsibility for losses, damages, costs and
+          other consequences resulting directly or indirectly from using this
+          site and any information or material available from it.
+          <br />
+          <br />
+          If you have any concerns about the veracity of the data, please make
+          enquiries via&nbsp;
+          <Link href={"mailto:[email protected]"}>[email protected]</Link>&nbsp;to
+          be directed to the data custodian.
+        </Typography>
+      </Box>
+    </Dialog>
+  );
+
+  const HEADER_MENUS: Menu[] = [
+    {
+      menuName: "About Us",
+      items: [
+        {
+          name: "About IMOS",
+          handler: () => window.open("https://imos.org.au/"),
+        },
+        {
+          name: "About AODN",
+          handler: () =>
+            window.open(
+              "https://imos.org.au/data/about-the-australian-ocean-data-network"
+            ),
+        },
+        {
+          name: "Contact Us Email",
+          handler: () => window.open("mailto:[email protected]"),
+        },
+      ],
+    },
+    {
+      menuName: "Resources",
+      items: [
+        {
+          name: "Acknowledging Us",
+          handler: () =>
+            window.open("https://imos.org.au/resources/acknowledging-us"),
+        },
+        {
+          name: "Disclaimer",
+          handler: () => {
+            setDialogOpen(true);
+            return null;
+          },
+        },
+        {
+          name: "Contributing Data",
+          handler: () =>
+            window.open("https://help.aodn.org.au/contributing-data/"),
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        justifyContent="center"
+        alignItems="center"
+        spacing={4}
+      >
+        {HEADER_MENUS.map((menu, index) => (
+          <HoverMenu menu={menu} key={index} />
+        ))}
+      </Stack>
+      <DisclaimerDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+      />
+    </>
+  );
+};
+
+export default HeaderMenu;

src/components/menu/HoverMenu.tsx

@@ -0,0 +1,124 @@
+import React, { useState, useRef } from "react";
+import {
+  Popper,
+  Paper,
+  MenuList,
+  MenuItem,
+  Grow,
+  ClickAwayListener,
+  Button,
+} from "@mui/material";
+import { TransitionProps } from "@mui/material/transitions";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import {
+  border,
+  borderRadius,
+  color,
+  fontColor,
+  fontSize,
+} from "../../styles/constants";
+
+interface MenuItem {
+  name: string;
+  handler: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+export interface Menu {
+  menuName: string;
+  items: MenuItem[];
+}
+
+interface HoverMenuProps {
+  menu: Menu;
+}
+
+const HoverMenu: React.FC<HoverMenuProps> = ({ menu }) => {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement>(null);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleListKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Tab") {
+      event.preventDefault();
+      setOpen(false);
+    } else if (event.key === "Escape") {
+      setOpen(false);
+    }
+  };
+
+  const renderMenuItems = ({
+    TransitionProps,
+  }: {
+    TransitionProps?: Partial<TransitionProps>;
+  }) => (
+    <Grow {...TransitionProps}>
+      <Paper
+        elevation={0}
+        sx={{
+          border: `${border.xs} ${color.blue.dark}`,
+          borderRadius: borderRadius.small,
+        }}
+      >
+        <ClickAwayListener onClickAway={handleClose}>
+          <MenuList
+            autoFocusItem={open}
+            onKeyDown={handleListKeyDown}
+            onMouseEnter={() => setOpen(true)}
+            onMouseLeave={() => setOpen(false)}
+          >
+            {menu.items.map((item, index) => (
+              <MenuItem
+                onClick={(event) => {
+                  item.handler(event);
+                  handleClose();
+                }}
+                key={index}
+                sx={{
+                  fontSize: fontSize.info,
+                  bgcolor: "transparent",
+                  ":hover": { bgcolor: color.blue.xLight },
+                }}
+              >
+                {item.name}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </ClickAwayListener>
+      </Paper>
+    </Grow>
+  );
+
+  return (
+    <>
+      <Button
+        ref={anchorRef}
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        endIcon={<KeyboardArrowDownIcon />}
+        sx={{
+          backgroundColor: "transparent",
+          border: "none",
+          color: fontColor.blue.dark,
+          fontSize: fontSize.info,
+        }}
+      >
+        {menu.menuName}
+      </Button>
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        placement="bottom-start"
+        transition
+        disablePortal
+        sx={{ zIndex: 1 }}
+      >
+        {renderMenuItems}
+      </Popper>
+    </>
+  );
+};
+
+export default HoverMenu;