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 | 43x 43x 43x 14x 43x 20x 7x 7x 13x 43x 23x 43x 21x | import { useMemo } from "react";
import { useDropdownMenu } from "@common/Menu/hooks/useDropdownMenu";
import ProfileDetails from "./components/ProfileDetails";
import ProfilePicture from "@components/CustomBreadcrumbsPage/ components/ProfilePicture";
import ProfileLogout from "./components/ProfileLogout";
import { DarkModeIcon, NewEditIcon } from "@assets/icons";
import { palette } from "@palette";
import { MenuItem } from "@common/Menu/NewDropdownMenu";
import { Stack } from "@mui/material";
import { Switch_V2 } from "@common/Switch";
import NiceModal from "@ebay/nice-modal-react";
import { PROFILE_MODAL } from "modals/modal_names";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
function ProfileMenu() {
const { DropdownMenu, openMenu } = useDropdownMenu();
const { isMobileView } = useCustomTheme();
const openProfileModal = () => {
NiceModal.show(PROFILE_MODAL);
};
const handleOpenProfileMenu = (e: React.MouseEvent<HTMLElement>) => {
if (isMobileView) {
openProfileModal();
return;
}
openMenu(e);
};
const actions = useMemo<MenuItem[]>(
() => [
{
label: "Edit Profile",
icon: <NewEditIcon />,
onSelect: openProfileModal,
},
// {
// label: "Dark Mode",
// icon: <DarkModeIcon />,
// onSelect: (e: any) => null,
// closeOnSelect: false,
// customRender: (element) => (
// <Stack
// direction="row"
// alignItems="center"
// justifyContent="space-between"
// width="100%"
// >
// <Stack
// direction="row"
// alignItems="flex-end"
// justifyContent="flex-start"
// gap={1}
// >
// {element}
// </Stack>
// <Switch_V2 size="small" containerProps={{ gap: "0" }} />
// </Stack>
// ),
// },
],
[],
);
return (
<>
<ProfilePicture onClick={handleOpenProfileMenu} />
<DropdownMenu
items={actions}
header={<ProfileDetails />}
footer={<ProfileLogout />}
isSwipeableDrawerMobileView={false}
sxSelectItem={selectItemStyle}
customWidth="220px"
padding="16px 12px 8px 16px"
MenuOptions={{
sx: {
"& .MuiButtonBase-root": {
marginTop: "8px !important",
},
},
}}
/>
</>
);
}
export default ProfileMenu;
const selectItemStyle = {
justifyContent: "flex-start",
alignItems: "flex-end",
gap: "8px",
padding: "8px 8px",
borderRadius: "8px",
"&:hover": { backgroundColor: palette.neutral[10] },
};
|