it transit in like any menu or mega-menu (containerRef) easy pizzy === `it's pizza time`
Tags: webdev, react, nextjs, mui
Published: 2022-09-27 10:46:16

lots of guys think simple popup would do; lot's guys think modal would do but I think a <Box> is more generic way to achieve it ; however it is never ending saga. 
```
import * as React from 'react';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';
import Paper from '@mui/material/Paper';
import Slide from '@mui/material/Slide';
import FormControlLabel from '@mui/material/FormControlLabel';
import { Card } from '@mui/material';

export default function SimpleSlide() {
  const [checked, setChecked] = React.useState(false);
  //const [checked, setChecked] = React.useState(false);
  const containerRef = React.useRef(null);
  const handleChange = () => {
    setChecked((prev) => !prev);
  };

  return (
    <Box sx={{ height: 'fit-content' }}>
      <Box sx={{ width: `fit-content` }} ref={containerRef}>
          <Box onClick={handleChange}>my hero </Box>
        
        <Slide direction="up" container={containerRef.current} in={checked} mountOnEnter unmountOnExit>
      <Card sx={{ m: 1 }} elevation={1}>
    <Box  component="svg" sx={{ width: 100, height: 100 }}>
      <Box
        component="polygon"
        sx={{
          fill: (theme) => theme.palette.common.red,
          stroke: (theme) => theme.palette.divider,
          strokeWidth: 1,
        }}
        points="0,0 50,50, 100,100, 0,100"
      />
    </Box>
  </Card>
        </Slide>
      </Box>
    </Box>
  );
}
```

Replace the code from this card and put you menu and menu item into this to achieve a mega menu 

