it transit in like any menu or mega-menu (containerRef) easy pizzy === `it's pizza time`
sayantan chakraborty
Posted on September 27, 2022
lots of guys think simple popup would do; lot's guys think modal would do but I think a 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
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
💖 💪 🙅 🚩
sayantan chakraborty
Posted on September 27, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
webdev How to Build a Basic CRUD App with NextJS, TS, React, Redux-Tookit and MUI5 Components
November 30, 2022
webdev it transit in like any menu or mega-menu (containerRef) easy pizzy === `it's pizza time`
September 27, 2022