From f61047dd6a2c2979edbe4e7e7f81153a0cfcd47c Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Thu, 18 Apr 2024 12:37:48 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(app-impress)=20keep=20highlighting?=
 =?UTF-8?q?=20menu=20when=20sub=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When sub menu was open, the parent menu was not
highlighted.
This commit fixes this issue.
---
 src/frontend/apps/impress/src/features/menu/Menu.tsx |  2 +-
 .../apps/impress/src/features/menu/MenuItems.tsx     | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

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