import { EnergyWebLogo } from '@energyweb/origin-ui-assets' ; import { BoxProps , Drawer , List , PaperProps } from '@mui/material' ; import React , { FC , ReactNode , useMemo } from 'react' ; import { CloseButton } from '../../buttons' ; import { IconLink } from '../../icons' ; import { UsernameAndOrg , UsernameAndOrgProps , } from '../../layout/UsernameAndOrg' ; import { TMenuSection , NavBarSection } from '../NavBarSection' ; import { useStyles } from './MobileNav.styles' ; export interface MobileNavProps { open : boolean ; onClose : ( ) => void ; userAndOrgData : UsernameAndOrgProps ; isAuthenticated : boolean ; menuSections : TMenuSection [ ] ; icon ? : ReactNode ; iconWrapperProps ? : BoxProps ; paperProps ? : PaperProps ; } export const MobileNav = ( { open , onClose , menuSections , isAuthenticated , userAndOrgData , icon , iconWrapperProps , paperProps , } ) => { const classes = useStyles ( ) ; const wrapperProps = useMemo ( ( ) => ( { className : classes . userAndOrg } ) , [ ] ) ; return ( < Drawer anchor = "left" open = { open } variant = "persistent" className = { classes . drawer } PaperProps = { paperProps } > < CloseButton onClose = { onClose } /> < IconLink url = "/" wrapperProps = { iconWrapperProps } > { icon ? icon : < EnergyWebLogo className = { classes . logo } />} < /IconLink> { isAuthenticated && ( < UsernameAndOrg wrapperProps = { wrapperProps } { ... userAndOrgData } />)} < List className = { classes . list } > { menuSections ?. map ( ( { sectionTitle , rootUrl , show , menuList } ) => ( < NavBarSection closeMobileNav = { onClose } key = { sectionTitle } sectionTitle = { sectionTitle } isOpen = { true } rootUrl = { rootUrl } show = { show } menuList = { menuList } / > ) ) } < /List> < /Drawer>); } ;