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

When sub menu was open, the parent menu was not
highlighted.
This commit fixes this issue.

src/frontend/apps/desk/src/features/menu/Menu.tsx

@@ -22,7 +22,12 @@ export const Menu = () => {
       $margin="none"
     >
       <Box $padding={{ top: 'large' }} $direction="column" $gap="0.8rem">
-        <MenuItem Icon={IconGroup} label={t('Teams')} href="/" />
+        <MenuItem
+          Icon={IconGroup}
+          label={t('Teams')}
+          href="/"
+          alias={['/teams']}
+        />
         <MenuItem Icon={IconMail} label={t('Mails')} href="/mails" />
       </Box>
     </Box>

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' }}
     >
       <Box

src/frontend/apps/e2e/__tests__/app-desk/menu.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { keyCloakSignIn } from './common';
+import { createTeam, keyCloakSignIn } from './common';
 
 test.beforeEach(async ({ page, browserName }) => {
   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)',
+    );
+  });
 });