Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 2008x 548x 2905x 7396x 22x 7396x 8x 7396x 4059x 4059x | import { getJsonValue } from "@theme/v2/utils";
import { ThemeMode } from "@theme/v2/types";
import { MASQUERADE_SNACKBAR_HEIGHT } from "@components/Merchants/Masquerade/constants";
declare module "@mui/material/Drawer" {
interface DrawerProps {
type?: "sidepanel" | "sidemenu";
bannerOffset?: number;
}
}
export const getDrawerV2DefaultProps = (mode: ThemeMode) => ({
componentsProps: {
backdrop: {
sx: {
backgroundColor: getJsonValue(`tokens.${mode}.colour.surface.overlay`),
},
},
},
PaperProps: {
sx: {
"@media (max-width:767px)": {
width: "100% !important",
},
},
},
});
export const getCustomDrawerStyle = (mode: ThemeMode) => {
return {
styleOverrides: {
root: {
variants: [
{
props: (props: any) => {
return props.type === "sidemenu";
},
style: () => {
return {
"& .MuiDrawer-paper": {
width: "116px",
padding: "32px",
borderRight: `1px solid ${getJsonValue(
`tokens.${mode}.colour.border.primary`,
)}`,
backgroundColor: getJsonValue(
`tokens.${mode}.colour.surface.primary`,
),
},
};
},
},
{
props: (props: any) => {
return (
props.open &&
props.variant === "permanent" &&
props.type === "sidemenu"
);
},
style: ({ theme }: any) => {
return {
[theme.breakpoints.between("new_sm", "new_md")]: {
".MuiPaper-root": {
width: 320,
},
},
[theme.breakpoints.up("new_md")]: {
".MuiPaper-root": {
width: 264,
},
},
};
},
},
{
props: (props: any) => {
return props.type === "sidepanel";
},
style: ({ theme, ownerState }: any) => {
const bannerOffset = ownerState?.bannerOffset || 0;
return {
".MuiDrawer-paper": {
display: "flex",
backgroundColor: getJsonValue(
`tokens.${mode}.colour.surface.secondary`,
),
...(bannerOffset && {
top: `${bannerOffset}px !important`,
height: `calc(100% - ${bannerOffset}px) !important`,
}),
[theme.breakpoints.down("new_sm")]: {
height: bannerOffset
? `calc(96% - ${bannerOffset}px) !important`
: "96%",
borderTopRightRadius: "20px",
borderTopLeftRadius: "20px",
width: "100%",
},
overflow: "hidden",
},
};
},
},
],
},
},
};
};
|