💄(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:
@@ -21,7 +21,7 @@ export const Menu = () => {
|
|||||||
$justify="space-between"
|
$justify="space-between"
|
||||||
>
|
>
|
||||||
<Box className="pt-l" $direction="column" $gap="0.8rem">
|
<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" />
|
<MenuItem Icon={IconTemplate} label={t('Template')} href="/templates" />
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@@ -12,16 +12,22 @@ interface MenuItemProps {
|
|||||||
Icon: SVGComponent;
|
Icon: SVGComponent;
|
||||||
label: string;
|
label: string;
|
||||||
href: string;
|
href: string;
|
||||||
|
alias?: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const MenuItem = ({ Icon, label, href }: MenuItemProps) => {
|
const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const { colorsTokens } = useCunninghamTheme();
|
const { colorsTokens } = useCunninghamTheme();
|
||||||
const parentRef = useRef(null);
|
const parentRef = useRef(null);
|
||||||
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
|
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
|
const { color, background, colorTooltip, backgroundTooltip } = isActive
|
||||||
? {
|
? {
|
||||||
color: colorsTokens()['primary-600'],
|
color: colorsTokens()['primary-600'],
|
||||||
@@ -42,7 +48,7 @@ const MenuItem = ({ Icon, label, href }: MenuItemProps) => {
|
|||||||
aria-current={isActive && 'page'}
|
aria-current={isActive && 'page'}
|
||||||
ref={parentRef}
|
ref={parentRef}
|
||||||
onMouseOver={() => setIsTooltipOpen(true)}
|
onMouseOver={() => setIsTooltipOpen(true)}
|
||||||
onMouseOut={() => setIsTooltipOpen(false)}
|
onMouseLeave={() => setIsTooltipOpen(false)}
|
||||||
style={{ display: 'block' }}
|
style={{ display: 'block' }}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
|
|||||||
Reference in New Issue
Block a user