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 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 13x 11x 11x 11x 11x 11x 12x 56x 11x 22x | import React, { memo, useState } from "react";
import { styled } from "@theme/v2/Provider";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import GiveSideMenu from "@shared/SideMenu/GiveSideMenu";
import MobileNavBar from "./components/MobileNavBar";
import SideMenu from "./SideMenu";
import {
ArrowLineLeftIcon,
ArrowLineRightIcon,
XIcon,
} from "@phosphor-icons/react";
import { Stack } from "@mui/material";
import SideMenuItem from "./components/SideMenuItem";
import { useAvailableBalance } from "./hooks/useAvailableBalance";
import { useDrawer } from "./DrawerContext";
import { useBannerOffset } from "@hooks/common/useBannerOffset";
import {
WIDTH,
WIDTH_CLOSED,
WIDTH_MOBILE,
WIDTH_MOBILE_CLOSED,
} from "@constants/sideMenu";
export { WIDTH, WIDTH_CLOSED } from "@constants/sideMenu";
function SideMenuDrawer() {
const { isMobileView, isDesktopView } = useCustomThemeV2();
const { availableBalance } = useAvailableBalance();
const { open, toggleDrawer, handleDrawerClose, handleDrawerOpen } =
useDrawer();
const topPadding = useBannerOffset(true);
const Icon = open
? isDesktopView
? ArrowLineLeftIcon
: XIcon
: ArrowLineRightIcon;
return (
<>
{isMobileView && (
<MobileNavBar
toggleDrawer={toggleDrawer}
availableBalance={availableBalance}
/>
)}
<Drawer open={open} onClose={handleDrawerClose} topPadding={topPadding}>
<Stack flex={1} spacing="20px" padding={open ? 0 : "4px"}>
<SideMenuItem
value=""
label={isDesktopView ? "Collapse" : "Close"}
tooltipLabel="Expand"
open={open}
onClick={toggleDrawer}
Icon={<Icon size={20} />}
/>
<SideMenu
open={open}
availableBalance={availableBalance}
handleDrawerOpen={handleDrawerOpen}
handleDrawerClose={handleDrawerClose}
/>
</Stack>
</Drawer>
</>
);
}
export default memo(SideMenuDrawer);
const Drawer = styled(GiveSideMenu, {
shouldForwardProp: (prop) => prop !== "topPadding",
})<{ topPadding?: number }>(({ open, topPadding, theme }) => ({
flexShrink: 0,
overflowX: "hidden",
whiteSpace: "nowrap",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.standard,
}),
"& .MuiDrawer-paper": {
top: topPadding ? `${topPadding}px !important` : 0,
height: topPadding ? `calc(100% - ${topPadding}px) !important` : "100%",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.standard,
}),
[theme.breakpoints.between("v2_sm", "v2_md")]: { padding: "20px" },
"&::-webkit-scrollbar": {
display: "none",
},
scrollbarWidth: "none",
},
// desktop
[theme.breakpoints.up("v2_md")]: {
boxSizing: "border-box",
...(open ? widthStyle(WIDTH) : widthStyle(WIDTH_CLOSED)),
},
// tablet
[theme.breakpoints.between("v2_sm", "v2_md")]: {
...(open
? widthStyle(WIDTH_MOBILE_CLOSED, WIDTH_MOBILE)
: widthStyle(WIDTH_MOBILE_CLOSED)),
},
//mobile
[theme.breakpoints.down("v2_sm")]: {
width: WIDTH_MOBILE,
"& .MuiDrawer-paper": {
width: `${WIDTH_MOBILE}px !important`,
top: topPadding ? `${topPadding}px !important` : 0,
height: topPadding ? `calc(100% - ${topPadding}px) !important` : "100%",
},
},
}));
const widthStyle = (width: number, paperWidth?: number) => ({
width: width,
"& .MuiDrawer-paper": {
width: `${paperWidth ? paperWidth : width}px !important`,
},
});
|