chore: persist menu in DOM

src/components/Menu/Menu.style.ts

@@ -1,6 +1,7 @@
 'use client';
 import type {
   AppBarProps,
+  BoxProps,
   CSSObject,
   LinkProps,
   ListItemProps,
@@ -10,6 +11,7 @@ import type {
 } from '@mui/material';
 import {
   AppBar,
+  Box,
   Drawer,
   Link,
   ListItem,
@@ -46,13 +48,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 +70,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 +80,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 +103,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 +118,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 +146,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',
@@ -193,3 +200,19 @@ export const MenuHeaderAppBar = styled(AppBar)<MenuHeaderAppBarProps>(
     },
   }),
 );
+
+export interface MenuClickAwayBoxProps extends Omit<BoxProps, 'component'> {
+  open: boolean;
+}
+
+export const MenuClickAwayBox = styled(Box)<MenuClickAwayBoxProps>(
+  ({ open }) => ({
+    display: open ? 'block' : 'none',
+    position: 'absolute',
+    left: 0,
+    width: '100%',
+    top: 0,
+    zIndex: -1,
+    backgroundColor: 'transparent',
+  }),
+);

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}

src/components/Menu/MenuClickAwayListener.tsx

@@ -0,0 +1,31 @@
+import { useMenuStore } from '@/stores/menu/MenuStore';
+import type { CSSObject } from '@mui/material';
+import type { PropsWithChildren } from 'react';
+import { MenuClickAwayBox } from './Menu.style';
+interface MenuClickAwayListenerProps {
+  open: boolean;
+  styles?: CSSObject;
+}
+
+export const MenuClickAwayListener: React.FC<
+  PropsWithChildren<MenuClickAwayListenerProps>
+> = ({ open, children, styles }) => {
+  const { closeAllMenus } = useMenuStore((state) => state);
+
+  return open ? (
+    <MenuClickAwayBox
+      open={open}
+      className="click-away"
+      sx={styles}
+      onClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        closeAllMenus();
+      }}
+    >
+      {children}
+    </MenuClickAwayBox>
+  ) : (
+    children
+  );
+};

src/components/Menu/MenuDesktop.tsx

@@ -2,7 +2,6 @@ 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 type { KeyboardEvent } from 'react';
 import {
   MenuHeaderAppBar,
@@ -11,12 +10,14 @@ import {
   MenuPaper,
   MenuPopper,
 } from './Menu.style';
+import { MenuClickAwayListener } from './MenuClickAwayListener';
 interface MenuProps {
   isOpenSubMenu: boolean;
   label?: string;
   transformOrigin?: string;
   cardsLayout?: boolean;
   styles?: SxProps<Theme>;
+  keepMounted?: boolean;
   setOpen: (open: boolean, anchorRef: any) => void;
   open: boolean;
   children: any;
@@ -28,6 +29,7 @@ export const MenuDesktop = ({
   isOpenSubMenu,
   setOpen,
   styles,
+  keepMounted,
   transformOrigin,
   cardsLayout,
   width,
@@ -36,7 +38,7 @@ export const MenuDesktop = ({
   children,
   anchorEl,
 }: MenuProps) => {
-  const { openSubMenu, closeAllMenus } = useMenuStore((state) => state);
+  const { openSubMenu } = useMenuStore((state) => state);
 
   function handleListKeyDown(event: KeyboardEvent) {
     if (event.key === 'Tab' || event.key === 'Escape') {
@@ -45,67 +47,61 @@ export const MenuDesktop = ({
     }
   }
 
-  return open ? (
-    <>
+  return (
+    <MenuClickAwayListener open={open} styles={{ height: '100vh' }}>
       <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;
+    </MenuClickAwayListener>
+  );
 };

src/components/Menu/MenuItem.style.ts

@@ -1,4 +1,3 @@
-'use client';
 import type {
   ListItemProps,
   MenuItemProps as MUIMenuItemProps,