chore: persist menu in DOM

jumperexchange · May 23, 2024 · 8a3f1d3 · 8a3f1d3
1 parent f70e0bf
commit 8a3f1d3
Show file tree

Hide file tree

Showing 20 changed files with 377 additions and 278 deletions.
diff --git a/src/components/Menu/Menu.style.ts b/src/components/Menu/Menu.style.ts
@@ -46,13 +46,13 @@ export const MenuList = styled(MuiMenuList, {
   justifyContent: cardsLayout ? 'center' : 'unset',
   flexWrap: cardsLayout ? 'wrap' : 'inherit',
   padding: cardsLayout ? theme.spacing(0, 3) : 0,
+  outline: 'unset',
   gap: cardsLayout ? '12px' : 'inherit',
   '& > :first-of-type': {
     marginTop:
       isOpenSubMenu || hasLabel || cardsLayout ? 'inherit' : theme.spacing(1.5),
-    paddingTop: isOpenSubMenu ? theme.spacing(1.5) : 'inherit',
   },
-  '& > :last-child': {
+  '& > li:last-of-type': {
     marginBottom: isOpenSubMenu ? 'inherit' : theme.spacing(3),
     paddingBottom: isOpenSubMenu ? theme.spacing(1.5) : 'inherit',
     paddingTop: hasLabel ? 0 : 'inherit',
@@ -68,7 +68,7 @@ export const MenuHeaderLabel = styled(Typography)(({ theme }) => ({
   display: 'flex',
   marginRight: theme.spacing(4.75),
   flexWrap: 'nowrap',
-  [theme.breakpoints.up('sm' as Breakpoint)]: {
+  [theme.breakpoints.up('md' as Breakpoint)]: {
     maxWidth: 174,
     marginRight: 0,
     marginLeft: theme.spacing(0.75),
@@ -78,14 +78,16 @@ export const MenuHeaderLabel = styled(Typography)(({ theme }) => ({
 export interface MenuPaperProps
   extends Omit<PaperProps, 'isDarkMode' | 'isWide' | 'component'> {
   isMobile?: boolean;
+  show: boolean;
   width?: string;
   component?: ElementType<any>;
 }
 
 export const MenuPaper = styled(Paper, {
   shouldForwardProp: (prop) =>
-    prop !== 'isMobile' && prop !== 'isWide' && prop !== 'isSubMenu',
-})<MenuPaperProps>(({ theme, isMobile, width }) => ({
+    prop !== 'isMobile' && prop !== 'isWide' && prop !== 'show',
+})<MenuPaperProps>(({ theme, isMobile, width, show }) => ({
+  display: !show ? 'none' : 'block',
   background: theme.palette.surface1.main,
   padding: 0,
   marginTop: 0,
@@ -99,11 +101,13 @@ export const MenuPaper = styled(Paper, {
         }8px 16px rgba(0, 0, 0, 0.16)`,
   borderRadius: '12px 12px 0 0',
   marginBottom: 0,
+
   maxHeight: `calc( 100vh - ${MENU_LABEL_HEIGHT}px - 12px )`, // viewHeight - navbarHeight - offset
   overflowY: 'auto',
   overflowX: 'hidden',
   width: '100%',
   transformOrigin: 'bottom',
+  height: '100% !important',
   transition:
     'opacity 307ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 204ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
 
@@ -112,6 +116,8 @@ export const MenuPaper = styled(Paper, {
     height: 32,
   },
 
+  '.submenu': { paddingBottom: theme.spacing(1.5) },
+
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     maxHeight: 'calc( 100vh - 72px - 12px )',
   },
@@ -138,7 +144,6 @@ export const MenuItemLink = styled(Link, {
 })<MenuItemLinkProps>(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
-  padding: theme.spacing(0, 1.5),
   height: 48,
   textDecoration: 'none',
   color: 'inherit',

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -8,6 +8,7 @@ interface MenuProps {
   setOpen: (open: boolean, anchorRef: any) => void;
   cardsLayout?: boolean;
   styles?: SxProps<Theme>;
+  keepMounted?: boolean;
   open: boolean;
   children: any;
   width?: string;
@@ -19,6 +20,7 @@ export const Menu = ({
   setOpen,
   cardsLayout,
   styles,
+  keepMounted,
   width,
   label,
   isOpenSubMenu,
@@ -32,6 +34,7 @@ export const Menu = ({
       label={label}
       open={open}
       styles={styles}
+      keepMounted={keepMounted}
       width={width}
       cardsLayout={cardsLayout}
       setOpen={setOpen}
@@ -45,8 +48,8 @@ export const Menu = ({
       label={label}
       open={open}
       styles={styles}
+      keepMounted={keepMounted}
       cardsLayout={cardsLayout}
-      setOpen={setOpen}
       isOpenSubMenu={isOpenSubMenu || false}
     >
       {children}

diff --git a/src/components/Menu/MenuDesktop.tsx b/src/components/Menu/MenuDesktop.tsx
@@ -1,8 +1,7 @@
 import { MenuKeysEnum, MenuMain } from '@/const/menuKeys';
 import { useMenuStore } from '@/stores/menu/MenuStore';
 import type { SxProps, Theme } from '@mui/material';
-import { Fade, Typography } from '@mui/material';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { ClickAwayListener, Fade, Typography } from '@mui/material';
 import type { KeyboardEvent } from 'react';
 import {
   MenuHeaderAppBar,
@@ -17,6 +16,7 @@ interface MenuProps {
   transformOrigin?: string;
   cardsLayout?: boolean;
   styles?: SxProps<Theme>;
+  keepMounted?: boolean;
   setOpen: (open: boolean, anchorRef: any) => void;
   open: boolean;
   children: any;
@@ -28,6 +28,7 @@ export const MenuDesktop = ({
   isOpenSubMenu,
   setOpen,
   styles,
+  keepMounted,
   transformOrigin,
   cardsLayout,
   width,
@@ -36,7 +37,9 @@ export const MenuDesktop = ({
   children,
   anchorEl,
 }: MenuProps) => {
-  const { openSubMenu, closeAllMenus } = useMenuStore((state) => state);
+  const { openedMenu, openSubMenu, closeAllMenus } = useMenuStore(
+    (state) => state,
+  );
 
   function handleListKeyDown(event: KeyboardEvent) {
     if (event.key === 'Tab' || event.key === 'Escape') {
@@ -45,67 +48,72 @@ export const MenuDesktop = ({
     }
   }
 
-  return open ? (
-    <>
+  return (
+    <ClickAwayListener
+      touchEvent={'onTouchStart'}
+      mouseEvent={'onMouseDown'}
+      onClickAway={(event) => {
+        console.log('Click Away Listener');
+        setTimeout(() => {
+          event.stopPropagation();
+          event.preventDefault();
+          open && closeAllMenus();
+        }, 150);
+      }}
+    >
       <MenuPopper
         open={open}
         anchorEl={anchorEl}
+        keepMounted={keepMounted}
         transition
-        disablePortal
         placement="bottom-end"
       >
         {({ TransitionProps }) => (
           <Fade
             {...TransitionProps}
+            in={open}
             style={{
               transformOrigin: transformOrigin || 'top',
             }}
           >
-            <MenuPaper width={width}>
-              <ClickAwayListener
-                onClickAway={(event) => {
-                  event.preventDefault();
-                  closeAllMenus();
-                }}
+            <MenuPaper show={open} width={width} className="menu-paper">
+              <MenuList
+                autoFocusItem={open}
+                id="main-burger-menu"
+                autoFocus={open}
+                isOpenSubMenu={openSubMenu !== MenuKeysEnum.None}
+                aria-labelledby="main-burger-menu"
+                onKeyDown={handleListKeyDown}
+                cardsLayout={cardsLayout}
+                hasLabel={!!label}
+                sx={styles}
+                component={
+                  isOpenSubMenu && openSubMenu !== MenuMain.WalletSelect
+                    ? 'div'
+                    : 'ul'
+                }
               >
-                <MenuList
-                  autoFocusItem={open}
-                  id="main-burger-menu"
-                  autoFocus={open}
-                  isOpenSubMenu={openSubMenu !== MenuKeysEnum.None}
-                  aria-labelledby="main-burger-menu"
-                  onKeyDown={handleListKeyDown}
-                  cardsLayout={cardsLayout}
-                  hasLabel={!!label}
-                  sx={styles}
-                  component={
-                    isOpenSubMenu && openSubMenu !== MenuMain.WalletSelect
-                      ? 'div'
-                      : 'ul'
-                  }
-                >
-                  {!!label ? (
-                    <MenuHeaderAppWrapper>
-                      <MenuHeaderAppBar component="div" elevation={0}>
-                        <Typography
-                          variant={'lifiBodyMediumStrong'}
-                          width={'100%'}
-                          align={'center'}
-                          flex={1}
-                          noWrap
-                        >
-                          {label}
-                        </Typography>
-                      </MenuHeaderAppBar>
-                    </MenuHeaderAppWrapper>
-                  ) : null}
-                  {children}
-                </MenuList>
-              </ClickAwayListener>
+                {!!label ? (
+                  <MenuHeaderAppWrapper>
+                    <MenuHeaderAppBar component="div" elevation={0}>
+                      <Typography
+                        variant={'lifiBodyMediumStrong'}
+                        width={'100%'}
+                        align={'center'}
+                        flex={1}
+                        noWrap
+                      >
+                        {label}
+                      </Typography>
+                    </MenuHeaderAppBar>
+                  </MenuHeaderAppWrapper>
+                ) : null}
+                {children}
+              </MenuList>
             </MenuPaper>
           </Fade>
         )}
       </MenuPopper>
-    </>
-  ) : null;
+    </ClickAwayListener>
+  );
 };
diff --git a/src/components/Menu/MenuItem.style.ts b/src/components/Menu/MenuItem.style.ts
@@ -1,4 +1,3 @@
-'use client';
 import type {
   ListItemProps,
   MenuItemProps as MUIMenuItemProps,