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

UB Mega Menu Module for Magento PWA Studio

import React, { Suspense } from 'react';
import { shape, string } from 'prop-types';
import { mergeClasses } from '@magento/venia-ui/lib/classify';
import AuthBar from '@magento/venia-ui/lib/components/AuthBar';
import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
import LoadingIndicator from "@magento/venia-ui/lib/components/LoadingIndicator";
import { useNavigation } from '../../talons/Navigation/useNavigation';
import UBNavHeader from './navHeader';
import UBMegaMenu from '../../components/MegaMenu';
import defaultClasses from './navigation.module.css';

const AuthModal = React.lazy(() => import('@magento/venia-ui/lib/components/AuthModal'));

const UBNavigation = props => {
    const {
        parentMenuItemId,
        setParentMenuItemId,
        navTitle,
        setNavTitle,
        setBackMenuItem,
        handleBack,
        handleClose,
        hasModal,
        isOpen,
        isTopLevel,
        showCreateAccount,
        showForgotPassword,
        showMainMenu,
        showMyAccount,
        showSignIn,
        view
    } = useNavigation();

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

    //const rootClassName = isOpen ? classes.root_open : classes.root;
    let rootClassName = isOpen ? classes.root_open : classes.root;
    const modalClassName = hasModal ? classes.modal_open : classes.modal;
    const bodyClassName = hasModal ? classes.body_masked : classes.body;

    const rootHeaderClassName =
        isTopLevel && view === 'MENU' ? classes.isRoot : classes.header;

    const isDarkMode = false;
    if (isDarkMode){
        rootClassName = `${rootClassName} ${classes.dark_style}`;
    } else {
        rootClassName = `${rootClassName}`;
    }

    // Lazy load the auth modal because it may not be needed.
    const authModal = hasModal ? (
        <div className={modalClassName}>
            <Suspense fallback={<LoadingIndicator />}>
            <AuthModal
                closeDrawer={handleClose}
                showCreateAccount={showCreateAccount}
                showForgotPassword={showForgotPassword}
                showMainMenu={showMainMenu}
                showMyAccount={showMyAccount}
                showSignIn={showSignIn}
                view={view}
            />
            </Suspense>
        </div>
    ) : null;

    const header = (
        <header className={classes.header}>
            <UBNavHeader
                isTopLevel={isTopLevel}
                onBack={handleBack}
                onClose={handleClose}
                view={view}
                navTitle={navTitle}
            />
        </header>
    );

    const menu =
        view === 'MENU' ? (
            <div className={bodyClassName}>
                <UBMegaMenu
                    menuType="off-canvas"
                    menuKey={props.menuKey}
                    onNavigate={handleClose}
                    parentMenuItemId={parentMenuItemId}
                    setParentMenuItemId={setParentMenuItemId}
                    setBackMenuItem={setBackMenuItem}
                    setNavTitle={setNavTitle}
                />
            </div>
        ) : null;

    const footer = !parentMenuItemId ? (
        <div className={classes.footer}>
            <div className={classes.switchers}>
                <StoreSwitcher />
                <CurrencySwitcher />
            </div>
            <AuthBar
                disabled={hasModal}
                showMyAccount={showMyAccount}
                showSignIn={showSignIn}
            />
        </div>
    ) : null;

    return (
        <aside className={rootClassName}>
            {header}
            {menu}
            {footer}
            {authModal}
        </aside>
    );
};

export default UBNavigation;

UBNavigation.propTypes = {
    classes: shape({
        body: string,
        form_closed: string,
        form_open: string,
        footer: string,
        header: string,
        root: string,
        root_open: string,
        menuKey: string,
        dark_style: string,
        signIn_closed: string,
        signIn_open: string,
        isRoot: string
    })
};