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
Top comments (0)