diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31f05cccc..e0468db7c 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 2855451d3..a54b8118f 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(, { 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(, { 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 624e9b540..9efb00eba 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 (
- setIsTooltipOpen(true)}
- onMouseLeave={() => setIsTooltipOpen(false)}
- style={{ display: 'block' }}
- $css={`
- &:focus-visible {
- outline: #fff solid 2px;
- }`}
- >
+
button { padding: 0};
- transition: all 0.2s ease-in-out
- `}
+ $css="transition: all 0.2s ease-in-out;"
$background={background}
$radius="10px"
>
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)}
>
{
/>
- {isTooltipOpen && (
-
- )}
-
+
+ {isTooltipOpen && (
+
+ )}
+
+
);
};