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 && ( + + )} + + ); };