Skip to content

Commit 9ebfd37

Browse files
joshuaellisjoshuaellis
committed
fix: left menu
1 parent 33dab7a commit 9ebfd37

File tree

9 files changed

+38
-51
lines changed

9 files changed

+38
-51
lines changed

‎packages/core/admin/admin/src/components/Layouts/GridLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22

33
import { Box } from '@strapi/design-system';
4-
import styled from 'styled-components';
4+
import { styled } from 'styled-components';
55

66
interface GridColSize {
77
S: number;

‎packages/core/admin/admin/src/components/Layouts/Layout.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22

33
import { Box } from '@strapi/design-system';
4-
import styled from 'styled-components';
4+
import { styled } from 'styled-components';
55

66
import { ActionLayout } from './ActionLayout';
77
import { ContentLayout } from './ContentLayout';
@@ -13,9 +13,9 @@ interface LayoutProps {
1313
sideNav?: React.ReactNode;
1414
}
1515

16-
const GridContainer = styled(Box)<{ hasSideNav: boolean }>`
16+
const GridContainer = styled(Box)<{ $hasSideNav: boolean }>`
1717
display: grid;
18-
grid-template-columns: ${({ hasSideNav }) => (hasSideNav ? `auto 1fr` : '1fr')};
18+
grid-template-columns: ${({ $hasSideNav }) => ($hasSideNav ? `auto 1fr` : '1fr')};
1919
`;
2020

2121
const OverflowingItem = styled(Box)`
@@ -24,7 +24,7 @@ const OverflowingItem = styled(Box)`
2424

2525
const RootLayout = ({ sideNav, children }: LayoutProps) => {
2626
return (
27-
<GridContainer hasSideNav={Boolean(sideNav)}>
27+
<GridContainer $hasSideNav={Boolean(sideNav)}>
2828
{sideNav}
2929
<OverflowingItem paddingBottom={10}>{children}</OverflowingItem>
3030
</GridContainer>

‎packages/core/admin/admin/src/components/LeftMenu.tsx

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as React from 'react';
22

3-
import { Divider, Flex } from '@strapi/design-system';
3+
import { Divider, Flex, FlexComponent } from '@strapi/design-system';
44
import { Feather, Lock, House } from '@strapi/icons';
55
import { useIntl } from 'react-intl';
66
import { useLocation } from 'react-router-dom';
7-
import styled from 'styled-components';
7+
import { styled } from 'styled-components';
88

99
import { useAuth } from '../features/Auth';
1010
import { useTracking } from '../features/Tracking';
@@ -22,7 +22,7 @@ const NewNavLinkBadge = styled(NavLink.Badge)`
2222
}
2323
`;
2424

25-
const NavListWrapper = styled(Flex)`
25+
const NavListWrapper = styled<FlexComponent<'ul'>>(Flex)`
2626
overflow-y: auto;
2727
`;
2828

@@ -51,16 +51,16 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
5151

5252
<Divider />
5353

