diff --git a/packages/core/admin/admin/src/components/SubNav.tsx b/packages/core/admin/admin/src/components/SubNav.tsx
index 16f51264f8..c744a544a2 100644
--- a/packages/core/admin/admin/src/components/SubNav.tsx
+++ b/packages/core/admin/admin/src/components/SubNav.tsx
@@ -7,6 +7,7 @@ import {
Typography,
IconButton,
Badge,
+ ScrollArea,
} from '@strapi/design-system';
import { ChevronDown, Plus } from '@strapi/icons';
import { NavLink } from 'react-router-dom';
@@ -349,8 +350,13 @@ const PageWrapper = styled(Box)`
}
`;
+const Content = ({ children }: { children: React.ReactNode }) => {
+ return {children};
+};
+
export const SubNav = {
Main,
+ Content,
Header,
Link,
Sections,
diff --git a/packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx b/packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx
index 2fe77c2603..f3739fae58 100644
--- a/packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx
+++ b/packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx
@@ -1,4 +1,4 @@
-import { Badge, Divider, ScrollArea } from '@strapi/design-system';
+import { Badge, Divider } from '@strapi/design-system';
import { Lightning } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { useLocation } from 'react-router-dom';
@@ -78,7 +78,7 @@ const SettingsNav = ({ isFullPage = false }: { isFullPage?: boolean }) => {
>
)}
-
+
{isFullPage && }
{sections.map((section) => (
@@ -124,7 +124,7 @@ const SettingsNav = ({ isFullPage = false }: { isFullPage?: boolean }) => {
))}
-
+
);
};
diff --git a/packages/core/content-manager/admin/src/components/LeftMenu.tsx b/packages/core/content-manager/admin/src/components/LeftMenu.tsx
index cf96403a9e..00c8ab9042 100644
--- a/packages/core/content-manager/admin/src/components/LeftMenu.tsx
+++ b/packages/core/content-manager/admin/src/components/LeftMenu.tsx
@@ -1,15 +1,7 @@
import * as React from 'react';
import { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';
-import {
- Flex,
- Searchbar,
- useCollator,
- useFilter,
- Divider,
- ScrollArea,
- Loader,
-} from '@strapi/design-system';
+import { Flex, Searchbar, useCollator, useFilter, Divider, Loader } from '@strapi/design-system';
import { parse, stringify } from 'qs';
import { useIntl } from 'react-intl';
@@ -143,7 +135,7 @@ const LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {
>
)}
-
+
{isFullPage && }
{
);
})}
-
+
);
};
diff --git a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx
index 48fd4e3961..53bc42b8ea 100644
--- a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx
+++ b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx
@@ -99,167 +99,169 @@ export const ContentTypeBuilderNav = () => {
-
-
-
-
-
-
+
+
+
+
-
- }
+ {formatMessage({
+ id: 'global.save',
+ defaultMessage: 'Save',
+ })}
+
+
+
- {formatMessage({
- id: 'global.last-change.undo',
- defaultMessage: 'Undo last change',
- })}
-
- }
- >
- {formatMessage({
- id: 'global.last-change.redo',
- defaultMessage: 'Redo last change',
- })}
-
-
-
-
-
-
- {formatMessage({
- id: 'global.last-changes.discard',
- defaultMessage: 'Discard last changes',
- })}
-
-
-
-
-
-
-
+
+
+ {formatMessage({
+ id: 'global.more.actions',
+ defaultMessage: 'More actions',
+ })}
+
+
+
+ }
+ >
+ {formatMessage({
+ id: 'global.last-change.undo',
+ defaultMessage: 'Undo last change',
+ })}
+
+ }
+ >
+ {formatMessage({
+ id: 'global.last-change.redo',
+ defaultMessage: 'Redo last change',
+ })}
+
+
+
+
+
+
+ {formatMessage({
+ id: 'global.last-changes.discard',
+ defaultMessage: 'Discard last changes',
+ })}
+
+
+
+
+
+
+
- search.onChange(e.target.value)}
- onClear={() => search.onChange('')}
- placeholder={formatMessage({
- id: getTrad('search.placeholder'),
- defaultMessage: 'Search',
- })}
- size="S"
- // eslint-disable-next-line react/no-children-prop
- children={undefined}
- name={'search_contentType'}
- clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
- aria-label={formatMessage({
- id: getTrad('search.placeholder'),
- defaultMessage: 'Search',
- })}
- />
-
-
- {menu.map((section) => (
-
- search.onChange(e.target.value)}
+ onClear={() => search.onChange('')}
+ placeholder={formatMessage({
+ id: getTrad('search.placeholder'),
+ defaultMessage: 'Search',
+ })}
+ size="S"
+ // eslint-disable-next-line react/no-children-prop
+ children={undefined}
+ name={'search_contentType'}
+ clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
+ aria-label={formatMessage({
+ id: getTrad('search.placeholder'),
+ defaultMessage: 'Search',
+ })}
+ />
+
+
+ {menu.map((section) => (
+
+
- {section.links.map((link) => {
- const linkLabel = formatMessage({ id: link.name, defaultMessage: link.title });
+ sectionId={section.name}
+ >
+ {section.links.map((link) => {
+ const linkLabel = formatMessage({ id: link.name, defaultMessage: link.title });
+
+ if ('links' in link) {
+ return (
+
+ {link.links.map((subLink) => {
+ const label = formatMessage({
+ id: subLink.name,
+ defaultMessage: subLink.title,
+ });
+
+ return (
+
+
+
+ }
+ />
+ );
+ })}
+
+ );
+ }
- if ('links' in link) {
return (
-
- {link.links.map((subLink) => {
- const label = formatMessage({
- id: subLink.name,
- defaultMessage: subLink.title,
- });
-
- return (
-
-
-
- }
- />
- );
- })}
-
+
+
+
+ }
+ />
);
- }
-
- return (
-
-
-
- }
- />
- );
- })}
-
-
- ))}
-
+ })}
+
+
+ ))}
+
+
renders and matches the snapshot 1`] = `
background: #eaeaef;
}
-.c10 {
+.c12 {
padding-block-start: 20px;
padding-inline-end: 20px;
padding-block-end: 20px;
padding-inline-start: 20px;
}
-.c13 {
+.c15 {
padding-inline-start: 16px;
padding-inline-end: 16px;
width: 100%;
@@ -37,7 +37,7 @@ exports[` renders and matches the snapshot 1`] = `
flex: 1;
}
-.c17 {
+.c19 {
padding-block-start: 4px;
padding-inline-start: 7px;
padding-inline-end: 7px;
@@ -45,52 +45,52 @@ exports[` renders and matches the snapshot 1`] = `
cursor: pointer;
}
-.c28 {
+.c30 {
padding-block-start: 16px;
padding-block-end: 16px;
}
-.c31 {
+.c33 {
position: relative;
}
-.c33 {
+.c35 {
padding-inline-end: 4px;
}
-.c36 {
+.c38 {
border-radius: 4px;
display: inline-flex;
cursor: pointer;
}
-.c39 {
+.c41 {
margin-inline-start: 4px;
margin-inline-end: 4px;
}
-.c43 {
+.c45 {
padding-inline-start: 12px;
padding-inline-end: 12px;
width: 100%;
border-radius: 4px;
}
-.c44 {
+.c46 {
width: 100%;
}
-.c46 {
+.c48 {
width: 100%;
overflow: hidden;
}
-.c48 {
+.c50 {
width: 24px;
text-align: center;
}
-.c50 {
+.c52 {
padding-inline-start: 8px;
}
@@ -108,21 +108,21 @@ exports[` renders and matches the snapshot 1`] = `
display: flex;
}
-.c11 {
+.c13 {
gap: 12px;
align-items: stretch;
flex-direction: column;
display: flex;
}
-.c12 {
+.c14 {
gap: 8px;
align-items: center;
flex-direction: row;
display: flex;
}
-.c14 {
+.c16 {
gap: 8px;
align-items: center;
justify-content: center;
@@ -130,14 +130,14 @@ exports[` renders and matches the snapshot 1`] = `
display: inline-flex;
}
-.c21 {
+.c23 {
gap: 4px;
align-items: stretch;
flex-direction: column;
display: flex;
}
-.c22 {
+.c24 {
gap: 8px;
align-items: center;
justify-content: space-between;
@@ -145,48 +145,48 @@ exports[` renders and matches the snapshot 1`] = `
display: flex;
}
-.c29 {
+.c31 {
gap: 20px;
align-items: stretch;
flex-direction: column;
display: flex;
}
-.c30 {
+.c32 {
gap: 8px;
align-items: stretch;
flex-direction: column;
display: flex;
}
-.c32 {
- align-items: center;
- flex-direction: row;
- display: flex;
-}
-
-.c35 {
- gap: 4px;
+.c34 {
align-items: center;
flex-direction: row;
display: flex;
}
.c37 {
+ gap: 4px;
+ align-items: center;
+ flex-direction: row;
+ display: flex;
+}
+
+.c39 {
align-items: center;
justify-content: center;
flex-direction: row;
display: flex;
}
-.c40 {
+.c42 {
gap: 2px;
align-items: stretch;
flex-direction: column;
display: flex;
}
-.c45 {
+.c47 {
gap: 4px;
align-items: center;
justify-content: space-between;
@@ -201,14 +201,14 @@ exports[` renders and matches the snapshot 1`] = `
color: currentcolor;
}
-.c16 {
+.c18 {
font-size: 1.2rem;
line-height: 1.33;
color: currentcolor;
font-weight: 600;
}
-.c34 {
+.c36 {
font-weight: 600;
font-size: 1.1rem;
line-height: 1.45;
@@ -216,21 +216,21 @@ exports[` renders and matches the snapshot 1`] = `
color: #666687;
}
-.c47 {
+.c49 {
font-size: 1.4rem;
line-height: 1.43;
color: currentcolor;
line-height: 32px;
}
-.c51 {
+.c53 {
font-size: 1.4rem;
line-height: 1.43;
color: #32324d;
font-weight: 500;
}
-.c19 {
+.c21 {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
@@ -241,7 +241,7 @@ exports[` renders and matches the snapshot 1`] = `
width: 1px;
}
-.c15 {
+.c17 {
height: 3.2rem;
text-decoration: none;
border: 1px solid #4945ff;
@@ -249,24 +249,24 @@ exports[` renders and matches the snapshot 1`] = `
color: #ffffff;
}
-.c15:hover {
+.c17:hover {
border: 1px solid #7b79ff;
background: #7b79ff;
}
-.c15:active {
+.c17:active {
border: 1px solid #4945ff;
background: #4945ff;
}
-.c15[aria-disabled='true'] {
+.c17[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
color: #666687;
cursor: default;
}
-.c18 {
+.c20 {
height: 3.2rem;
text-decoration: none;
border: 1px solid #dcdce4;
@@ -274,22 +274,22 @@ exports[` renders and matches the snapshot 1`] = `
color: #32324d;
}
-.c18:hover {
+.c20:hover {
background-color: #f6f6f9;
}
-.c18:active {
+.c20:active {
background-color: #eaeaef;
}
-.c18[aria-disabled='true'] {
+.c20[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
color: #666687;
cursor: default;
}
-.c38 {
+.c40 {
text-decoration: none;
padding-block: 0.2rem;
padding-inline: 0.2rem;
@@ -298,26 +298,26 @@ exports[` renders and matches the snapshot 1`] = `
color: #32324d;
}
-.c38 svg {
+.c40 svg {
fill: #8e8ea9;
}
-.c38:hover {
+.c40:hover {
background-color: #f6f6f9;
}
-.c38:active {
+.c40:active {
background-color: #eaeaef;
}
-.c38[aria-disabled='true'] {
+.c40[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
color: #666687;
cursor: default;
}
-.c27 {
+.c29 {
border: none;
border-radius: 4px;
color: #32324d;
@@ -332,21 +332,21 @@ exports[` renders and matches the snapshot 1`] = `
padding-block: 4px;
}
-.c27::placeholder {
+.c29::placeholder {
color: #666687;
opacity: 1;
}
-.c27[aria-disabled='true'] {
+.c29[aria-disabled='true'] {
color: inherit;
}
-.c27:focus {
+.c29:focus {
outline: none;
box-shadow: none;
}
-.c23 {
+.c25 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
@@ -358,34 +358,45 @@ exports[` renders and matches the snapshot 1`] = `
transition-duration: 0.2s;
}
-.c23:focus-within {
+.c25:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
+.c10 {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+}
+
+.c11 {
+ min-width: 100%;
+}
+
.c9 {
height: 1px;
border: none;
flex-shrink: 0;
}
-.c26 {
+.c28 {
font-size: 1rem;
}
-.c26 path {
+.c28 path {
fill: #8e8ea9;
}
-.c20 {
+.c22 {
border-radius: 4px;
}
-border:1px solid #eaeaef .c20:focus-within .c25 {
+border:1px solid #eaeaef .c22:focus-within .c27 {
fill: #4945ff;
}
-.c24 {
+.c26 {
border: 1px solid #eaeaef height:16px;
padding: 0 0 0 8px;
color: #32324d;
@@ -395,11 +406,11 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
transition-duration: 0.2s;
}
-.c24:hover button {
+.c26:hover button {
cursor: pointer;
}
-.c24:focus-within {
+.c26:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
@@ -430,7 +441,7 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
z-index: 2;
}
-.c42 {
+.c44 {
display: flex;
align-items: center;
justify-content: space-between;
@@ -439,21 +450,21 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
color: #32324d;
}
-.c42.active>div {
+.c44.active>div {
background-color: #f0f0ff;
color: #271fe0;
font-weight: 500;
}
-.c42:hover.active>div {
+.c44:hover.active>div {
background-color: #f0f0ff;
}
-.c42:hover>div {
+.c44:hover>div {
background-color: #f6f6f9;
}
-.c42:focus-visible {
+.c44:focus-visible {
outline-offset: -2px;
}
@@ -462,7 +473,7 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
height: 5.6rem;
}
-.c49 {
+.c51 {
cursor: pointer;
width: 100%;
border: none;
@@ -477,11 +488,11 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
padding-bottom: 8px;
}
-.c49:hover {
+.c51:hover {
background-color: #f6f6f9;
}
-.c52 .c41>div {
+.c54 .c43>div {
padding-left: 36px;
}
@@ -493,26 +504,26 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
}
@media (min-width: 1080px) {
- .c39 {
+ .c41 {
margin-inline-start: 8px;
margin-inline-end: 8px;
}
}
@media (prefers-reduced-motion: no-preference) {
- .c15 {
+ .c17 {
transition: background-color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
}
@media (prefers-reduced-motion: no-preference) {
- .c18 {
+ .c20 {
transition: background-color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
}
@media (prefers-reduced-motion: no-preference) {
- .c38 {
+ .c40 {
transition: background-color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),color 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94),border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
}
@@ -554,546 +565,565 @@ border:1px solid #eaeaef .c20:focus-within .c25 {
role="separator"
/>
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+ Collection Types
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
-
-
- -
-
-
-
-
-
-
- Collection Types
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-