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 | 12x 90x 90x 10x 80x 1x 12x 492x 80x 12x 12x | import { memo } from "react";
import { styled } from "@theme/v2/Provider";
import { Divider as DividerMui, Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import { startCase } from "lodash";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import useThemeSettings from "@components/EnterpriseSettings/Branding/hooks/useThemeSettings";
type TSideMenuItemProps = {
type?: "divider" | "default";
value: string;
label?: string;
tooltipLabel?: string;
open: boolean;
onClick: (v: string) => void;
Icon?: JSX.Element;
isSelected?: boolean;
};
const SideMenuItem = ({
type = "default",
value,
label,
open,
onClick,
Icon,
isSelected,
tooltipLabel,
}: TSideMenuItemProps) => {
const { bgColorHighlight, textColor, colors, isGradientText } =
useThemeSettings();
if (type === "divider") {
return <Divider />;
}
return (
<GiveTooltip
title={tooltipLabel || label}
color="default"
disableHoverListener={open}
placement="right"
fluidWidth={!open}
>
<Container
isSelected={isSelected}
backgroundColor={bgColorHighlight}
colors={isGradientText ? colors?.[0] : textColor}
onClick={() => onClick(value)}
data-testid={`side-menu-item-${label || value}`}
>
{Icon}
{open && <Text variant="bodyS">{startCase(label || value)}</Text>}
</Container>
</GiveTooltip>
);
};
const Container = styled(Stack, {
shouldForwardProp: (prop) =>
prop !== "isSelected" && prop !== "backgroundColor" && prop !== "colors",
})<{
isSelected?: boolean;
backgroundColor: string;
colors?: string;
}>(({ theme, isSelected, backgroundColor, colors }) => ({
width: "100%",
padding: "12px",
borderRadius: "12px",
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "12px",
background: "transparent",
color: theme.palette.text.secondary,
"&:hover": {
background: theme.palette.surface?.secondary,
cursor: "pointer",
color: theme.palette.text.primary,
},
...(isSelected && {
background: backgroundColor,
color: colors,
pointerEvents: "none",
}),
"& > svg": {
flexShrink: 0,
},
// TODO: for now we are using only one color for icons until find a way to apply gradient color to icons
"& > svg > path": {
...(isSelected && {
fill: colors,
}),
},
}));
const Divider = styled(DividerMui)(({ theme }) => ({
margin: "4px 0",
color: theme.palette.border?.primary,
}));
const Text = styled(GiveText)({
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
flexGrow: 1,
color: "inherit",
});
export default memo(SideMenuItem);
|