1  import { MenuIcon } from '@heroicons/react/outline';
  2  import { Trans } from '@lingui/macro';
  3  import { useLingui } from '@lingui/react';
  4  import {
  5    Box,
  6    Button,
  7    Divider,
  8    List,
  9    ListItem,
 10    ListItemIcon,
 11    ListItemText,
 12    SvgIcon,
 13    Typography,
 14  } from '@mui/material';
 15  import React, { ReactNode, useEffect, useState } from 'react';
 16  import { useModalContext } from 'src/hooks/useModal';
 17  import { PROD_ENV } from 'src/utils/marketsAndNetworksConfig';
 18  
 19  import { Link } from '../components/primitives/Link';
 20  import { moreNavigation } from '../ui-config/menu-items';
 21  import { DarkModeSwitcher } from './components/DarkModeSwitcher';
 22  import { DrawerWrapper } from './components/DrawerWrapper';
 23  import { LanguageListItem, LanguagesList } from './components/LanguageSwitcher';
 24  import { MobileCloseButton } from './components/MobileCloseButton';
 25  import { NavItems } from './components/NavItems';
 26  import { TestNetModeSwitcher } from './components/TestNetModeSwitcher';
 27  
 28  interface MobileMenuProps {
 29    open: boolean;
 30    setOpen: (value: boolean) => void;
 31    headerHeight: number;
 32  }
 33  
 34  const MenuItemsWrapper = ({ children, title }: { children: ReactNode; title: ReactNode }) => (
 35    <Box sx={{ mb: 6, '&:last-of-type': { mb: 0, '.MuiDivider-root': { display: 'none' } } }}>
 36      <Box sx={{ px: 2 }}>
 37        <Typography variant="subheader2" sx={{ color: '#A5A8B6', px: 4, py: 2 }}>
 38          {title}
 39        </Typography>
 40  
 41        {children}
 42      </Box>
 43  
 44      <Divider sx={{ borderColor: '#F2F3F729', mt: 6 }} />
 45    </Box>
 46  );
 47  
 48  export const MobileMenu = ({ open, setOpen, headerHeight }: MobileMenuProps) => {
 49    const { i18n } = useLingui();
 50    const [isLanguagesListOpen, setIsLanguagesListOpen] = useState(false);
 51    const { openReadMode } = useModalContext();
 52  
 53    useEffect(() => setIsLanguagesListOpen(false), [open]);
 54  
 55    const handleOpenReadMode = () => {
 56      setOpen(false);
 57      openReadMode();
 58    };
 59  
 60    return (
 61      <>
 62        {open ? (
 63          <MobileCloseButton setOpen={setOpen} />
 64        ) : (
 65          <Button
 66            id="settings-button-mobile"
 67            variant="surface"
 68            sx={{ p: '7px 8px', minWidth: 'unset', ml: 2 }}
 69            onClick={() => setOpen(true)}
 70          >
 71            <SvgIcon sx={{ color: '#F1F1F3' }} fontSize="small">
 72              <MenuIcon />
 73            </SvgIcon>
 74          </Button>
 75        )}
 76  
 77        <DrawerWrapper open={open} setOpen={setOpen} headerHeight={headerHeight}>
 78          {!isLanguagesListOpen ? (
 79            <>
 80              <MenuItemsWrapper title={<Trans>Menu</Trans>}>
 81                <NavItems setOpen={setOpen} />
 82              </MenuItemsWrapper>
 83              <MenuItemsWrapper title={<Trans>Global settings</Trans>}>
 84                <List>
 85                  <DarkModeSwitcher />
 86                  {PROD_ENV && <TestNetModeSwitcher />}
 87                  <LanguageListItem onClick={() => setIsLanguagesListOpen(true)} />
 88                </List>
 89              </MenuItemsWrapper>
 90              <MenuItemsWrapper title={<Trans>Links</Trans>}>
 91                <List>
 92                  <ListItem sx={{ cursor: 'pointer', color: '#F1F1F3' }} onClick={handleOpenReadMode}>
 93                    <ListItemText>
 94                      <Trans>Watch wallet</Trans>
 95                    </ListItemText>
 96                  </ListItem>
 97                  <ListItem
 98                    sx={{ color: '#F1F1F3' }}
 99                    component={Link}
100                    href={'/v3-migration'}
101                    onClick={() => setOpen(false)}
102                  >
103                    <ListItemText>
104                      <Trans>Migrate to Aave V3</Trans>
105                    </ListItemText>
106                  </ListItem>
107                  {moreNavigation.map((item, index) => (
108                    <ListItem component={Link} href={item.link} sx={{ color: '#F1F1F3' }} key={index}>
109                      <ListItemIcon sx={{ minWidth: 'unset', mr: 3 }}>
110                        <SvgIcon sx={{ fontSize: '20px', color: '#F1F1F3' }}>{item.icon}</SvgIcon>
111                      </ListItemIcon>
112  
113                      <ListItemText>{i18n._(item.title)}</ListItemText>
114                    </ListItem>
115                  ))}
116                </List>
117              </MenuItemsWrapper>
118            </>
119          ) : (
120            <List sx={{ px: 2 }}>
121              <LanguagesList onClick={() => setIsLanguagesListOpen(false)} />
122            </List>
123          )}
124        </DrawerWrapper>
125      </>
126    );
127  };