💄(app-impress) keep highlighting menu when sub menu

When sub menu was open, the parent menu was not
highlighted.
This commit fixes this issue.
This commit is contained in:
Anthony LC
2024-04-18 12:37:48 +02:00
committed by Anthony LC
parent d3b4a576c8
commit f61047dd6a
2 changed files with 10 additions and 4 deletions

View File

@@ -21,7 +21,7 @@ export const Menu = () => {
$justify="space-between"
>
<Box className="pt-l" $direction="column" $gap="0.8rem">
<MenuItem Icon={IconPad} label={t('Pad')} href="/pads" />
<MenuItem Icon={IconPad} label={t('Pad')} href="/" alias={['/pads']} />
<MenuItem Icon={IconTemplate} label={t('Template')} href="/templates" />
</Box>
</Box>

View File

@@ -12,16 +12,22 @@ interface MenuItemProps {
Icon: SVGComponent;
label: string;
href: string;
alias?: string[];
}
const MenuItem = ({ Icon, label, href }: MenuItemProps) => {
const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
const { t } = useTranslation();
const pathname = usePathname();
const { colorsTokens } = useCunninghamTheme();
const parentRef = useRef(null);
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
const isActive = pathname === href;
const isActive =
pathname === href ||
alias?.includes(pathname) ||
pathname.startsWith(`${href}/`) ||
alias?.some((a) => pathname.startsWith(`${a}/`));
const { color, background, colorTooltip, backgroundTooltip } = isActive
? {
color: colorsTokens()['primary-600'],
@@ -42,7 +48,7 @@ const MenuItem = ({ Icon, label, href }: MenuItemProps) => {
aria-current={isActive && 'page'}
ref={parentRef}
onMouseOver={() => setIsTooltipOpen(true)}
onMouseOut={() => setIsTooltipOpen(false)}
onMouseLeave={() => setIsTooltipOpen(false)}
style={{ display: 'block' }}
>
<Box