i am looking to create a component similar to this
currently, I am utilizing a material UI pop menu in my project
below is the JSX code snippet
<div className="navMenu" style={{ position: "relative" }}>
<Tooltip title="Menu">
<div
className="navMenuIconContainer"
style={{
boxShadow:
anchorMenu === null
? ""
: "rgba(60, 64, 67, 0.2) 0px .1rem .2rem 0px, rgba(60, 64, 67, 0.05) 0px .1rem .3rem .1rem",
color: anchorMenu === null ? "black" : "#e57373",
zIndex: "2",
}}
onClick={toggleMenu}
>
<BiMenu style={{ cursor: "pointer" }} size={"2.5rem"} />
</div>
</Tooltip>
<Menu
id="menu-appbar"
anchorEl={anchorMenu}
open={Boolean(anchorMenu)}
onClose={closeMenu}
PaperProps={{
style: {
borderRadius: ".1rem",
boxShadow:
"rgba(60, 64, 67, 0.2) 0px .1rem .2rem 0px, rgba(60, 64, 67, 0.05) 0px .1rem .3rem .1rem",
zIndex: "1",
transform: "translateX(-.5rem)",
},
}}
>
<MenuItem sx={{ fontSize: "1.1rem" }} onClick={closeMenu}>
Contact us
</MenuItem>
{location[2] === "analysis" ? (
<MenuItem sx={{ fontSize: "1.1rem" }} onClick={generateQuery}>
Query
</MenuItem>
) : (
<MenuItem sx={{ fontSize: "1.1rem" }} onClick={dashboard}>
Dashboard
</MenuItem>
)}
<MenuItem sx={{ fontSize: "1.1rem" }} onClick={handleSignOut}>
Sign out
</MenuItem>
</Menu>
</div>
the necessary imports are as follows
import { Tooltip, Menu, MenuItem } from "@mui/material";
this is what I achieved with the aforementioned code
I'm struggling to differentiate those two elements with box shadow, as I attempted to make that component appear as one cohesive unit but failed. The issue lies in positioning the burger icon above the options paper with appropriate z-index, which proved to be challenging for me.
below is the CSS for the container divs
.navMenu{
}
.navMenuIconContainer{
position: relative;
width : 3rem;
height : 2.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
}
I would appreciate it if someone could offer a proper solution
here is the link to the sandbox containing my attempt
https://codesandbox.io/s/headless-morning-m9uf6o?file=/src/styles.css