Merge pull request #32 from bcgov/header-fixes

Header Touch ups

submit-web/src/App.tsx

@@ -7,6 +7,7 @@ import { theme } from "@/styles/theme";
 import RouterProviderWithAuthContext from "@/router";
 import ModalProvider from "./components/Shared/Modals/ModalProvider";
 import SnackBarProvider from "./components/Shared/Snackbar/SnackBarProvider";
+
 const queryClient = new QueryClient();
 
 function App() {

submit-web/src/components/Shared/Drawers/DrawerProvider.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { useDrawer } from "./DrawerStore";
+import { Box, Drawer } from "@mui/material";
+
+const DrawerProvider: React.FC = () => {
+  const { drawerContent, direction, setClose, isOpen } = useDrawer();
+
+  return (
+    <Drawer open={isOpen} onClose={setClose} anchor={direction}>
+      <Box>{drawerContent}</Box>
+    </Drawer>
+  );
+};
+
+export default DrawerProvider;

submit-web/src/components/Shared/Drawers/DrawerStore.ts

@@ -0,0 +1,48 @@
+import { create } from "zustand";
+import React from "react";
+
+// Define the store state and actions
+interface DrawerStore {
+  isOpen: boolean;
+  drawerContent: React.ReactNode | null;
+  direction: "left" | "right" | "top" | "bottom";
+  setOpen: (
+    drawer: React.ReactNode,
+    direction: "left" | "right" | "top" | "bottom",
+  ) => Promise<void>;
+  setClose: () => void;
+}
+
+// Create the Zustand store
+export const useDrawer = create<DrawerStore>((set) => ({
+  isOpen: false,
+  drawerContent: null,
+  direction: "left",
+
+  setOpen: async (drawer, direction) => {
+    if (drawer) {
+      set(() => ({
+        drawerContent: drawer,
+        isOpen: true,
+        direction: direction,
+      }));
+    }
+  },
+
+  setClose: () => {
+    set({
+      isOpen: false,
+      drawerContent: null,
+      direction: "left",
+    });
+  },
+}));
+
+// Export a function called openDrawer
+export const openDrawer = async (
+  drawer: React.ReactNode,
+  direction: "left" | "right" | "top" | "bottom",
+) => {
+  const { setOpen } = useDrawer.getState();
+  await setOpen(drawer, direction);
+};

submit-web/src/components/Shared/Modals/modalStore.ts

@@ -1,45 +1,31 @@
-import {create} from 'zustand'
-import { User } from "@/models/User";
-import { Plan } from '@/models/Plan';
-
-
-// Define the ModalData type
-export type ModalData = {
-  user?: User
-  plan?: Plan
-}
+import { create } from "zustand";
 
 // Define the store state and actions
 interface ModalStore {
-  data: ModalData
-  isOpen: boolean
-  modalContent: React.ReactNode | null
-  setOpen: (modal: React.ReactNode, fetchData?: () => Promise<ModalData>) => Promise<void>
-  setClose: () => void
+  isOpen: boolean;
+  modalContent: React.ReactNode | null;
+  setOpen: (modal: React.ReactNode) => Promise<void>;
+  setClose: () => void;
 }
 
 // Create the Zustand store
 export const useModal = create<ModalStore>((set) => ({
-  data: {},
   isOpen: false,
   modalContent: null,
 
-  setOpen: async (modal, fetchData) => {
+  setOpen: async (modal) => {
     if (modal) {
-      const fetchedData = fetchData ? await fetchData() : {}
-      set((state) => ({
-        data: { ...state.data, ...fetchedData },
+      set(() => ({
         modalContent: modal,
         isOpen: true,
-      }))
+      }));
     }
   },
 
   setClose: () => {
     set({
       isOpen: false,
-      data: {},
       modalContent: null,
-    })
+    });
   },
-}))
+}));

submit-web/src/components/Shared/layout/Header/AppBarActions.tsx

@@ -0,0 +1,82 @@
+import {
+  Box,
+  Typography,
+  Button,
+  Menu,
+  IconButton,
+  MenuItem,
+} from "@mui/material";
+import { useAuth } from "react-oidc-context";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import { theme } from "@/styles/theme";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { useState } from "react";
+import { OidcConfig } from "@/utils/config";
+
+export default function AppBarActions() {
+  const auth = useAuth();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      {auth.isAuthenticated ? (
+        <>
+          <Box id="menu-appbar" display={"flex"} onClick={handleClick}>
+            <Typography variant="body2" color="primary">
+              Hi, <b>{auth.user?.profile.name}</b>
+            </Typography>
+            <IconButton size="small" sx={{ m: 0, p: 0 }}>
+              <KeyboardArrowDownIcon
+                fontSize="small"
+                htmlColor={theme.palette.grey[900]}
+              />
+            </IconButton>
+          </Box>
+          <AccountCircleIcon
+            fontSize="large"
+            htmlColor={theme.palette.grey[900]}
+            sx={{ marginLeft: "0.25rem" }}
+          />
+          <Menu
+            id="menu-appbar"
+            aria-labelledby="menu-appbar"
+            open={open}
+            anchorEl={anchorEl}
+            onClose={handleClose}
+            anchorOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+          >
+            <MenuItem onClick={handleClose}>My Profile</MenuItem>
+            <MenuItem onClick={handleClose}>Sign Out</MenuItem>
+          </Menu>
+        </>
+      ) : (
+        <Button
+          variant="text"
+          color="primary"
+          onClick={() =>
+            auth.signinRedirect({
+              redirect_uri: `${OidcConfig.redirect_uri}${window.location.search}`,
+            })
+          }
+          sx={{ border: `2px solid ${theme.palette.grey[700]}` }}
+        >
+          Sign In
+        </Button>
+      )}
+    </>
+  );
+}

submit-web/src/components/Shared/layout/Header/EAOAppBar.tsx

@@ -0,0 +1,55 @@
+import { AppBar, Grid, Typography } from "@mui/material";
+import EAO_Logo from "@/assets/images/EAO_Logo.png";
+import { AppConfig } from "@/utils/config";
+import AppBarActions from "./AppBarActions";
+import { useIsMobile } from "@/hooks/common";
+import MobileNav from "./MobileNav";
+import { theme } from "@/styles/theme";
+
+export default function EAOAppBar() {
+  const isMobile = useIsMobile();
+  return (
+    <>
+      <AppBar
+        position="static"
+        color="inherit"
+        sx={{
+          borderBottom: `1px solid ${theme.palette.grey[300]}`,
+          boxShadow: "none",
+        }}
+      >
+        <Grid
+          container
+          padding={"0.5rem"}
+          paddingX={isMobile ? 0 : "0.5rem"}
+          margin={0}
+          justifyContent="space-between"
+        >
+          <Grid display="flex" justifyContent="start" alignItems="center">
+            <img src={EAO_Logo} height={isMobile ? 40 : 72} />
+            {!isMobile && (
+              <Typography
+                variant="h2"
+                color="inherit"
+                component="div"
+                paddingLeft={"0.5rem"}
+                fontWeight={"bold"}
+              >
+                {AppConfig.appTitle}
+              </Typography>
+            )}
+          </Grid>
+          <Grid
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            paddingRight={"0.75rem"}
+          >
+            <AppBarActions />
+          </Grid>
+        </Grid>
+      </AppBar>
+      {isMobile && <MobileNav />}
+    </>
+  );
+}