♿️(frontend) update left nav panel

- the HTML semantic needed improvement:
the menu items were button wrapped in a li
wrapped in link.
- update related tests

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 

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(

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>
   );
 };