```
<Card sx={{ m: 1 }} elevation={1}>
    <Box  component="svg" sx={{ width: 100, height: 100 }}>
      <Box
        component="polygon"
        sx={{
          fill: (theme) => theme.palette.common.red,
          stroke: (theme) => theme.palette.divider,
          strokeWidth: 1,
        }}
        points="0,0 50,50, 100,100, 0,100"
      />
    </Box>
  </Card>
      
```
[Ref Link : it is world famous MUI ; it's back as it was never left us behind](https://mui.com/material-ui/transitions/)

But in a React Grid it seems little messy : still it does a job what it is meant to be 
```
import * as React from 'react';
import PropTypes from 'prop-types';
import IconButton from '@mui/material/IconButton';
//import Grid from '@mui/material/Grid'; // Grid version 1
import Grid2 from '@mui/material/Unstable_Grid2';
import { styled, alpha } from '@mui/material/styles';
//import Image from '@mui/material/Image';
import { Slide, Popover, Grid, ClickAwayListener, Grow, Button, MenuList, ButtonGroup, Container, Toolbar, Typography, CssBaseline, Paper, Box, AppBar, Popper } from '@mui/material';
import MuiLink from '@mui/material/Link';
import Badge from '@mui/material/Badge';
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import HomeIcon from '@mui/icons-material/Home';
import SearchIcon from '@mui/icons-material/Search';
import AccountCircle from '@mui/icons-material/AccountCircle';
import MailIcon from '@mui/icons-material/Mail';
import NotificationsIcon from '@mui/icons-material/Notifications';
import MoreIcon from '@mui/icons-material/MoreVert';
import useScrollTrigger from '@mui/material/useScrollTrigger';
import * as Colors from '@mui/material/colors';
import Image from 'next/image';
import ViewCompactRoundedIcon from '@mui/icons-material/ViewCompactRounded';
import BrokenComponantTabbes from '../src/BrokenComponantTabbes'


// Note that you normally won't need to set the window ref as useScrollTrigger
// will defau



const options = ['View Accounts', 'Contact Sales', 'Logedin users']




const ConditionalWrapper = ({ children, condition }) => {
  return condition ? (
    <div>{children}</div>
  ) : (
    children
  )
}


const Navigations = () => {
  //const brown = brown[900];
  const [clicked, setClicked] = React.useState(false);
  const containerRef = React.useRef(null);
  const handleChange = () => {
    setClicked((prev) => !prev);
  };

  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleClick = () => {
    console.info(`You clicked ${options[selectedIndex]}`);
  };

  const handleMenuItemClick = (event, index) => {
    setSelectedIndex(index);
    setOpen(false);
  };

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  };

  const [anchorEl, setAnchorEl] = React.useState(null);
  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);
  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMobileMenuClose = () => {
    setMobileMoreAnchorEl(null);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
    handleMobileMenuClose();
  };

  const handleMobileMenuOpen = (event) => {
    setMobileMoreAnchorEl(event.currentTarget);
  };

  const menuId = 'primary-search-account-menu';
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      id={menuId}
      keepMounted
      transformOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
      <MenuItem onClick={handleMenuClose}>My account</MenuItem>
    </Menu>
  );

  const mobileMenuId = 'primary-search-account-menu-mobile';
  const renderMobileMenu = (
    <Menu
      anchorEl={mobileMoreAnchorEl}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      id={mobileMenuId}
      keepMounted
      transformOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      open={isMobileMenuOpen}
      onClose={handleMobileMenuClose}
    >
    </Menu>
  );


  return (
    <React.Fragment>
      <CssBaseline />
      <Toolbar sx={{ zIndex: 1 }}>

        <Grid container spacing={7} sx={{ textAlign: "center", verticalAlign: "middle" }} >
          <Grid item xs sx={{ display: 'flex' }}  >
            <item> <Image src="/favicon.ico" alt="lol" width="260" height="50" padding='50 0 0' /> </item>
          </Grid>
        </Grid>
      </Toolbar>
      <AppBar position="sticky" maxWidth="sm" sx={{ verticalAlign: "middle", textAlign: 'center', display: 'flex', lineHeight: '10px', justifyContent: 'flex-end', top: 'auto', bottom: 7, px: 'auto', color: '#3a3632', fontcolor: '#faf8f7' }}>
        <Toolbar sx={{ display: 'flex' }} >
          <Grid container spacing={7} sx={{ textAlign: "center", verticalAlign: "middle" }} >

            <Grid item xs sx={{ display: 'flex' }}  >

              <item>
                <IconButton
                  size="large"
                  edge="start"
                  color="inherit"
                  aria-label="open drawer"
                  sx={{ mr: 2, hover: "outline - 2", pl: 2 }}
                >
                  <ViewCompactRoundedIcon sx={{ color: '#F1EFED' }} />
                </IconButton>
              </item>
            </Grid>
            <Grid item xs sx={{ color: '#F1EFED', ml: '5rem' }} ref={containerRef}>

              <item onClick={handleChange} > <Typography variant="h6" >Product</Typography>

              </item>

            </Grid>

            <Grid item xs sx={{ color: '#F1EFED', ml: '-5rem' }}>
              <item> <Typography variant="h6" sx={{ color: '#F1EFED' }}>Service</Typography></item>
            </Grid>

            <Grid item xs sx={{ color: '#F1EFED', ml: '-5rem' }}>
              <item> <Typography variant="h6" >Development</Typography></item>
            </Grid>


            <Grid item xs sx={{ color: '#F1EFED', ml: '-5em' }}>
              <item> <Typography variant="h6" >Contact US</Typography></item>
            </Grid>

            <Grid item xs sx={{ color: '#F1EFED', ml: '-5rem' }}>
              <item> <Typography variant="h6" >About US</Typography></item>
            </Grid>
            {/* <Typography variant="h6" gutterBottom component="div" sx={{ p: 2, pb: 0, top: 'auto', bottom: 2 }}>
            <MuiLink color="inherit" href="/">
              <HomeIcon sx={{ color: '#faf8f7' }} /> Home
            </MuiLink>{' '} 
 
          </Typography>  */}

            <Grid item xs sx={{ justifyContent: 'flex-end' }}>

              <item>
                <Box sx={{ flexGrow: 1, backgroundColor: '#3a3632' }} />
                <Box position='left' sx={{ display: { xs: 'none', md: 'flex' } }}>
                  <ButtonGroup variant="contained" ref={anchorRef} aria-label="split button" >
                    <Button onClick={handleClick} sx={{ color: '#faf8f7', border: 2, backgroundColor: '#3a3632' }}>{options[selectedIndex]}</Button>
                    <Button
                      size="small"
                      aria-controls={open ? 'split-button-menu' : undefined}
                      aria-expanded={open ? 'true' : undefined}
                      aria-label="select merge strategy"
                      aria-haspopup="menu"
                      onClick={handleToggle}
                    >
                      <ArrowDropDownIcon sx={{ color: '#faf8f7' }} />
                    </Button>
                  </ButtonGroup>
                  <Popper
                    sx={{
                      zIndex: 1, width: '20%', justifyContent: 'flex-end', aligntext: 'middle', backgroundColor: '#3a3632'
                    }}
                    open={open}
                    anchorEl={anchorRef.current}
                    role={undefined}
                    transition
                    disablePortal
                  >
                    {({ TransitionProps, placement }) => (
                      <Grow sx={{ zIndex: '10' }}
                        {...TransitionProps}
                        style={{
                          transformOrigin:
                            placement === 'bottom' ? 'center top' : 'center bottom',
                        }}
                      >
                        <Paper sx={{ height: '100%', backgroundColor: '#3a3632', color: '#faf8f7' }}>
                          <ClickAwayListener onClickAway={handleClose}>
                            <MenuList id="split-button-menu" autoFocusItem sx={{ color: '#faf8f7', backgroundColor: '#3a3632', textColor: '#faf8f7' }}>
                              {options.map((option, index) => (
                                <MenuItem
                                  key={option}
                                  disabled={index === 2}
                                  selected={index === selectedIndex}
                                  onClick={(event) => handleMenuItemClick(event, index)}
                                >
                                  {option}
                                </MenuItem>
                              ))}
                            </MenuList>
                          </ClickAwayListener>
                        </Paper>
                      </Grow>
                    )}
                  </Popper>

                </Box>
              </item>           </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
      <Grid sx={{ width: '100%' , height: '100%', backgroundColor: '#3a3632', color: '#faf8f7', zIndex: 1 }}> <Slide direction="down" in={clicked} container={containerRef.current} mountOnEnter unmountOnExit>
        <Box> <BrokenComponantTabbes /> </Box>
        
      </Slide>
      </Grid>



    </React.Fragment>
  );
}


export default Navigations

```