diff --git a/src/frontend/apps/desk/src/features/menu/Menu.tsx b/src/frontend/apps/desk/src/features/menu/Menu.tsx
index c6a5de9..7cf1084 100644
--- a/src/frontend/apps/desk/src/features/menu/Menu.tsx
+++ b/src/frontend/apps/desk/src/features/menu/Menu.tsx
@@ -22,7 +22,12 @@ export const Menu = () => {
$margin="none"
>
-
+
diff --git a/src/frontend/apps/desk/src/features/menu/MenuItems.tsx b/src/frontend/apps/desk/src/features/menu/MenuItems.tsx
index 47404cd..4421c9f 100644
--- a/src/frontend/apps/desk/src/features/menu/MenuItems.tsx
+++ b/src/frontend/apps/desk/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' }}
>
{
await page.goto('/');
@@ -61,4 +61,18 @@ test.describe('Menu', () => {
await expect(page).toHaveURL(expectedUrl);
});
}
+
+ test(`it checks that the sub menu is still highlighted`, async ({
+ page,
+ browserName,
+ }) => {
+ await createTeam(page, 'team-sub-menu', browserName, 1);
+
+ const menu = page.locator('menu').first();
+ const buttonMenu = menu.locator('li').first();
+ await expect(buttonMenu).toHaveCSS(
+ 'background-color',
+ 'rgb(227, 227, 253)',
+ );
+ });
});