@ubertheme/mega-menu/src/components/Navigation/navHeader.js

UB Mega Menu Module for Magento PWA Studio

import React, { Fragment } from 'react';
import { useIntl } from 'react-intl';
import { bool, func, shape, string } from 'prop-types';
import {
    ArrowLeft as ArrowLeftIcon,
    Menu as MenuIcon,
    X as CloseIcon
} from 'react-feather';

import { mergeClasses } from '@magento/venia-ui/lib/classify';
import AccountChip from '@magento/venia-ui/lib/components/AccountChip';
import Icon from '@magento/venia-ui/lib/components/Icon';
import Trigger from '@magento/venia-ui/lib/components/Trigger';
import defaultClasses from './navHeader.module.css';
import { useNavigationHeader } from '@magento/peregrine/lib/talons/Navigation/useNavigationHeader';

const UBNavHeader = props => {
    const { isTopLevel, onBack, onClose, view, navTitle } = props;
    const { formatMessage } = useIntl();

    const talonProps = useNavigationHeader({
        isTopLevel,
        onBack,
        view
    });

    const { handleBack, isTopLevelMenu } = talonProps;

    let title = null;
     if (navTitle) {
         title = navTitle;
     } else {
         if (['MY_ACCOUNT', 'SIGN_IN'].includes(view)) {
             title = (
                 <AccountChip
                     fallbackText={formatMessage({
                         id: 'navHeader.accountText',
                         defaultMessage: 'Account'
                     })}
                 />
             );
         } else if (view == 'CREATE_ACCOUNT') {
             title = formatMessage({
                 id: 'navHeader.createAccountText',
                 defaultMessage: 'Create Account'
             })
         } else if (view === 'FORGOT_PASSWORD') {
             title = formatMessage({
                 id: 'navHeader.forgotPasswordText',
                 defaultMessage: 'Forgot Password'
             })
         } else {
             title = formatMessage({
                 id: 'navHeader.mainMenuText',
                 defaultMessage: 'Main Menu'
             })
         }
     }

    const classes = mergeClasses(defaultClasses, props.classes);

    const backIcon = isTopLevelMenu ? MenuIcon : ArrowLeftIcon;
    //const backIcon = isTopLevelMenu ? CloseIcon : ArrowLeftIcon;
    const backButton = (
        <Trigger key="backButton" action={handleBack}>
            <Icon src={backIcon} />
        </Trigger>
    )

    return (
        <Fragment>
            {backButton}
            <h2 key="title" className={classes.title}>
                <span>{title}</span>
            </h2>
            <Trigger key="closeButton" action={onClose}>
                <Icon src={CloseIcon} />
            </Trigger>
        </Fragment>
    );
};

export default UBNavHeader;

UBNavHeader.propTypes = {
    classes: shape({
        title: string
    }),
    isTopLevel: bool,
    onBack: func.isRequired,
    onClose: func.isRequired,
    view: string.isRequired,
    navTitle: string
};