packages/mui/src/components/themedLayoutV2/hamburgerMenu/index.tsx
import React from "react";
import IconButton from "@mui/material/IconButton";
import Menu from "@mui/icons-material/Menu";
import type { IconButtonProps } from "@mui/material/IconButton";
import { useThemedLayoutContext } from "@hooks";
const HamburgerIcon = (props: IconButtonProps) => (
<IconButton color="inherit" aria-label="open drawer" edge="start" {...props}>
<Menu />
</IconButton>
);
export const HamburgerMenu: React.FC = () => {
const {
siderCollapsed,
setSiderCollapsed,
mobileSiderOpen,
setMobileSiderOpen,
} = useThemedLayoutContext();
return (
<>
<HamburgerIcon
onClick={() => setSiderCollapsed(!siderCollapsed)}
sx={{
mr: 2,
display: { xs: "none", md: "flex" },
...(!siderCollapsed && { display: "none" }),
}}
/>
<HamburgerIcon
onClick={() => setMobileSiderOpen(!mobileSiderOpen)}
sx={{
mr: 2,
display: { xs: "flex", md: "none" },
...(mobileSiderOpen && { display: "none" }),
}}
/>
</>
);
};