From 976c9551265a87dbd57150af00b31d0c5ce20780 Mon Sep 17 00:00:00 2001
From: daproclaima <sebastien@devedanos.com>
Date: Wed, 11 Sep 2024 19:33:40 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20update=20left=20?=
 =?UTF-8?q?nav=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- the HTML semantic needed improvement:
the menu items were button wrapped in a li
wrapped in link.
- update related tests
---
 CHANGELOG.md                                  |  4 ++
 .../src/core/__tests__/MainLayout.test.tsx    | 11 +++-
 .../apps/desk/src/features/menu/MenuItems.tsx | 53 +++++++++----------
 3 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31f05cc..e0468db 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,10 @@ and this project adheres to
 - ✨(frontend) allow group members filtering #363
 - ✨(mailbox) send new mailbox confirmation email #397
 
+### Fixed
+
+- ♿️(frontend) fix left nav panel #396
+
 ### Changed
 
 - ♻️(serializers) move business logic to serializers #414 
diff --git a/src/frontend/apps/desk/src/core/__tests__/MainLayout.test.tsx b/src/frontend/apps/desk/src/core/__tests__/MainLayout.test.tsx
index 2855451..a54b811 100644
--- a/src/frontend/apps/desk/src/core/__tests__/MainLayout.test.tsx
+++ b/src/frontend/apps/desk/src/core/__tests__/MainLayout.test.tsx
@@ -9,6 +9,9 @@ import { useConfigStore } from '../config';
 jest.mock('next/navigation', () => ({
   ...jest.requireActual('next/navigation'),
   usePathname: () => '/',
+  useRouter: () => ({
+    push: () => {},
+  }),
 }));
 
 describe('MainLayout', () => {
@@ -20,19 +23,23 @@ describe('MainLayout', () => {
     render(<MainLayout />, { wrapper: AppWrapper });
 
     expect(
-      screen.getByRole('link', {
+      screen.getByRole('button', {
         name: /Teams button/i,
       }),
     ).toBeInTheDocument();
 
     expect(
-      screen.getByRole('link', {
+      screen.getByRole('button', {
         name: /Mail Domains button/i,
       }),
     ).toBeInTheDocument();
   });
 
   it('checks menu rendering without team feature', () => {
+    useConfigStore.setState({
+      config: { FEATURES: { TEAMS: false }, LANGUAGES: [] },
+    });
+
     render(<MainLayout />, { wrapper: AppWrapper });
 
     expect(
diff --git a/src/frontend/apps/desk/src/features/menu/MenuItems.tsx b/src/frontend/apps/desk/src/features/menu/MenuItems.tsx
index 624e9b5..9efb00e 100644
--- a/src/frontend/apps/desk/src/features/menu/MenuItems.tsx
+++ b/src/frontend/apps/desk/src/features/menu/MenuItems.tsx
@@ -1,8 +1,8 @@
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, BoxButton, StyledLink } from '@/components';
+import { Box, BoxButton } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { SVGComponent } from '@/types/components';
 
@@ -17,6 +17,7 @@ interface MenuItemProps {
 
 const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
   const { t } = useTranslation();
+  const router = useRouter();
   const pathname = usePathname();
   const { colorsTokens } = useCunninghamTheme();
   const parentRef = useRef(null);
@@ -43,34 +44,28 @@ const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
       };
 
   return (
-    <StyledLink
-      href={href}
-      aria-current={isActive && 'page'}
-      ref={parentRef}
-      onMouseOver={() => setIsTooltipOpen(true)}
-      onMouseLeave={() => setIsTooltipOpen(false)}
-      style={{ display: 'block' }}
-      $css={`
-        &:focus-visible {
-          outline: #fff solid 2px;
-        }`}
-    >
+    <Box ref={parentRef}>
       <Box
         $margin="xtiny"
         $padding="tiny"
         as="li"
         $justify="center"
-        $css={`
-          & > button { padding: 0};
-          transition: all 0.2s ease-in-out
-        `}
+        $css="transition: all 0.2s ease-in-out;"
         $background={background}
         $radius="10px"
       >
         <BoxButton
+          aria-current={isActive && 'page'}
+          onMouseOver={() => setIsTooltipOpen(true)}
+          onMouseLeave={() => setIsTooltipOpen(false)}
+          $css={`
+            padding: 0;
+            ${isActive ? null : '&:focus-visible {outline: #fff solid 2px;}'}
+        `}
           aria-label={t(`{{label}} button`, { label })}
           $color={color}
-          as="span"
+          as="button"
+          onClick={() => router.push(href)}
         >
           <Icon
             width="2.375rem"
@@ -81,15 +76,17 @@ const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
           />
         </BoxButton>
       </Box>
-      {isTooltipOpen && (
-        <Tooltip
-          parentRef={parentRef}
-          label={label}
-          backgroundColor={backgroundTooltip}
-          textColor={colorTooltip}
-        />
-      )}
-    </StyledLink>
+      <Box as="span">
+        {isTooltipOpen && (
+          <Tooltip
+            parentRef={parentRef}
+            label={label}
+            backgroundColor={backgroundTooltip}
+            textColor={colorTooltip}
+          />
+        )}
+      </Box>
+    </Box>
   );
 };