feat: update header menu breakpoints (#173) (#175)

* feat: update header menu breakpoints (#173)

* feat: update header menu breakpoint (#173)

* feat: updated header action buttons (#173)

---------

Co-authored-by: Fran McDade <[email protected]>

src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx

@@ -1,35 +1,73 @@
+import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
+import {
+  ButtonProps as MButtonProps,
+  IconButton as MIconButton,
+  IconButtonProps as MIconButtonProps,
+} from "@mui/material";
 import { useRouter } from "next/router";
-import React, { useCallback } from "react";
+import React, { ElementType, useCallback } from "react";
 import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
 import { AuthenticationMenu } from "./components/AuthenticationMenu/authenticationMenu";
-import { RequestAuthentication } from "./components/RequestAuthentication/requestAuthentication";
+import { StyledButton } from "./components/Button/button.styles";
 
 export interface AuthenticationProps {
   authenticationEnabled?: boolean;
+  Button: ElementType<MButtonProps> | ElementType<MIconButtonProps>;
   closeMenu: () => void;
 }
 
 export const Authentication = ({
   authenticationEnabled,
+  Button,
   closeMenu,
-}: AuthenticationProps): JSX.Element => {
+}: AuthenticationProps): JSX.Element | null => {
   const { isAuthenticated, requestAuthentication, userProfile } =
     useAuthentication();
   const router = useRouter();
   const onLogout = useCallback((): void => {
     location.href = router.basePath;
   }, [router]);
+
+  if (!authenticationEnabled) return null;
+
   return (
     <>
-      {authenticationEnabled &&
-        (isAuthenticated && userProfile ? (
-          <AuthenticationMenu onLogout={onLogout} userProfile={userProfile} />
-        ) : (
-          <RequestAuthentication
-            closeMenu={closeMenu}
-            requestAuthorization={requestAuthentication}
-          />
-        ))}
+      {isAuthenticated && userProfile ? (
+        <AuthenticationMenu onLogout={onLogout} userProfile={userProfile} />
+      ) : (
+        <Button
+          onClick={(): void => {
+            requestAuthentication();
+            closeMenu();
+          }}
+        />
+      )}
     </>
   );
 };
+
+/**
+ * Renders authentication button.
+ * @param props - Button props.
+ * @returns button.
+ */
+export function renderButton(props: MButtonProps): JSX.Element {
+  return (
+    <StyledButton startIcon={<LoginRoundedIcon />} variant="nav" {...props}>
+      Sign in
+    </StyledButton>
+  );
+}
+
+/**
+ * Renders authentication icon button.
+ * @param props - Button props.
+ * @returns icon button.
+ */
+export function renderIconButton(props: MIconButtonProps): JSX.Element {
+  return (
+    <MIconButton color="ink" {...props}>
+      <LoginRoundedIcon />
+    </MIconButton>
+  );
+}

src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+
+export const StyledButton = styled(MButton)`
+  &.MuiButton-nav {
+    padding: 6px 12px;
+  }
+`;

src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/common/constants.ts

@@ -0,0 +1,9 @@
+import { DialogProps as MDialogProps } from "@mui/material";
+
+export const DIALOG_PROPS: Partial<MDialogProps> = {
+  PaperProps: { elevation: 0 },
+  TransitionProps: { easing: "ease-out" },
+  fullScreen: true,
+  hideBackdrop: true,
+  keepMounted: false,
+};

src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx

@@ -5,8 +5,14 @@ import { ComponentsConfig } from "../../../../../../../../../../../../config/ent
 import { Left, Right } from "../../../../../../../../header.styles";
 import { Announcements } from "../../../../../../../Announcements/announcements";
 import { Actions } from "../../../../actions";
-import { Authentication } from "../../../Authentication/authentication";
-import { Search } from "../../../Search/search";
+import {
+  Authentication,
+  renderIconButton as renderAuthenticationIconButton,
+} from "../../../Authentication/authentication";
+import {
+  renderIconButton as renderSearchIconButton,
+  Search,
+} from "../../../Search/search";
 
 export interface DialogTitleProps {
   actions?: ReactNode;
@@ -36,13 +42,15 @@ export const Toolbar = ({
           <Actions>
             {/* Search */}
             <Search
+              Button={renderSearchIconButton}
               closeMenu={onClose}
               searchEnabled={searchEnabled}
               searchURL={searchURL}
             />
             {/* Authentication */}
             <Authentication
               authenticationEnabled={authenticationEnabled}
+              Button={renderAuthenticationIconButton}
               closeMenu={onClose}
             />
             {/* Additional actions i.e. call-to-action button */}

src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.tsx

@@ -1,19 +1,20 @@
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import { Dialog as MDialog, Fade, IconButton } from "@mui/material";
 import React, { CSSProperties, forwardRef, Fragment, useEffect } from "react";
-import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
 import { getMenuNavigationLinks } from "../../../../../../common/utils";
 import { HeaderProps } from "../../../../../../header";
 import { AppBar } from "../../../../../../header.styles";
 import { Content } from "../../../../content.styles";
 import { Slogan } from "../../../Slogan/slogan";
+import { DIALOG_PROPS } from "./common/constants";
 import { Navigation } from "./components/Content/components/Navigation/navigation.styles";
 import { Socials } from "./components/Content/components/Socials/socials.styles";
 import { Toolbar } from "./components/Toolbar/toolbar";
 
 export interface MenuProps {
   closeMenu: () => void;
   headerProps: HeaderProps;
+  isMenuIn: boolean;
   open: boolean;
   openMenu: () => void;
   pathname?: string;
@@ -22,36 +23,38 @@ export interface MenuProps {
 
 export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
   function HeaderMenu(
-    { closeMenu, headerProps, open, openMenu, pathname, style }: MenuProps,
+    {
+      closeMenu,
+      headerProps,
+      isMenuIn,
+      open,
+      openMenu,
+      pathname,
+      style,
+    }: MenuProps,
     ref
   ): JSX.Element | null {
     const { navigation, slogan, socialMedia } = headerProps;
-    const { smDown } = useBreakpoint();
 
     // Set drawer open state to false on change of media breakpoint from small desktop "md" and up.
     useEffect(() => {
-      if (smDown) return;
+      if (isMenuIn) return;
       closeMenu();
-    }, [closeMenu, smDown]);
+    }, [closeMenu, isMenuIn]);
 
-    if (!smDown) return null;
+    if (!isMenuIn) return null;
 
     return (
       <Fragment>
         <IconButton color="ink" onClick={openMenu} ref={ref} style={style}>
           <MenuRoundedIcon />
         </IconButton>
         <MDialog
-          disableScrollLock
-          fullScreen
-          hideBackdrop
-          keepMounted={false}
+          {...DIALOG_PROPS}
           onClose={closeMenu}
           open={open}
-          PaperProps={{ elevation: 0 }}
           TransitionComponent={Fade}
-          transitionDuration={smDown ? 600 : 0}
-          TransitionProps={{ easing: "ease-out" }}
+          transitionDuration={isMenuIn ? 600 : 0}
         >
           <AppBar component="div" elevation={0}>
             <Toolbar onClose={closeMenu} {...headerProps} />
@@ -61,6 +64,7 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
             <Navigation
               closeAncestor={closeMenu}
               headerProps={headerProps}
+              isMenuIn={isMenuIn}
               links={getMenuNavigationLinks(navigation)}
               pathname={pathname}
             />

src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+
+export const StyledButton = styled(MButton)`
+  &.MuiButton-nav {
+    padding: 6px 12px;
+  }
+`;

src/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.tsx

@@ -1,24 +1,33 @@
-import React, { useState } from "react";
+import {
+  ButtonProps as MButtonProps,
+  IconButton as MIconButton,
+  IconButtonProps as MIconButtonProps,
+} from "@mui/material";
+import React, { ElementType, useState } from "react";
+import { SearchIcon } from "../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { StyledButton } from "./components/Button/button.styles";
 import SearchBar from "./components/SearchBar/searchBar";
-import { SearchButton } from "./components/SearchButton/searchButton";
 
 export interface SearchProps {
+  Button: ElementType<MButtonProps> | ElementType<MIconButtonProps>;
   closeMenu: () => void;
   searchEnabled?: boolean;
   searchURL?: string;
 }
 
 export const Search = ({
+  Button,
   closeMenu,
   searchEnabled,
   searchURL,
-}: SearchProps): JSX.Element => {
+}: SearchProps): JSX.Element | null => {
   const [searchOpen, setSearchOpen] = useState<boolean>(false);
+
+  if (!searchEnabled) return null;
+
   return (
     <>
-      {searchEnabled && (
-        <SearchButton openSearch={(): void => setSearchOpen(true)} />
-      )}
+      <Button onClick={(): void => setSearchOpen(true)} />
       <SearchBar
         closeMenu={closeMenu}
         closeSearch={(): void => setSearchOpen(false)}
@@ -28,3 +37,29 @@ export const Search = ({
     </>
   );
 };
+
+/**
+ * Renders search button.
+ * @param props - Button props.
+ * @returns button.
+ */
+export function renderButton(props: MButtonProps): JSX.Element {
+  return (
+    <StyledButton startIcon={<SearchIcon />} variant="nav" {...props}>
+      Search
+    </StyledButton>
+  );
+}
+
+/**
+ * Renders search icon button.
+ * @param props - Button props.
+ * @returns icon button.
+ */
+export function renderIconButton(props: MIconButtonProps): JSX.Element {
+  return (
+    <MIconButton color="ink" {...props}>
+      <SearchIcon fontSize="medium" />
+    </MIconButton>
+  );
+}

src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/common/constants.ts

@@ -0,0 +1,9 @@
+import { DialogProps as MDialogProps } from "@mui/material";
+
+export const DIALOG_PROPS: Partial<MDialogProps> = {
+  PaperProps: { elevation: 0 },
+  fullScreen: true,
+  hideBackdrop: true,
+  keepMounted: false,
+  transitionDuration: 300,
+};