54-
<NavListWrapper as="ul" gap={3} direction="column" flex={1} paddingTop={3} paddingBottom={3}>
54+
<NavListWrapper tag="ul" gap={3} direction="column" flex={1} paddingTop={3} paddingBottom={3}>
5555
<Flex tag="li">
5656
<NavLink.Link
5757
to="/"
5858
onClick={() => handleClickOnLink('/')}
5959
aria-label={formatMessage({ id: 'global.home', defaultMessage: 'Home' })}
6060
>
6161
<NavLink.Tooltip label={formatMessage({ id: 'global.home', defaultMessage: 'Home' })}>
62-
<NavLink.Icon>
63-
<House fill="neutral500" />
62+
<NavLink.Icon label={formatMessage({ id: 'global.home', defaultMessage: 'Home' })}>
63+
<House width="2rem" height="2rem" fill="neutral500" />
6464
</NavLink.Icon>
6565
</NavLink.Tooltip>
6666
</NavLink.Link>
@@ -80,8 +80,13 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
8080
defaultMessage: 'Content Manager',
8181
})}
8282
>
83-
<NavLink.Icon>
84-
<Feather fill="neutral500" />
83+
<NavLink.Icon
84+
label={formatMessage({
85+
id: 'global.content-manager',
86+
defaultMessage: 'Content Manager',
87+
})}
88+
>
89+
<Feather width="2rem" height="2rem" fill="neutral500" />
8590
</NavLink.Icon>
8691
</NavLink.Tooltip>
8792
</NavLink.Link>
@@ -104,8 +109,8 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
104109
aria-label={labelValue}
105110
>
106111
<NavLink.Tooltip label={labelValue}>
107-
<NavLink.Icon>
108-
<LinkIcon fill="neutral500" />
112+
<NavLink.Icon label={labelValue}>
113+
<LinkIcon width="2rem" height="2rem" fill="neutral500" />
109114
</NavLink.Icon>
110115
{badgeContent && (
111116
<NavLink.Badge
@@ -141,8 +146,8 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
141146
onClick={() => handleClickOnLink(link.to)}
142147
>
143148
<NavLink.Tooltip label={labelValue}>
144-
<NavLink.Icon>
145-
<LinkIcon fill="neutral500" />
149+
<NavLink.Icon label={labelValue}>
150+
<LinkIcon width="2rem" height="2rem" fill="neutral500" />
146151
</NavLink.Icon>
147152
{badgeContent && (
148153
<NewNavLinkBadge label={badgeContent} backgroundColor="primary600">

‎packages/core/admin/admin/src/components/MainNav/MainNav.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { Flex, FlexProps } from '@strapi/design-system';
2-
import styled from 'styled-components';
1+
import { Flex, FlexComponent, FlexProps } from '@strapi/design-system';
2+
import { styled } from 'styled-components';
33

4-
const MainNavWrapper = styled(Flex)`
4+
const MainNavWrapper = styled<FlexComponent<'nav'>>(Flex)`
55
border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
66
`;
77

88
const MainNav = (props: FlexProps<'nav'>) => (
99
<MainNavWrapper
1010
alignItems="normal"
11-
as="nav"
11+
tag="nav"
1212
background="neutral0"
1313
direction="column"
1414
height="100vh"

‎packages/core/admin/admin/src/components/MainNav/NavLink.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22

3-
import { Tooltip, Flex, Badge, BadgeProps } from '@strapi/design-system';
3+
import { Tooltip, Flex, Badge, BadgeProps, AccessibleIcon } from '@strapi/design-system';
44
import { NavLink as RouterLink, LinkProps } from 'react-router-dom';
55
import { styled } from 'styled-components';
66

@@ -15,6 +15,8 @@ const MainNavLinkWrapper = styled(RouterLink)`
1515
color: ${({ theme }) => theme.colors.neutral500};
1616
position: relative;
1717
width: fit-content;
18+
padding-block: 0.6rem;
19+
padding-inline: 0.6rem;
1820
1921
&:hover,
2022
&.active {
@@ -48,25 +50,19 @@ const LinkImpl = ({ children, ...props }: LinkProps) => {
4850
const TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => {
4951
return (
5052
<Tooltip position={position} label={label}>
51-
<Flex justifyContent="center" width={7} height={7}>
52-
{children}
53-
</Flex>
53+
<>{children}</>
5454
</Tooltip>
5555
);
5656
};
5757

5858
/* -------------------------------------------------------------------------------------------------
5959
* Icon
6060
* -----------------------------------------------------------------------------------------------*/
61-
const IconImpl = ({ children }: { children: React.ReactNode }) => {
61+
const IconImpl = ({ label, children }: { label: string; children: React.ReactNode }) => {
6262
if (!children) {
6363
return null;
6464
}
65-
return (
66-
<Flex justifyContent="center" aria-hidden tag="span" width={5} height={5}>
67-
{children}
68-
</Flex>
69-
);
65+
return <AccessibleIcon label={label}>{children}</AccessibleIcon>;
7066
};
7167

7268
/* -------------------------------------------------------------------------------------------------

‎packages/core/content-type-builder/admin/src/components/PluginIcon.tsx

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/core/content-type-builder/admin/src/index.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { Layout } from '@strapi/icons';
2+
13
import pluginPkg from '../../package.json';
24

3-
import { PluginIcon } from './components/PluginIcon';
45
import { PERMISSIONS } from './constants';
56
import { pluginId } from './pluginId';
67
import { reducers } from './reducers';
@@ -15,7 +16,7 @@ export default {
1516
app.addReducers(reducers);
1617
app.addMenuLink({
1718
to: `plugins/${pluginId}`,
18-
icon: PluginIcon,
19+
icon: Layout,
1920
intlLabel: {
2021
id: `${pluginId}.plugin.name`,
2122
defaultMessage: 'Content Types Builder',

‎packages/core/upload/admin/src/components/PluginIcon/index.jsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎packages/core/upload/admin/src/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import { Images } from '@strapi/icons';
2+
13
import pluginPkg from '../../package.json';
24

35
import { MediaLibraryDialog } from './components/MediaLibraryDialog';
46
import { MediaLibraryInput } from './components/MediaLibraryInput';
5-
import PluginIcon from './components/PluginIcon';
67
import { PERMISSIONS } from './constants';
78
import pluginId from './pluginId';
89
import getTrad from './utils/getTrad';
@@ -14,7 +15,7 @@ export default {
1415
register(app) {
1516
app.addMenuLink({
1617
to: `plugins/${pluginId}`,
17-
icon: PluginIcon,
18+
icon: Images,
1819
intlLabel: {
1920
id: `${pluginId}.plugin.name`,
2021
defaultMessage: 'Media Library',

0 commit comments

Comments
 (0)