diff --git a/packages/core/admin/admin/src/components/LeftMenu.tsx b/packages/core/admin/admin/src/components/LeftMenu.tsx index 9fce828e07..6e61da6e89 100644 --- a/packages/core/admin/admin/src/components/LeftMenu.tsx +++ b/packages/core/admin/admin/src/components/LeftMenu.tsx @@ -15,7 +15,7 @@ import { NavSections, NavUser, } from '@strapi/design-system'; -import { SignOut, Feather, Lock } from '@strapi/icons'; +import { SignOut, Feather, Lock, House } from '@strapi/icons'; import { useIntl } from 'react-intl'; import { NavLink as RouterNavLink, useLocation } from 'react-router-dom'; import styled from 'styled-components'; @@ -28,6 +28,7 @@ import { usePersistentState } from '../hooks/usePersistentState'; import { getDisplayName } from '../utils/users'; import { NavBrand as NewNavBrand } from './MainNav/NavBrand'; +import { NavLink as NewNavLink } from './MainNav/NavLink'; const LinkUserWrapper = styled(Box)` width: 15rem; @@ -137,6 +138,17 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) = + {condensed && ( + handleClickOnLink('/')}> + + + + + + + )} theme.borderRadius}; object-fit: contain; - height: ${24 / 16}rem; - width: ${24 / 16}rem; - margin: ${3 / 16}rem; + height: 2.4rem; + width: 2.4rem; + margin: 0.4rem; } `; @@ -22,7 +22,7 @@ export const NavBrand = () => { } = useConfiguration('LeftMenu'); return ( - + {formatMessage({ theme.borderRadius}; + background: ${({ theme }) => theme.colors.neutral0}; + color: ${({ theme }) => theme.colors.neutral600}; + position: relative; + + &:hover, + &.active { + background: ${({ theme }) => theme.colors.neutral100}; + } + + &:hover { + svg path { + fill: ${({ theme }) => theme.colors.neutral600}; + } + color: ${({ theme }) => theme.colors.neutral700}; + } + + &.active { + svg path { + fill: ${({ theme }) => theme.colors.primary600}; + } + + color: ${({ theme }) => theme.colors.primary600}; + font-weight: 500; + } +`; + +const LinkImpl = ({ children, ...props }: LinkProps) => { + return {children}; +}; + +/* ------------------------------------------------------------------------------------------------- + * Tooltip + * -----------------------------------------------------------------------------------------------*/ +const TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => { + return ( + + + {children} + + + ); +}; + +/* ------------------------------------------------------------------------------------------------- + * Icon + * -----------------------------------------------------------------------------------------------*/ +const IconImpl = ({ children }: { children: React.ReactNode }) => { + if (!children) { + return null; + } + return ( + + {children} + + ); +}; + +/* ------------------------------------------------------------------------------------------------- + * Badge + * -----------------------------------------------------------------------------------------------*/ +const CustomBadge = styled(Badge)` + /* override default badge styles to change the border radius of the Base element in the Design System */ + border-radius: ${({ theme }) => theme.spaces[10]}; +`; + +const BadgeImpl = ({ children, label, ...props }: NavLink.BadgeProps) => { + if (!children) { + return null; + } + return ( + + {children} + + ); +}; + +/* ------------------------------------------------------------------------------------------------- + * EXPORTS + * -----------------------------------------------------------------------------------------------*/ + +const NavLink = { + Link: LinkImpl, + Tooltip: TooltipImpl, + Icon: IconImpl, + Badge: BadgeImpl, +}; + +// eslint-disable-next-line @typescript-eslint/no-namespace +namespace NavLink { + export interface BadgeProps { + children: React.ReactNode; + label: string; + } + + export interface TooltipProps { + position?: 'top' | 'bottom' | 'left' | 'right'; + label?: string; + children: React.ReactNode; + } +} + +export { NavLink }; diff --git a/packages/core/admin/admin/src/components/MainNav/tests/NavLink.test.tsx b/packages/core/admin/admin/src/components/MainNav/tests/NavLink.test.tsx new file mode 100644 index 0000000000..f5e02abcf3 --- /dev/null +++ b/packages/core/admin/admin/src/components/MainNav/tests/NavLink.test.tsx @@ -0,0 +1,38 @@ +import { House, Lock } from '@strapi/icons'; +import { screen, render as renderRTL } from '@tests/utils'; + +import { NavLink } from '../NavLink'; + +describe('NavLink', () => { + const Component = () => ( + + + <> + + + + + + + + + + ); + + const render = () => renderRTL(); + + it('shows the NavLink with link to destination', async () => { + render(); + const link = screen.getByRole('link'); + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute('href', '/test-link'); + }); + it('shows the home icon in the link', async () => { + render(); + expect(screen.getByTestId('nav-link-icon')).toBeInTheDocument(); + }); + it('shows the badge next to the link', async () => { + render(); + expect(screen.getByTestId('nav-link-badge')).toBeInTheDocument(); + }); +}); diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index f09420b1aa..1d1a240075 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -685,6 +685,7 @@ "global.change-password": "Change password", "global.close": "Close", "global.content-manager": "Content Manager", + "global.home": "Home", "global.continue": "Continue", "global.delete": "Delete", "global.delete-target": "Delete {target}",