diff --git a/src/frontend/apps/impress/src/features/menu/Menu.tsx b/src/frontend/apps/impress/src/features/menu/Menu.tsx index f0a633c1..365d7755 100644 --- a/src/frontend/apps/impress/src/features/menu/Menu.tsx +++ b/src/frontend/apps/impress/src/features/menu/Menu.tsx @@ -21,7 +21,7 @@ export const Menu = () => { $justify="space-between" > - + diff --git a/src/frontend/apps/impress/src/features/menu/MenuItems.tsx b/src/frontend/apps/impress/src/features/menu/MenuItems.tsx index 4a0ac050..510dd3b2 100644 --- a/src/frontend/apps/impress/src/features/menu/MenuItems.tsx +++ b/src/frontend/apps/impress/src/features/menu/MenuItems.tsx @@ -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' }} >