@strapi/admin 5.33.3 → 5.34.0

package/dist/admin/admin/src/components/MainNav/NavBrand.js

@@ -18,40 +18,47 @@ const BrandIconWrapper = styled.styled(designSystem.Flex)`
 const NavBrand = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const { logos: { menu } } = Configuration.useConfiguration('LeftMenu');
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        alignItems: "center",
         padding: 3,
-        children: /*#__PURE__*/ jsxRuntime.jsxs(BrandIconWrapper, {
-            direction: "column",
-            justifyContent: "center",
-            width: "3.2rem",
-            height: "3.2rem",
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx("img", {
-                    src: menu.custom?.url || menu.default,
-                    alt: formatMessage({
-                        id: 'app.components.LeftMenu.logo.alt',
-                        defaultMessage: 'Application logo'
-                    }),
-                    width: "100%",
-                    height: "100%"
-                }),
-                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.VisuallyHidden, {
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx("span", {
-                            children: formatMessage({
-                                id: 'app.components.LeftMenu.navbrand.title',
-                                defaultMessage: 'Strapi Dashboard'
-                            })
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            padding: {
+                initial: 1,
+                medium: 0
+            },
+            children: /*#__PURE__*/ jsxRuntime.jsxs(BrandIconWrapper, {
+                direction: "column",
+                justifyContent: "center",
+                width: "3.2rem",
+                height: "3.2rem",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("img", {
+                        src: menu.custom?.url || menu.default,
+                        alt: formatMessage({
+                            id: 'app.components.LeftMenu.logo.alt',
+                            defaultMessage: 'Application logo'
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsx("span", {
-                            children: formatMessage({
-                                id: 'app.components.LeftMenu.navbrand.workplace',
-                                defaultMessage: 'Workplace'
+                        width: "100%",
+                        height: "100%"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.VisuallyHidden, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                children: formatMessage({
+                                    id: 'app.components.LeftMenu.navbrand.title',
+                                    defaultMessage: 'Strapi Dashboard'
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                children: formatMessage({
+                                    id: 'app.components.LeftMenu.navbrand.workplace',
+                                    defaultMessage: 'Workplace'
+                                })
                             })
-                        })
-                    ]
-                })
-            ]
+                        ]
+                    })
+                ]
+            })
         })
     });
 };

package/dist/admin/admin/src/components/MainNav/NavBrand.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBrand.js","sources":["../../../../../../admin/src/components/MainNav/NavBrand.tsx"],"sourcesContent":["import { Box, Flex, type FlexComponent, VisuallyHidden } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useConfiguration } from '../../features/Configuration';\n\nconst BrandIconWrapper = styled<FlexComponent>(Flex)`\n  svg,\n  img {\n    border-radius: ${({ theme }) => theme.borderRadius};\n    object-fit: contain;\n    height: 2.4rem;\n    width: 2.4rem;\n  }\n`;\n\nexport const NavBrand = () => {\n  const { formatMessage } = useIntl();\n  const {\n    logos: { menu },\n  } = useConfiguration('LeftMenu');\n  return (\n    <Box padding={3}>\n      <BrandIconWrapper direction=\"column\" justifyContent=\"center\" width=\"3.2rem\" height=\"3.2rem\">\n        <img\n          src={menu.custom?.url || menu.default}\n          alt={formatMessage({\n            id: 'app.components.LeftMenu.logo.alt',\n            defaultMessage: 'Application logo',\n          })}\n          width=\"100%\"\n          height=\"100%\"\n        />\n        <VisuallyHidden>\n          <span>\n            {formatMessage({\n              id: 'app.components.LeftMenu.navbrand.title',\n              defaultMessage: 'Strapi Dashboard',\n            })}\n          </span>\n          <span>\n            {formatMessage({\n              id: 'app.components.LeftMenu.navbrand.workplace',\n              defaultMessage: 'Workplace',\n            })}\n          </span>\n        </VisuallyHidden>\n      </BrandIconWrapper>\n    </Box>\n  );\n};\n"],"names":["BrandIconWrapper","styled","Flex","theme","borderRadius","NavBrand","formatMessage","useIntl","logos","menu","useConfiguration","_jsx","Box","padding","_jsxs","direction","justifyContent","width","height","img","src","custom","url","default","alt","id","defaultMessage","VisuallyHidden","span"],"mappings":";;;;;;;;AAMA,MAAMA,gBAAAA,GAAmBC,aAAsBC,CAAAA,iBAAAA,CAAK;;;AAGjC,mBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;;;AAKvD,CAAC;MAEYC,QAAW,GAAA,IAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EACJC,KAAO,EAAA,EAAEC,IAAI,EAAE,EAChB,GAAGC,8BAAiB,CAAA,UAAA,CAAA;AACrB,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QAAIC,OAAS,EAAA,CAAA;AACZ,QAAA,QAAA,gBAAAC,eAACd,CAAAA,gBAAAA,EAAAA;YAAiBe,SAAU,EAAA,QAAA;YAASC,cAAe,EAAA,QAAA;YAASC,KAAM,EAAA,QAAA;YAASC,MAAO,EAAA,QAAA;;8BACjFP,cAACQ,CAAAA,KAAAA,EAAAA;AACCC,oBAAAA,GAAAA,EAAKX,IAAKY,CAAAA,MAAM,EAAEC,GAAAA,IAAOb,KAAKc,OAAO;AACrCC,oBAAAA,GAAAA,EAAKlB,aAAc,CAAA;wBACjBmB,EAAI,EAAA,kCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA;oBACAT,KAAM,EAAA,MAAA;oBACNC,MAAO,EAAA;;8BAETJ,eAACa,CAAAA,2BAAAA,EAAAA;;sCACChB,cAACiB,CAAAA,MAAAA,EAAAA;sCACEtB,aAAc,CAAA;gCACbmB,EAAI,EAAA,wCAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;sCAEFf,cAACiB,CAAAA,MAAAA,EAAAA;sCACEtB,aAAc,CAAA;gCACbmB,EAAI,EAAA,4CAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;;;;;;AAMZ;;;;"}
+{"version":3,"file":"NavBrand.js","sources":["../../../../../../admin/src/components/MainNav/NavBrand.tsx"],"sourcesContent":["import { Box, Flex, type FlexComponent, VisuallyHidden } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useConfiguration } from '../../features/Configuration';\n\nconst BrandIconWrapper = styled<FlexComponent>(Flex)`\n  svg,\n  img {\n    border-radius: ${({ theme }) => theme.borderRadius};\n    object-fit: contain;\n    height: 2.4rem;\n    width: 2.4rem;\n  }\n`;\n\nexport const NavBrand = () => {\n  const { formatMessage } = useIntl();\n  const {\n    logos: { menu },\n  } = useConfiguration('LeftMenu');\n  return (\n    <Flex alignItems=\"center\" padding={3}>\n      <Box padding={{ initial: 1, medium: 0 }}>\n        <BrandIconWrapper direction=\"column\" justifyContent=\"center\" width=\"3.2rem\" height=\"3.2rem\">\n          <img\n            src={menu.custom?.url || menu.default}\n            alt={formatMessage({\n              id: 'app.components.LeftMenu.logo.alt',\n              defaultMessage: 'Application logo',\n            })}\n            width=\"100%\"\n            height=\"100%\"\n          />\n          <VisuallyHidden>\n            <span>\n              {formatMessage({\n                id: 'app.components.LeftMenu.navbrand.title',\n                defaultMessage: 'Strapi Dashboard',\n              })}\n            </span>\n            <span>\n              {formatMessage({\n                id: 'app.components.LeftMenu.navbrand.workplace',\n                defaultMessage: 'Workplace',\n              })}\n            </span>\n          </VisuallyHidden>\n        </BrandIconWrapper>\n      </Box>\n    </Flex>\n  );\n};\n"],"names":["BrandIconWrapper","styled","Flex","theme","borderRadius","NavBrand","formatMessage","useIntl","logos","menu","useConfiguration","_jsx","alignItems","padding","Box","initial","medium","_jsxs","direction","justifyContent","width","height","img","src","custom","url","default","alt","id","defaultMessage","VisuallyHidden","span"],"mappings":";;;;;;;;AAMA,MAAMA,gBAAAA,GAAmBC,aAAsBC,CAAAA,iBAAAA,CAAK;;;AAGjC,mBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;;;AAKvD,CAAC;MAEYC,QAAW,GAAA,IAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EACJC,KAAO,EAAA,EAAEC,IAAI,EAAE,EAChB,GAAGC,8BAAiB,CAAA,UAAA,CAAA;AACrB,IAAA,qBACEC,cAACT,CAAAA,iBAAAA,EAAAA;QAAKU,UAAW,EAAA,QAAA;QAASC,OAAS,EAAA,CAAA;AACjC,QAAA,QAAA,gBAAAF,cAACG,CAAAA,gBAAAA,EAAAA;YAAID,OAAS,EAAA;gBAAEE,OAAS,EAAA,CAAA;gBAAGC,MAAQ,EAAA;AAAE,aAAA;AACpC,YAAA,QAAA,gBAAAC,eAACjB,CAAAA,gBAAAA,EAAAA;gBAAiBkB,SAAU,EAAA,QAAA;gBAASC,cAAe,EAAA,QAAA;gBAASC,KAAM,EAAA,QAAA;gBAASC,MAAO,EAAA,QAAA;;kCACjFV,cAACW,CAAAA,KAAAA,EAAAA;AACCC,wBAAAA,GAAAA,EAAKd,IAAKe,CAAAA,MAAM,EAAEC,GAAAA,IAAOhB,KAAKiB,OAAO;AACrCC,wBAAAA,GAAAA,EAAKrB,aAAc,CAAA;4BACjBsB,EAAI,EAAA,kCAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA,CAAA;wBACAT,KAAM,EAAA,MAAA;wBACNC,MAAO,EAAA;;kCAETJ,eAACa,CAAAA,2BAAAA,EAAAA;;0CACCnB,cAACoB,CAAAA,MAAAA,EAAAA;0CACEzB,aAAc,CAAA;oCACbsB,EAAI,EAAA,wCAAA;oCACJC,cAAgB,EAAA;AAClB,iCAAA;;0CAEFlB,cAACoB,CAAAA,MAAAA,EAAAA;0CACEzB,aAAc,CAAA;oCACbsB,EAAI,EAAA,4CAAA;oCACJC,cAAgB,EAAA;AAClB,iCAAA;;;;;;;;AAOd;;;;"}

package/dist/admin/admin/src/components/MainNav/NavBrand.mjs

@@ -16,40 +16,47 @@ const BrandIconWrapper = styled(Flex)`
 const NavBrand = ()=>{
     const { formatMessage } = useIntl();
     const { logos: { menu } } = useConfiguration('LeftMenu');
-    return /*#__PURE__*/ jsx(Box, {
+    return /*#__PURE__*/ jsx(Flex, {
+        alignItems: "center",
         padding: 3,
-        children: /*#__PURE__*/ jsxs(BrandIconWrapper, {
-            direction: "column",
-            justifyContent: "center",
-            width: "3.2rem",
-            height: "3.2rem",
-            children: [
-                /*#__PURE__*/ jsx("img", {
-                    src: menu.custom?.url || menu.default,
-                    alt: formatMessage({
-                        id: 'app.components.LeftMenu.logo.alt',
-                        defaultMessage: 'Application logo'
-                    }),
-                    width: "100%",
-                    height: "100%"
-                }),
-                /*#__PURE__*/ jsxs(VisuallyHidden, {
-                    children: [
-                        /*#__PURE__*/ jsx("span", {
-                            children: formatMessage({
-                                id: 'app.components.LeftMenu.navbrand.title',
-                                defaultMessage: 'Strapi Dashboard'
-                            })
+        children: /*#__PURE__*/ jsx(Box, {
+            padding: {
+                initial: 1,
+                medium: 0
+            },
+            children: /*#__PURE__*/ jsxs(BrandIconWrapper, {
+                direction: "column",
+                justifyContent: "center",
+                width: "3.2rem",
+                height: "3.2rem",
+                children: [
+                    /*#__PURE__*/ jsx("img", {
+                        src: menu.custom?.url || menu.default,
+                        alt: formatMessage({
+                            id: 'app.components.LeftMenu.logo.alt',
+                            defaultMessage: 'Application logo'
                         }),
-                        /*#__PURE__*/ jsx("span", {
-                            children: formatMessage({
-                                id: 'app.components.LeftMenu.navbrand.workplace',
-                                defaultMessage: 'Workplace'
+                        width: "100%",
+                        height: "100%"
+                    }),
+                    /*#__PURE__*/ jsxs(VisuallyHidden, {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                children: formatMessage({
+                                    id: 'app.components.LeftMenu.navbrand.title',
+                                    defaultMessage: 'Strapi Dashboard'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: formatMessage({
+                                    id: 'app.components.LeftMenu.navbrand.workplace',
+                                    defaultMessage: 'Workplace'
+                                })
                             })
-                        })
-                    ]
-                })
-            ]
+                        ]
+                    })
+                ]
+            })
         })
     });
 };

package/dist/admin/admin/src/components/MainNav/NavBrand.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavBrand.mjs","sources":["../../../../../../admin/src/components/MainNav/NavBrand.tsx"],"sourcesContent":["import { Box, Flex, type FlexComponent, VisuallyHidden } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useConfiguration } from '../../features/Configuration';\n\nconst BrandIconWrapper = styled<FlexComponent>(Flex)`\n  svg,\n  img {\n    border-radius: ${({ theme }) => theme.borderRadius};\n    object-fit: contain;\n    height: 2.4rem;\n    width: 2.4rem;\n  }\n`;\n\nexport const NavBrand = () => {\n  const { formatMessage } = useIntl();\n  const {\n    logos: { menu },\n  } = useConfiguration('LeftMenu');\n  return (\n    <Box padding={3}>\n      <BrandIconWrapper direction=\"column\" justifyContent=\"center\" width=\"3.2rem\" height=\"3.2rem\">\n        <img\n          src={menu.custom?.url || menu.default}\n          alt={formatMessage({\n            id: 'app.components.LeftMenu.logo.alt',\n            defaultMessage: 'Application logo',\n          })}\n          width=\"100%\"\n          height=\"100%\"\n        />\n        <VisuallyHidden>\n          <span>\n            {formatMessage({\n              id: 'app.components.LeftMenu.navbrand.title',\n              defaultMessage: 'Strapi Dashboard',\n            })}\n          </span>\n          <span>\n            {formatMessage({\n              id: 'app.components.LeftMenu.navbrand.workplace',\n              defaultMessage: 'Workplace',\n            })}\n          </span>\n        </VisuallyHidden>\n      </BrandIconWrapper>\n    </Box>\n  );\n};\n"],"names":["BrandIconWrapper","styled","Flex","theme","borderRadius","NavBrand","formatMessage","useIntl","logos","menu","useConfiguration","_jsx","Box","padding","_jsxs","direction","justifyContent","width","height","img","src","custom","url","default","alt","id","defaultMessage","VisuallyHidden","span"],"mappings":";;;;;;AAMA,MAAMA,gBAAAA,GAAmBC,MAAsBC,CAAAA,IAAAA,CAAK;;;AAGjC,mBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;;;AAKvD,CAAC;MAEYC,QAAW,GAAA,IAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EACJC,KAAO,EAAA,EAAEC,IAAI,EAAE,EAChB,GAAGC,gBAAiB,CAAA,UAAA,CAAA;AACrB,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;QAAIC,OAAS,EAAA,CAAA;AACZ,QAAA,QAAA,gBAAAC,IAACd,CAAAA,gBAAAA,EAAAA;YAAiBe,SAAU,EAAA,QAAA;YAASC,cAAe,EAAA,QAAA;YAASC,KAAM,EAAA,QAAA;YAASC,MAAO,EAAA,QAAA;;8BACjFP,GAACQ,CAAAA,KAAAA,EAAAA;AACCC,oBAAAA,GAAAA,EAAKX,IAAKY,CAAAA,MAAM,EAAEC,GAAAA,IAAOb,KAAKc,OAAO;AACrCC,oBAAAA,GAAAA,EAAKlB,aAAc,CAAA;wBACjBmB,EAAI,EAAA,kCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA;oBACAT,KAAM,EAAA,MAAA;oBACNC,MAAO,EAAA;;8BAETJ,IAACa,CAAAA,cAAAA,EAAAA;;sCACChB,GAACiB,CAAAA,MAAAA,EAAAA;sCACEtB,aAAc,CAAA;gCACbmB,EAAI,EAAA,wCAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;sCAEFf,GAACiB,CAAAA,MAAAA,EAAAA;sCACEtB,aAAc,CAAA;gCACbmB,EAAI,EAAA,4CAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;;;;;;;AAMZ;;;;"}
+{"version":3,"file":"NavBrand.mjs","sources":["../../../../../../admin/src/components/MainNav/NavBrand.tsx"],"sourcesContent":["import { Box, Flex, type FlexComponent, VisuallyHidden } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useConfiguration } from '../../features/Configuration';\n\nconst BrandIconWrapper = styled<FlexComponent>(Flex)`\n  svg,\n  img {\n    border-radius: ${({ theme }) => theme.borderRadius};\n    object-fit: contain;\n    height: 2.4rem;\n    width: 2.4rem;\n  }\n`;\n\nexport const NavBrand = () => {\n  const { formatMessage } = useIntl();\n  const {\n    logos: { menu },\n  } = useConfiguration('LeftMenu');\n  return (\n    <Flex alignItems=\"center\" padding={3}>\n      <Box padding={{ initial: 1, medium: 0 }}>\n        <BrandIconWrapper direction=\"column\" justifyContent=\"center\" width=\"3.2rem\" height=\"3.2rem\">\n          <img\n            src={menu.custom?.url || menu.default}\n            alt={formatMessage({\n              id: 'app.components.LeftMenu.logo.alt',\n              defaultMessage: 'Application logo',\n            })}\n            width=\"100%\"\n            height=\"100%\"\n          />\n          <VisuallyHidden>\n            <span>\n              {formatMessage({\n                id: 'app.components.LeftMenu.navbrand.title',\n                defaultMessage: 'Strapi Dashboard',\n              })}\n            </span>\n            <span>\n              {formatMessage({\n                id: 'app.components.LeftMenu.navbrand.workplace',\n                defaultMessage: 'Workplace',\n              })}\n            </span>\n          </VisuallyHidden>\n        </BrandIconWrapper>\n      </Box>\n    </Flex>\n  );\n};\n"],"names":["BrandIconWrapper","styled","Flex","theme","borderRadius","NavBrand","formatMessage","useIntl","logos","menu","useConfiguration","_jsx","alignItems","padding","Box","initial","medium","_jsxs","direction","justifyContent","width","height","img","src","custom","url","default","alt","id","defaultMessage","VisuallyHidden","span"],"mappings":";;;;;;AAMA,MAAMA,gBAAAA,GAAmBC,MAAsBC,CAAAA,IAAAA,CAAK;;;AAGjC,mBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;;;AAKvD,CAAC;MAEYC,QAAW,GAAA,IAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EACJC,KAAO,EAAA,EAAEC,IAAI,EAAE,EAChB,GAAGC,gBAAiB,CAAA,UAAA,CAAA;AACrB,IAAA,qBACEC,GAACT,CAAAA,IAAAA,EAAAA;QAAKU,UAAW,EAAA,QAAA;QAASC,OAAS,EAAA,CAAA;AACjC,QAAA,QAAA,gBAAAF,GAACG,CAAAA,GAAAA,EAAAA;YAAID,OAAS,EAAA;gBAAEE,OAAS,EAAA,CAAA;gBAAGC,MAAQ,EAAA;AAAE,aAAA;AACpC,YAAA,QAAA,gBAAAC,IAACjB,CAAAA,gBAAAA,EAAAA;gBAAiBkB,SAAU,EAAA,QAAA;gBAASC,cAAe,EAAA,QAAA;gBAASC,KAAM,EAAA,QAAA;gBAASC,MAAO,EAAA,QAAA;;kCACjFV,GAACW,CAAAA,KAAAA,EAAAA;AACCC,wBAAAA,GAAAA,EAAKd,IAAKe,CAAAA,MAAM,EAAEC,GAAAA,IAAOhB,KAAKiB,OAAO;AACrCC,wBAAAA,GAAAA,EAAKrB,aAAc,CAAA;4BACjBsB,EAAI,EAAA,kCAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA,CAAA;wBACAT,KAAM,EAAA,MAAA;wBACNC,MAAO,EAAA;;kCAETJ,IAACa,CAAAA,cAAAA,EAAAA;;0CACCnB,GAACoB,CAAAA,MAAAA,EAAAA;0CACEzB,aAAc,CAAA;oCACbsB,EAAI,EAAA,wCAAA;oCACJC,cAAgB,EAAA;AAClB,iCAAA;;0CAEFlB,GAACoB,CAAAA,MAAAA,EAAAA;0CACEzB,aAAc,CAAA;oCACbsB,EAAI,EAAA,4CAAA;oCACJC,cAAgB,EAAA;AAClB,iCAAA;;;;;;;;AAOd;;;;"}

package/dist/admin/admin/src/components/MainNav/NavBurgerMenu.js

@@ -48,8 +48,11 @@ const NavBurgerMenu = ({ isShown, handleClickOnLink, onClose, listLinks })=>{
                     id: "burger-menu",
                     children: /*#__PURE__*/ jsxRuntime.jsx(Surface, {
                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.ScrollArea, {
-                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                                 tag: "ul",
+                                direction: "column",
+                                alignItems: "stretch",
+                                width: "100%",
                                 paddingLeft: {
                                     initial: 4,
                                     medium: 6
@@ -59,20 +62,28 @@ const NavBurgerMenu = ({ isShown, handleClickOnLink, onClose, listLinks })=>{
                                     medium: 6
                                 },
                                 paddingTop: {
-                                    initial: 1,
+                                    initial: 4,
                                     medium: 3
                                 },
                                 paddingBottom: {
                                     initial: 4,
                                     medium: 6
                                 },
+                                gap: 3,
                                 children: [
                                     /*#__PURE__*/ jsxRuntime.jsx(MainNavLinks.MainNavBurgerMenuLinks, {
                                         listLinks: listLinks,
                                         handleClickOnLink: handleClickOnLink
                                     }),
                                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                        paddingTop: 4,
+                                        tag: "li",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {})
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                        paddingLeft: 2,
+                                        paddingRight: 2,
+                                        paddingTop: 1,
+                                        paddingBottom: 1,
                                         tag: "li",
                                         children: /*#__PURE__*/ jsxRuntime.jsx(NavUser.NavUser, {
                                             showDisplayName: true

package/dist/admin/admin/src/components/MainNav/NavBurgerMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBurgerMenu.js","sources":["../../../../../../admin/src/components/MainNav/NavBurgerMenu.tsx"],"sourcesContent":["import { Box, FocusTrap, Portal, ScrollArea } from '@strapi/design-system';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../../constants/theme';\nimport { MenuItem } from '../../core/apis/router';\n\nimport { MainNavBurgerMenuLinks } from './MainNavLinks';\nimport { NavUser } from './NavUser';\n\ninterface NavBurgerMenuProps {\n  isShown: boolean;\n  listLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n  mobile?: boolean;\n  onClose: () => void;\n}\n\nconst MotionLayer = styled(motion.div)`\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 3;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    display: none;\n  }\n`;\n\nconst Surface = styled(Box)`\n  height: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n`;\n\nexport const NavBurgerMenu = ({\n  isShown,\n  handleClickOnLink,\n  onClose,\n  listLinks,\n}: NavBurgerMenuProps) => {\n  return (\n    <Portal>\n      <AnimatePresence>\n        {isShown && (\n          <FocusTrap onEscape={onClose}>\n            <MotionLayer\n              key=\"burger\"\n              role=\"dialog\"\n              aria-modal=\"true\"\n              initial={{ y: '-100%' }}\n              animate={{ y: 0 }}\n              exit={{ y: '-100%' }}\n              transition={{ duration: 0.2, ease: 'easeInOut' }}\n              id=\"burger-menu\"\n            >\n              <Surface>\n                <ScrollArea>\n                  <Box\n                    tag=\"ul\"\n                    paddingLeft={{ initial: 4, medium: 6 }}\n                    paddingRight={{ initial: 4, medium: 6 }}\n                    paddingTop={{ initial: 1, medium: 3 }}\n                    paddingBottom={{ initial: 4, medium: 6 }}\n                  >\n                    <MainNavBurgerMenuLinks\n                      listLinks={listLinks}\n                      handleClickOnLink={handleClickOnLink}\n                    />\n                    <Box paddingTop={4} tag=\"li\">\n                      <NavUser showDisplayName />\n                    </Box>\n                  </Box>\n                </ScrollArea>\n              </Surface>\n            </MotionLayer>\n          </FocusTrap>\n        )}\n      </AnimatePresence>\n    </Portal>\n  );\n};\n"],"names":["MotionLayer","styled","motion","div","HEIGHT_TOP_NAVIGATION","theme","breakpoints","large","Surface","Box","colors","neutral0","NavBurgerMenu","isShown","handleClickOnLink","onClose","listLinks","_jsx","Portal","AnimatePresence","FocusTrap","onEscape","role","aria-modal","initial","y","animate","exit","transition","duration","ease","id","ScrollArea","_jsxs","tag","paddingLeft","medium","paddingRight","paddingTop","paddingBottom","MainNavBurgerMenuLinks","NavUser","showDisplayName"],"mappings":";;;;;;;;;;AAkBA,MAAMA,WAAcC,GAAAA,aAAAA,CAAOC,YAAOC,CAAAA,GAAG,CAAC;;AAE1B,YAAA,EAAEC,2BAAsB,CAAA;;;;;;EAMlC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,KAAK,CAAC;;;AAG3C,CAAC;AAED,MAAMC,OAAAA,GAAUP,aAAOQ,CAAAA,gBAAAA,CAAI;;oBAEP,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAACC,QAAQ,CAAC;AAC3D,CAAC;AAEM,MAAMC,aAAgB,GAAA,CAAC,EAC5BC,OAAO,EACPC,iBAAiB,EACjBC,OAAO,EACPC,SAAS,EACU,GAAA;AACnB,IAAA,qBACEC,cAACC,CAAAA,mBAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,cAACE,CAAAA,qBAAAA,EAAAA;AACEN,YAAAA,QAAAA,EAAAA,OAAAA,kBACCI,cAACG,CAAAA,sBAAAA,EAAAA;gBAAUC,QAAUN,EAAAA,OAAAA;AACnB,gBAAA,QAAA,gBAAAE,cAACjB,CAAAA,WAAAA,EAAAA;oBAECsB,IAAK,EAAA,QAAA;oBACLC,YAAW,EAAA,MAAA;oBACXC,OAAS,EAAA;wBAAEC,CAAG,EAAA;AAAQ,qBAAA;oBACtBC,OAAS,EAAA;wBAAED,CAAG,EAAA;AAAE,qBAAA;oBAChBE,IAAM,EAAA;wBAAEF,CAAG,EAAA;AAAQ,qBAAA;oBACnBG,UAAY,EAAA;wBAAEC,QAAU,EAAA,GAAA;wBAAKC,IAAM,EAAA;AAAY,qBAAA;oBAC/CC,EAAG,EAAA,aAAA;AAEH,oBAAA,QAAA,gBAAAd,cAACT,CAAAA,OAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAS,cAACe,CAAAA,uBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAC,eAACxB,CAAAA,gBAAAA,EAAAA;gCACCyB,GAAI,EAAA,IAAA;gCACJC,WAAa,EAAA;oCAAEX,OAAS,EAAA,CAAA;oCAAGY,MAAQ,EAAA;AAAE,iCAAA;gCACrCC,YAAc,EAAA;oCAAEb,OAAS,EAAA,CAAA;oCAAGY,MAAQ,EAAA;AAAE,iCAAA;gCACtCE,UAAY,EAAA;oCAAEd,OAAS,EAAA,CAAA;oCAAGY,MAAQ,EAAA;AAAE,iCAAA;gCACpCG,aAAe,EAAA;oCAAEf,OAAS,EAAA,CAAA;oCAAGY,MAAQ,EAAA;AAAE,iCAAA;;kDAEvCnB,cAACuB,CAAAA,mCAAAA,EAAAA;wCACCxB,SAAWA,EAAAA,SAAAA;wCACXF,iBAAmBA,EAAAA;;kDAErBG,cAACR,CAAAA,gBAAAA,EAAAA;wCAAI6B,UAAY,EAAA,CAAA;wCAAGJ,GAAI,EAAA,IAAA;AACtB,wCAAA,QAAA,gBAAAjB,cAACwB,CAAAA,eAAAA,EAAAA;4CAAQC,eAAe,EAAA;;;;;;;AAvB5B,iBAAA,EAAA,QAAA;;;;AAkClB;;;;"}
+{"version":3,"file":"NavBurgerMenu.js","sources":["../../../../../../admin/src/components/MainNav/NavBurgerMenu.tsx"],"sourcesContent":["import { Box, FocusTrap, Portal, ScrollArea, Flex, Divider } from '@strapi/design-system';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../../constants/theme';\nimport { MenuItem } from '../../core/apis/router';\n\nimport { MainNavBurgerMenuLinks } from './MainNavLinks';\nimport { NavUser } from './NavUser';\n\ninterface NavBurgerMenuProps {\n  isShown: boolean;\n  listLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n  mobile?: boolean;\n  onClose: () => void;\n}\n\nconst MotionLayer = styled(motion.div)`\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 3;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    display: none;\n  }\n`;\n\nconst Surface = styled(Box)`\n  height: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n`;\n\nexport const NavBurgerMenu = ({\n  isShown,\n  handleClickOnLink,\n  onClose,\n  listLinks,\n}: NavBurgerMenuProps) => {\n  return (\n    <Portal>\n      <AnimatePresence>\n        {isShown && (\n          <FocusTrap onEscape={onClose}>\n            <MotionLayer\n              key=\"burger\"\n              role=\"dialog\"\n              aria-modal=\"true\"\n              initial={{ y: '-100%' }}\n              animate={{ y: 0 }}\n              exit={{ y: '-100%' }}\n              transition={{ duration: 0.2, ease: 'easeInOut' }}\n              id=\"burger-menu\"\n            >\n              <Surface>\n                <ScrollArea>\n                  <Flex\n                    tag=\"ul\"\n                    direction=\"column\"\n                    alignItems=\"stretch\"\n                    width=\"100%\"\n                    paddingLeft={{ initial: 4, medium: 6 }}\n                    paddingRight={{ initial: 4, medium: 6 }}\n                    paddingTop={{ initial: 4, medium: 3 }}\n                    paddingBottom={{ initial: 4, medium: 6 }}\n                    gap={3}\n                  >\n                    <MainNavBurgerMenuLinks\n                      listLinks={listLinks}\n                      handleClickOnLink={handleClickOnLink}\n                    />\n                    <Box tag=\"li\">\n                      <Divider />\n                    </Box>\n                    <Box paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1} tag=\"li\">\n                      <NavUser showDisplayName />\n                    </Box>\n                  </Flex>\n                </ScrollArea>\n              </Surface>\n            </MotionLayer>\n          </FocusTrap>\n        )}\n      </AnimatePresence>\n    </Portal>\n  );\n};\n"],"names":["MotionLayer","styled","motion","div","HEIGHT_TOP_NAVIGATION","theme","breakpoints","large","Surface","Box","colors","neutral0","NavBurgerMenu","isShown","handleClickOnLink","onClose","listLinks","_jsx","Portal","AnimatePresence","FocusTrap","onEscape","role","aria-modal","initial","y","animate","exit","transition","duration","ease","id","ScrollArea","_jsxs","Flex","tag","direction","alignItems","width","paddingLeft","medium","paddingRight","paddingTop","paddingBottom","gap","MainNavBurgerMenuLinks","Divider","NavUser","showDisplayName"],"mappings":";;;;;;;;;;AAkBA,MAAMA,WAAcC,GAAAA,aAAAA,CAAOC,YAAOC,CAAAA,GAAG,CAAC;;AAE1B,YAAA,EAAEC,2BAAsB,CAAA;;;;;;EAMlC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,KAAK,CAAC;;;AAG3C,CAAC;AAED,MAAMC,OAAAA,GAAUP,aAAOQ,CAAAA,gBAAAA,CAAI;;oBAEP,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAACC,QAAQ,CAAC;AAC3D,CAAC;AAEM,MAAMC,aAAgB,GAAA,CAAC,EAC5BC,OAAO,EACPC,iBAAiB,EACjBC,OAAO,EACPC,SAAS,EACU,GAAA;AACnB,IAAA,qBACEC,cAACC,CAAAA,mBAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,cAACE,CAAAA,qBAAAA,EAAAA;AACEN,YAAAA,QAAAA,EAAAA,OAAAA,kBACCI,cAACG,CAAAA,sBAAAA,EAAAA;gBAAUC,QAAUN,EAAAA,OAAAA;AACnB,gBAAA,QAAA,gBAAAE,cAACjB,CAAAA,WAAAA,EAAAA;oBAECsB,IAAK,EAAA,QAAA;oBACLC,YAAW,EAAA,MAAA;oBACXC,OAAS,EAAA;wBAAEC,CAAG,EAAA;AAAQ,qBAAA;oBACtBC,OAAS,EAAA;wBAAED,CAAG,EAAA;AAAE,qBAAA;oBAChBE,IAAM,EAAA;wBAAEF,CAAG,EAAA;AAAQ,qBAAA;oBACnBG,UAAY,EAAA;wBAAEC,QAAU,EAAA,GAAA;wBAAKC,IAAM,EAAA;AAAY,qBAAA;oBAC/CC,EAAG,EAAA,aAAA;AAEH,oBAAA,QAAA,gBAAAd,cAACT,CAAAA,OAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAS,cAACe,CAAAA,uBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAC,eAACC,CAAAA,iBAAAA,EAAAA;gCACCC,GAAI,EAAA,IAAA;gCACJC,SAAU,EAAA,QAAA;gCACVC,UAAW,EAAA,SAAA;gCACXC,KAAM,EAAA,MAAA;gCACNC,WAAa,EAAA;oCAAEf,OAAS,EAAA,CAAA;oCAAGgB,MAAQ,EAAA;AAAE,iCAAA;gCACrCC,YAAc,EAAA;oCAAEjB,OAAS,EAAA,CAAA;oCAAGgB,MAAQ,EAAA;AAAE,iCAAA;gCACtCE,UAAY,EAAA;oCAAElB,OAAS,EAAA,CAAA;oCAAGgB,MAAQ,EAAA;AAAE,iCAAA;gCACpCG,aAAe,EAAA;oCAAEnB,OAAS,EAAA,CAAA;oCAAGgB,MAAQ,EAAA;AAAE,iCAAA;gCACvCI,GAAK,EAAA,CAAA;;kDAEL3B,cAAC4B,CAAAA,mCAAAA,EAAAA;wCACC7B,SAAWA,EAAAA,SAAAA;wCACXF,iBAAmBA,EAAAA;;kDAErBG,cAACR,CAAAA,gBAAAA,EAAAA;wCAAI0B,GAAI,EAAA,IAAA;AACP,wCAAA,QAAA,gBAAAlB,cAAC6B,CAAAA,oBAAAA,EAAAA,EAAAA;;kDAEH7B,cAACR,CAAAA,gBAAAA,EAAAA;wCAAI8B,WAAa,EAAA,CAAA;wCAAGE,YAAc,EAAA,CAAA;wCAAGC,UAAY,EAAA,CAAA;wCAAGC,aAAe,EAAA,CAAA;wCAAGR,GAAI,EAAA,IAAA;AACzE,wCAAA,QAAA,gBAAAlB,cAAC8B,CAAAA,eAAAA,EAAAA;4CAAQC,eAAe,EAAA;;;;;;;AA9B5B,iBAAA,EAAA,QAAA;;;;AAyClB;;;;"}

package/dist/admin/admin/src/components/MainNav/NavBurgerMenu.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, Portal, FocusTrap, ScrollArea } from '@strapi/design-system';
+import { Box, Portal, FocusTrap, ScrollArea, Flex, Divider } from '@strapi/design-system';
 import { motion, AnimatePresence } from 'motion/react';
 import { styled } from 'styled-components';
 import { HEIGHT_TOP_NAVIGATION } from '../../constants/theme.mjs';
@@ -46,8 +46,11 @@ const NavBurgerMenu = ({ isShown, handleClickOnLink, onClose, listLinks })=>{
                     id: "burger-menu",
                     children: /*#__PURE__*/ jsx(Surface, {
                         children: /*#__PURE__*/ jsx(ScrollArea, {
-                            children: /*#__PURE__*/ jsxs(Box, {
+                            children: /*#__PURE__*/ jsxs(Flex, {
                                 tag: "ul",
+                                direction: "column",
+                                alignItems: "stretch",
+                                width: "100%",
                                 paddingLeft: {
                                     initial: 4,
                                     medium: 6
@@ -57,20 +60,28 @@ const NavBurgerMenu = ({ isShown, handleClickOnLink, onClose, listLinks })=>{
                                     medium: 6
                                 },
                                 paddingTop: {
-                                    initial: 1,
+                                    initial: 4,
                                     medium: 3
                                 },
                                 paddingBottom: {
                                     initial: 4,
                                     medium: 6
                                 },
+                                gap: 3,
                                 children: [
                                     /*#__PURE__*/ jsx(MainNavBurgerMenuLinks, {
                                         listLinks: listLinks,
                                         handleClickOnLink: handleClickOnLink
                                     }),
                                     /*#__PURE__*/ jsx(Box, {
-                                        paddingTop: 4,
+                                        tag: "li",
+                                        children: /*#__PURE__*/ jsx(Divider, {})
+                                    }),
+                                    /*#__PURE__*/ jsx(Box, {
+                                        paddingLeft: 2,
+                                        paddingRight: 2,
+                                        paddingTop: 1,
+                                        paddingBottom: 1,
                                         tag: "li",
                                         children: /*#__PURE__*/ jsx(NavUser, {
                                             showDisplayName: true

package/dist/admin/admin/src/components/MainNav/NavBurgerMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavBurgerMenu.mjs","sources":["../../../../../../admin/src/components/MainNav/NavBurgerMenu.tsx"],"sourcesContent":["import { Box, FocusTrap, Portal, ScrollArea } from '@strapi/design-system';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../../constants/theme';\nimport { MenuItem } from '../../core/apis/router';\n\nimport { MainNavBurgerMenuLinks } from './MainNavLinks';\nimport { NavUser } from './NavUser';\n\ninterface NavBurgerMenuProps {\n  isShown: boolean;\n  listLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n  mobile?: boolean;\n  onClose: () => void;\n}\n\nconst MotionLayer = styled(motion.div)`\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 3;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    display: none;\n  }\n`;\n\nconst Surface = styled(Box)`\n  height: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n`;\n\nexport const NavBurgerMenu = ({\n  isShown,\n  handleClickOnLink,\n  onClose,\n  listLinks,\n}: NavBurgerMenuProps) => {\n  return (\n    <Portal>\n      <AnimatePresence>\n        {isShown && (\n          <FocusTrap onEscape={onClose}>\n            <MotionLayer\n              key=\"burger\"\n              role=\"dialog\"\n              aria-modal=\"true\"\n              initial={{ y: '-100%' }}\n              animate={{ y: 0 }}\n              exit={{ y: '-100%' }}\n              transition={{ duration: 0.2, ease: 'easeInOut' }}\n              id=\"burger-menu\"\n            >\n              <Surface>\n                <ScrollArea>\n                  <Box\n                    tag=\"ul\"\n                    paddingLeft={{ initial: 4, medium: 6 }}\n                    paddingRight={{ initial: 4, medium: 6 }}\n                    paddingTop={{ initial: 1, medium: 3 }}\n                    paddingBottom={{ initial: 4, medium: 6 }}\n                  >\n                    <MainNavBurgerMenuLinks\n                      listLinks={listLinks}\n                      handleClickOnLink={handleClickOnLink}\n                    />\n                    <Box paddingTop={4} tag=\"li\">\n                      <NavUser showDisplayName />\n                    </Box>\n                  </Box>\n                </ScrollArea>\n              </Surface>\n            </MotionLayer>\n          </FocusTrap>\n        )}\n      </AnimatePresence>\n    </Portal>\n  );\n};\n"],"names":["MotionLayer","styled","motion","div","HEIGHT_TOP_NAVIGATION","theme","breakpoints","large","Surface","Box","colors","neutral0","NavBurgerMenu","isShown","handleClickOnLink","onClose","listLinks","_jsx","Portal","AnimatePresence","FocusTrap","onEscape","role","aria-modal","initial","y","animate","exit","transition","duration","ease","id","ScrollArea","_jsxs","tag","paddingLeft","medium","paddingRight","paddingTop","paddingBottom","MainNavBurgerMenuLinks","NavUser","showDisplayName"],"mappings":";;;;;;;;AAkBA,MAAMA,WAAcC,GAAAA,MAAAA,CAAOC,MAAOC,CAAAA,GAAG,CAAC;;AAE1B,YAAA,EAAEC,qBAAsB,CAAA;;;;;;EAMlC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,KAAK,CAAC;;;AAG3C,CAAC;AAED,MAAMC,OAAAA,GAAUP,MAAOQ,CAAAA,GAAAA,CAAI;;oBAEP,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAACC,QAAQ,CAAC;AAC3D,CAAC;AAEM,MAAMC,aAAgB,GAAA,CAAC,EAC5BC,OAAO,EACPC,iBAAiB,EACjBC,OAAO,EACPC,SAAS,EACU,GAAA;AACnB,IAAA,qBACEC,GAACC,CAAAA,MAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,GAACE,CAAAA,eAAAA,EAAAA;AACEN,YAAAA,QAAAA,EAAAA,OAAAA,kBACCI,GAACG,CAAAA,SAAAA,EAAAA;gBAAUC,QAAUN,EAAAA,OAAAA;AACnB,gBAAA,QAAA,gBAAAE,GAACjB,CAAAA,WAAAA,EAAAA;oBAECsB,IAAK,EAAA,QAAA;oBACLC,YAAW,EAAA,MAAA;oBACXC,OAAS,EAAA;wBAAEC,CAAG,EAAA;AAAQ,qBAAA;oBACtBC,OAAS,EAAA;wBAAED,CAAG,EAAA;AAAE,qBAAA;oBAChBE,IAAM,EAAA;wBAAEF,CAAG,EAAA;AAAQ,qBAAA;oBACnBG,UAAY,EAAA;wBAAEC,QAAU,EAAA,GAAA;wBAAKC,IAAM,EAAA;AAAY,qBAAA;oBAC/CC,EAAG,EAAA,aAAA;AAEH,oBAAA,QAAA,gBAAAd,GAACT,CAAAA,OAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAS,GAACe,CAAAA,UAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAC,IAACxB,CAAAA,GAAAA,EAAAA;gCACCyB,GAAI,EAAA,IAAA;gCACJC,WAAa,EAAA;oCAAEX,OAAS,EAAA,CAAA;oCAAGY,MAAQ,EAAA;AAAE,iCAAA;gCACrCC,YAAc,EAAA;oCAAEb,OAAS,EAAA,CAAA;oCAAGY,MAAQ,EAAA;AAAE,iCAAA;gCACtCE,UAAY,EAAA;oCAAEd,OAAS,EAAA,CAAA;oCAAGY,MAAQ,EAAA;AAAE,iCAAA;gCACpCG,aAAe,EAAA;oCAAEf,OAAS,EAAA,CAAA;oCAAGY,MAAQ,EAAA;AAAE,iCAAA;;kDAEvCnB,GAACuB,CAAAA,sBAAAA,EAAAA;wCACCxB,SAAWA,EAAAA,SAAAA;wCACXF,iBAAmBA,EAAAA;;kDAErBG,GAACR,CAAAA,GAAAA,EAAAA;wCAAI6B,UAAY,EAAA,CAAA;wCAAGJ,GAAI,EAAA,IAAA;AACtB,wCAAA,QAAA,gBAAAjB,GAACwB,CAAAA,OAAAA,EAAAA;4CAAQC,eAAe,EAAA;;;;;;;AAvB5B,iBAAA,EAAA,QAAA;;;;AAkClB;;;;"}
+{"version":3,"file":"NavBurgerMenu.mjs","sources":["../../../../../../admin/src/components/MainNav/NavBurgerMenu.tsx"],"sourcesContent":["import { Box, FocusTrap, Portal, ScrollArea, Flex, Divider } from '@strapi/design-system';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { styled } from 'styled-components';\n\nimport { HEIGHT_TOP_NAVIGATION } from '../../constants/theme';\nimport { MenuItem } from '../../core/apis/router';\n\nimport { MainNavBurgerMenuLinks } from './MainNavLinks';\nimport { NavUser } from './NavUser';\n\ninterface NavBurgerMenuProps {\n  isShown: boolean;\n  listLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n  mobile?: boolean;\n  onClose: () => void;\n}\n\nconst MotionLayer = styled(motion.div)`\n  position: fixed;\n  top: calc(${HEIGHT_TOP_NAVIGATION} + 1px);\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 3;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    display: none;\n  }\n`;\n\nconst Surface = styled(Box)`\n  height: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n`;\n\nexport const NavBurgerMenu = ({\n  isShown,\n  handleClickOnLink,\n  onClose,\n  listLinks,\n}: NavBurgerMenuProps) => {\n  return (\n    <Portal>\n      <AnimatePresence>\n        {isShown && (\n          <FocusTrap onEscape={onClose}>\n            <MotionLayer\n              key=\"burger\"\n              role=\"dialog\"\n              aria-modal=\"true\"\n              initial={{ y: '-100%' }}\n              animate={{ y: 0 }}\n              exit={{ y: '-100%' }}\n              transition={{ duration: 0.2, ease: 'easeInOut' }}\n              id=\"burger-menu\"\n            >\n              <Surface>\n                <ScrollArea>\n                  <Flex\n                    tag=\"ul\"\n                    direction=\"column\"\n                    alignItems=\"stretch\"\n                    width=\"100%\"\n                    paddingLeft={{ initial: 4, medium: 6 }}\n                    paddingRight={{ initial: 4, medium: 6 }}\n                    paddingTop={{ initial: 4, medium: 3 }}\n                    paddingBottom={{ initial: 4, medium: 6 }}\n                    gap={3}\n                  >\n                    <MainNavBurgerMenuLinks\n                      listLinks={listLinks}\n                      handleClickOnLink={handleClickOnLink}\n                    />\n                    <Box tag=\"li\">\n                      <Divider />\n                    </Box>\n                    <Box paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1} tag=\"li\">\n                      <NavUser showDisplayName />\n                    </Box>\n                  </Flex>\n                </ScrollArea>\n              </Surface>\n            </MotionLayer>\n          </FocusTrap>\n        )}\n      </AnimatePresence>\n    </Portal>\n  );\n};\n"],"names":["MotionLayer","styled","motion","div","HEIGHT_TOP_NAVIGATION","theme","breakpoints","large","Surface","Box","colors","neutral0","NavBurgerMenu","isShown","handleClickOnLink","onClose","listLinks","_jsx","Portal","AnimatePresence","FocusTrap","onEscape","role","aria-modal","initial","y","animate","exit","transition","duration","ease","id","ScrollArea","_jsxs","Flex","tag","direction","alignItems","width","paddingLeft","medium","paddingRight","paddingTop","paddingBottom","gap","MainNavBurgerMenuLinks","Divider","NavUser","showDisplayName"],"mappings":";;;;;;;;AAkBA,MAAMA,WAAcC,GAAAA,MAAAA,CAAOC,MAAOC,CAAAA,GAAG,CAAC;;AAE1B,YAAA,EAAEC,qBAAsB,CAAA;;;;;;EAMlC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,KAAK,CAAC;;;AAG3C,CAAC;AAED,MAAMC,OAAAA,GAAUP,MAAOQ,CAAAA,GAAAA,CAAI;;oBAEP,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAACC,QAAQ,CAAC;AAC3D,CAAC;AAEM,MAAMC,aAAgB,GAAA,CAAC,EAC5BC,OAAO,EACPC,iBAAiB,EACjBC,OAAO,EACPC,SAAS,EACU,GAAA;AACnB,IAAA,qBACEC,GAACC,CAAAA,MAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,GAACE,CAAAA,eAAAA,EAAAA;AACEN,YAAAA,QAAAA,EAAAA,OAAAA,kBACCI,GAACG,CAAAA,SAAAA,EAAAA;gBAAUC,QAAUN,EAAAA,OAAAA;AACnB,gBAAA,QAAA,gBAAAE,GAACjB,CAAAA,WAAAA,EAAAA;oBAECsB,IAAK,EAAA,QAAA;oBACLC,YAAW,EAAA,MAAA;oBACXC,OAAS,EAAA;wBAAEC,CAAG,EAAA;AAAQ,qBAAA;oBACtBC,OAAS,EAAA;wBAAED,CAAG,EAAA;AAAE,qBAAA;oBAChBE,IAAM,EAAA;wBAAEF,CAAG,EAAA;AAAQ,qBAAA;oBACnBG,UAAY,EAAA;wBAAEC,QAAU,EAAA,GAAA;wBAAKC,IAAM,EAAA;AAAY,qBAAA;oBAC/CC,EAAG,EAAA,aAAA;AAEH,oBAAA,QAAA,gBAAAd,GAACT,CAAAA,OAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAS,GAACe,CAAAA,UAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAC,IAACC,CAAAA,IAAAA,EAAAA;gCACCC,GAAI,EAAA,IAAA;gCACJC,SAAU,EAAA,QAAA;gCACVC,UAAW,EAAA,SAAA;gCACXC,KAAM,EAAA,MAAA;gCACNC,WAAa,EAAA;oCAAEf,OAAS,EAAA,CAAA;oCAAGgB,MAAQ,EAAA;AAAE,iCAAA;gCACrCC,YAAc,EAAA;oCAAEjB,OAAS,EAAA,CAAA;oCAAGgB,MAAQ,EAAA;AAAE,iCAAA;gCACtCE,UAAY,EAAA;oCAAElB,OAAS,EAAA,CAAA;oCAAGgB,MAAQ,EAAA;AAAE,iCAAA;gCACpCG,aAAe,EAAA;oCAAEnB,OAAS,EAAA,CAAA;oCAAGgB,MAAQ,EAAA;AAAE,iCAAA;gCACvCI,GAAK,EAAA,CAAA;;kDAEL3B,GAAC4B,CAAAA,sBAAAA,EAAAA;wCACC7B,SAAWA,EAAAA,SAAAA;wCACXF,iBAAmBA,EAAAA;;kDAErBG,GAACR,CAAAA,GAAAA,EAAAA;wCAAI0B,GAAI,EAAA,IAAA;AACP,wCAAA,QAAA,gBAAAlB,GAAC6B,CAAAA,OAAAA,EAAAA,EAAAA;;kDAEH7B,GAACR,CAAAA,GAAAA,EAAAA;wCAAI8B,WAAa,EAAA,CAAA;wCAAGE,YAAc,EAAA,CAAA;wCAAGC,UAAY,EAAA,CAAA;wCAAGC,aAAe,EAAA,CAAA;wCAAGR,GAAI,EAAA,IAAA;AACzE,wCAAA,QAAA,gBAAAlB,GAAC8B,CAAAA,OAAAA,EAAAA;4CAAQC,eAAe,EAAA;;;;;;;AA9B5B,iBAAA,EAAA,QAAA;;;;AAyClB;;;;"}

package/dist/admin/admin/src/components/MainNav/NavLink.js

@@ -6,9 +6,10 @@ var designSystem = require('@strapi/design-system');
 var reactRouterDom = require('react-router-dom');
 var styled = require('styled-components');
 
+const isExternalLink = (to)=>typeof to === 'string' && (to.startsWith('http://') || to.startsWith('https://'));
 /* -------------------------------------------------------------------------------------------------
  * Link
- * -----------------------------------------------------------------------------------------------*/ const MainNavLinkWrapper = styled.styled(reactRouterDom.NavLink)`
+ * -----------------------------------------------------------------------------------------------*/ const MainNavLinkStyles = styled.css`
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -17,8 +18,13 @@ var styled = require('styled-components');
   color: ${({ theme })=>theme.colors.neutral500};
   position: relative;
   width: 100%;
-  padding-block: 0.6rem;
-  padding-inline: 0.6rem;
+  padding-block: 0.4rem;
+  padding-inline: 1.2rem;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    padding-block: 0.6rem;
+    padding-inline: 0.6rem;
+  }
 
   &:hover {
     svg path {
@@ -34,10 +40,50 @@ var styled = require('styled-components');
     background: ${({ theme })=>theme.colors.primary100};
   }
 `;
-const LinkImpl = ({ children, ...props })=>/*#__PURE__*/ jsxRuntime.jsx(MainNavLinkWrapper, {
+const MainNavLinkWrapper = styled.styled(reactRouterDom.NavLink)`
+  ${MainNavLinkStyles}
+`;
+const MainNavLinkAnchor = styled.styled.a`
+  ${MainNavLinkStyles}
+`;
+const MainNavButtonStyles = styled.css`
+  padding-block: 1rem;
+  padding-inline: 1rem;
+`;
+const MainNavButtonWrapper = styled.styled(MainNavLinkWrapper)`
+  ${MainNavButtonStyles}
+`;
+const MainNavButtonAnchor = styled.styled(MainNavLinkAnchor)`
+  ${MainNavButtonStyles}
+`;
+const LinkImpl = ({ children, to, ...props })=>{
+    if (isExternalLink(to)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(MainNavLinkAnchor, {
+            href: to,
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(MainNavLinkWrapper, {
+        to: to,
+        ...props,
+        children: children
+    });
+};
+const NavButtonImpl = ({ children, to, ...props })=>{
+    if (isExternalLink(to)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(MainNavButtonAnchor, {
+            href: to,
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(MainNavButtonWrapper, {
+        to: to,
         ...props,
         children: children
     });
+};
 /* -------------------------------------------------------------------------------------------------
  * Tooltip
  * -----------------------------------------------------------------------------------------------*/ const TooltipImpl = ({ children, label, position = 'right' })=>{
@@ -86,6 +132,7 @@ const BadgeImpl = ({ children, label, ...props })=>{
  * EXPORTS
  * -----------------------------------------------------------------------------------------------*/ const NavLink = {
     Link: LinkImpl,
+    NavButton: NavButtonImpl,
     Tooltip: TooltipImpl,
     Icon: IconImpl,
     Badge: BadgeImpl

package/dist/admin/admin/src/components/MainNav/NavLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.js","sources":["../../../../../../admin/src/components/MainNav/NavLink.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Tooltip,\n  TooltipProps as DSTooltipProps,\n  Badge,\n  BadgeProps,\n  AccessibleIcon,\n} from '@strapi/design-system';\nimport { NavLink as RouterLink, LinkProps } from 'react-router-dom';\nimport { styled } from 'styled-components';\n/* -------------------------------------------------------------------------------------------------\n * Link\n * -----------------------------------------------------------------------------------------------*/\nconst MainNavLinkWrapper = styled(RouterLink)`\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral500};\n  position: relative;\n  width: 100%;\n  padding-block: 0.6rem;\n  padding-inline: 0.6rem;\n\n  &:hover {\n    svg path {\n      fill: ${({ theme }) => theme.colors.neutral600};\n    }\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  &.active {\n    svg path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n`;\n\nconst LinkImpl = ({ children, ...props }: LinkProps) => (\n  <MainNavLinkWrapper {...props}>{children}</MainNavLinkWrapper>\n);\n/* -------------------------------------------------------------------------------------------------\n * Tooltip\n * -----------------------------------------------------------------------------------------------*/\nconst TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => {\n  return (\n    <Tooltip side={position} label={label} delayDuration={0}>\n      <span>{children}</span>\n    </Tooltip>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Icon\n * -----------------------------------------------------------------------------------------------*/\nconst IconImpl = ({ label, children }: { label: string; children: React.ReactNode }) => {\n  if (!children) {\n    return null;\n  }\n  return <AccessibleIcon label={label}>{children}</AccessibleIcon>;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Badge\n * -----------------------------------------------------------------------------------------------*/\nconst CustomBadge = styled(Badge)`\n  /* override default badge styles to change the border radius of the Base element in the Design System */\n  border-radius: ${({ theme }) => theme.spaces[10]};\n  height: 2rem;\n`;\n\nconst BadgeImpl = ({ children, label, ...props }: NavLink.NavBadgeProps) => {\n  if (!children) {\n    return null;\n  }\n  return (\n    <CustomBadge\n      position=\"absolute\"\n      top=\"-0.8rem\"\n      left=\"1.7rem\"\n      aria-label={label}\n      active={false}\n      {...props}\n    >\n      {children}\n    </CustomBadge>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EXPORTS\n * -----------------------------------------------------------------------------------------------*/\n\nconst NavLink = {\n  Link: LinkImpl,\n  Tooltip: TooltipImpl,\n  Icon: IconImpl,\n  Badge: BadgeImpl,\n};\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace NavLink {\n  export interface NavBadgeProps extends BadgeProps {\n    children: React.ReactNode;\n    label: string;\n  }\n\n  export interface TooltipProps {\n    children: React.ReactNode;\n    label?: string;\n    position?: DSTooltipProps['side'];\n  }\n}\n\nexport { NavLink };\n"],"names":["MainNavLinkWrapper","styled","RouterLink","theme","borderRadius","colors","neutral0","neutral500","neutral600","neutral100","primary600","primary100","LinkImpl","children","props","_jsx","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","Icon"],"mappings":";;;;;;;;AAWA;;AAEkG,qGAClG,MAAMA,kBAAAA,GAAqBC,aAAOC,CAAAA,sBAAAA,CAAW;;;;AAI5B,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;cACvC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;SAC5C,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;;;;;;;YAQtC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACG,UAAU,CAAC;;gBAErC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACI,UAAU,CAAC;;;;;YAK7C,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACK,UAAU,CAAC;;gBAErC,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACM,UAAU,CAAC;;AAEzD,CAAC;AAED,MAAMC,QAAAA,GAAW,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAAkB,iBACjDC,cAACf,CAAAA,kBAAAA,EAAAA;AAAoB,QAAA,GAAGc,KAAK;AAAGD,QAAAA,QAAAA,EAAAA;;AAElC;;qGAGA,MAAMG,WAAc,GAAA,CAAC,EAAEH,QAAQ,EAAEI,KAAK,EAAEC,QAAW,GAAA,OAAO,EAAwB,GAAA;AAChF,IAAA,qBACEH,cAACI,CAAAA,oBAAAA,EAAAA;QAAQC,IAAMF,EAAAA,QAAAA;QAAUD,KAAOA,EAAAA,KAAAA;QAAOI,aAAe,EAAA,CAAA;AACpD,QAAA,QAAA,gBAAAN,cAACO,CAAAA,MAAAA,EAAAA;AAAMT,YAAAA,QAAAA,EAAAA;;;AAGb,CAAA;AAEA;;AAEkG,qGAClG,MAAMU,QAAW,GAAA,CAAC,EAAEN,KAAK,EAAEJ,QAAQ,EAAgD,GAAA;AACjF,IAAA,IAAI,CAACA,QAAU,EAAA;QACb,OAAO,IAAA;AACT;AACA,IAAA,qBAAOE,cAACS,CAAAA,2BAAAA,EAAAA;QAAeP,KAAOA,EAAAA,KAAAA;AAAQJ,QAAAA,QAAAA,EAAAA;;AACxC,CAAA;AAEA;;AAEkG,qGAClG,MAAMY,WAAAA,GAAcxB,aAAOyB,CAAAA,kBAAAA,CAAM;;iBAEhB,EAAE,CAAC,EAAEvB,KAAK,EAAE,GAAKA,KAAMwB,CAAAA,MAAM,CAAC,EAAA,CAAG,CAAC;;AAEnD,CAAC;AAED,MAAMC,SAAAA,GAAY,CAAC,EAAEf,QAAQ,EAAEI,KAAK,EAAE,GAAGH,KAA8B,EAAA,GAAA;AACrE,IAAA,IAAI,CAACD,QAAU,EAAA;QACb,OAAO,IAAA;AACT;AACA,IAAA,qBACEE,cAACU,CAAAA,WAAAA,EAAAA;QACCP,QAAS,EAAA,UAAA;QACTW,GAAI,EAAA,SAAA;QACJC,IAAK,EAAA,QAAA;QACLC,YAAYd,EAAAA,KAAAA;QACZe,MAAQ,EAAA,KAAA;AACP,QAAA,GAAGlB,KAAK;AAERD,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;AAEA;;AAEkG,2GAE5FoB,OAAU,GAAA;IACdC,IAAMtB,EAAAA,QAAAA;IACNO,OAASH,EAAAA,WAAAA;IACTmB,IAAMZ,EAAAA,QAAAA;IACNG,KAAOE,EAAAA;AACT;;;;"}
+{"version":3,"file":"NavLink.js","sources":["../../../../../../admin/src/components/MainNav/NavLink.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Tooltip,\n  TooltipProps as DSTooltipProps,\n  Badge,\n  BadgeProps,\n  AccessibleIcon,\n} from '@strapi/design-system';\nimport { NavLink as RouterLink, LinkProps } from 'react-router-dom';\nimport { styled, css } from 'styled-components';\n\nconst isExternalLink = (to: LinkProps['to']) =>\n  typeof to === 'string' && (to.startsWith('http://') || to.startsWith('https://'));\n\n/* -------------------------------------------------------------------------------------------------\n * Link\n * -----------------------------------------------------------------------------------------------*/\nconst MainNavLinkStyles = css`\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral500};\n  position: relative;\n  width: 100%;\n  padding-block: 0.4rem;\n  padding-inline: 1.2rem;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    padding-block: 0.6rem;\n    padding-inline: 0.6rem;\n  }\n\n  &:hover {\n    svg path {\n      fill: ${({ theme }) => theme.colors.neutral600};\n    }\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  &.active {\n    svg path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n`;\n\nconst MainNavLinkWrapper = styled(RouterLink)`\n  ${MainNavLinkStyles}\n`;\n\nconst MainNavLinkAnchor = styled.a`\n  ${MainNavLinkStyles}\n`;\n\nconst MainNavButtonStyles = css`\n  padding-block: 1rem;\n  padding-inline: 1rem;\n`;\n\nconst MainNavButtonWrapper = styled(MainNavLinkWrapper)`\n  ${MainNavButtonStyles}\n`;\n\nconst MainNavButtonAnchor = styled(MainNavLinkAnchor)`\n  ${MainNavButtonStyles}\n`;\n\nconst LinkImpl = ({ children, to, ...props }: LinkProps) => {\n  if (isExternalLink(to)) {\n    return (\n      <MainNavLinkAnchor href={to as string} {...props}>\n        {children}\n      </MainNavLinkAnchor>\n    );\n  }\n  return (\n    <MainNavLinkWrapper to={to} {...props}>\n      {children}\n    </MainNavLinkWrapper>\n  );\n};\n\nconst NavButtonImpl = ({ children, to, ...props }: LinkProps) => {\n  if (isExternalLink(to)) {\n    return (\n      <MainNavButtonAnchor href={to as string} {...props}>\n        {children}\n      </MainNavButtonAnchor>\n    );\n  }\n\n  return (\n    <MainNavButtonWrapper to={to} {...props}>\n      {children}\n    </MainNavButtonWrapper>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tooltip\n * -----------------------------------------------------------------------------------------------*/\nconst TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => {\n  return (\n    <Tooltip side={position} label={label} delayDuration={0}>\n      <span>{children}</span>\n    </Tooltip>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Icon\n * -----------------------------------------------------------------------------------------------*/\nconst IconImpl = ({ label, children }: { label: string; children: React.ReactNode }) => {\n  if (!children) {\n    return null;\n  }\n  return <AccessibleIcon label={label}>{children}</AccessibleIcon>;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Badge\n * -----------------------------------------------------------------------------------------------*/\nconst CustomBadge = styled(Badge)`\n  /* override default badge styles to change the border radius of the Base element in the Design System */\n  border-radius: ${({ theme }) => theme.spaces[10]};\n  height: 2rem;\n`;\n\nconst BadgeImpl = ({ children, label, ...props }: NavLink.NavBadgeProps) => {\n  if (!children) {\n    return null;\n  }\n  return (\n    <CustomBadge\n      position=\"absolute\"\n      top=\"-0.8rem\"\n      left=\"1.7rem\"\n      aria-label={label}\n      active={false}\n      {...props}\n    >\n      {children}\n    </CustomBadge>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EXPORTS\n * -----------------------------------------------------------------------------------------------*/\n\nconst NavLink = {\n  Link: LinkImpl,\n  NavButton: NavButtonImpl,\n  Tooltip: TooltipImpl,\n  Icon: IconImpl,\n  Badge: BadgeImpl,\n};\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace NavLink {\n  export interface NavBadgeProps extends BadgeProps {\n    children: React.ReactNode;\n    label: string;\n  }\n\n  export interface TooltipProps {\n    children: React.ReactNode;\n    label?: string;\n    position?: DSTooltipProps['side'];\n  }\n}\n\nexport { NavLink };\n"],"names":["isExternalLink","to","startsWith","MainNavLinkStyles","css","theme","borderRadius","colors","neutral0","neutral500","breakpoints","medium","neutral600","neutral100","primary600","primary100","MainNavLinkWrapper","styled","RouterLink","MainNavLinkAnchor","a","MainNavButtonStyles","MainNavButtonWrapper","MainNavButtonAnchor","LinkImpl","children","props","_jsx","href","NavButtonImpl","TooltipImpl","label","position","Tooltip","side","delayDuration","span","IconImpl","AccessibleIcon","CustomBadge","Badge","spaces","BadgeImpl","top","left","aria-label","active","NavLink","Link","NavButton","Icon"],"mappings":"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"}

package/dist/admin/admin/src/components/MainNav/NavLink.mjs

@@ -2,11 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { Badge, Tooltip, AccessibleIcon } from '@strapi/design-system';
 import { NavLink as NavLink$1 } from 'react-router-dom';
-import { styled } from 'styled-components';
+import { css, styled } from 'styled-components';
 
+const isExternalLink = (to)=>typeof to === 'string' && (to.startsWith('http://') || to.startsWith('https://'));
 /* -------------------------------------------------------------------------------------------------
  * Link
- * -----------------------------------------------------------------------------------------------*/ const MainNavLinkWrapper = styled(NavLink$1)`
+ * -----------------------------------------------------------------------------------------------*/ const MainNavLinkStyles = css`
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -15,8 +16,13 @@ import { styled } from 'styled-components';
   color: ${({ theme })=>theme.colors.neutral500};
   position: relative;
   width: 100%;
-  padding-block: 0.6rem;
-  padding-inline: 0.6rem;
+  padding-block: 0.4rem;
+  padding-inline: 1.2rem;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    padding-block: 0.6rem;
+    padding-inline: 0.6rem;
+  }
 
   &:hover {
     svg path {
@@ -32,10 +38,50 @@ import { styled } from 'styled-components';
     background: ${({ theme })=>theme.colors.primary100};
   }
 `;
-const LinkImpl = ({ children, ...props })=>/*#__PURE__*/ jsx(MainNavLinkWrapper, {
+const MainNavLinkWrapper = styled(NavLink$1)`
+  ${MainNavLinkStyles}
+`;
+const MainNavLinkAnchor = styled.a`
+  ${MainNavLinkStyles}
+`;
+const MainNavButtonStyles = css`
+  padding-block: 1rem;
+  padding-inline: 1rem;
+`;
+const MainNavButtonWrapper = styled(MainNavLinkWrapper)`
+  ${MainNavButtonStyles}
+`;
+const MainNavButtonAnchor = styled(MainNavLinkAnchor)`
+  ${MainNavButtonStyles}
+`;
+const LinkImpl = ({ children, to, ...props })=>{
+    if (isExternalLink(to)) {
+        return /*#__PURE__*/ jsx(MainNavLinkAnchor, {
+            href: to,
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsx(MainNavLinkWrapper, {
+        to: to,
+        ...props,
+        children: children
+    });
+};
+const NavButtonImpl = ({ children, to, ...props })=>{
+    if (isExternalLink(to)) {
+        return /*#__PURE__*/ jsx(MainNavButtonAnchor, {
+            href: to,
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsx(MainNavButtonWrapper, {
+        to: to,
         ...props,
         children: children
     });
+};
 /* -------------------------------------------------------------------------------------------------
  * Tooltip
  * -----------------------------------------------------------------------------------------------*/ const TooltipImpl = ({ children, label, position = 'right' })=>{
@@ -84,6 +130,7 @@ const BadgeImpl = ({ children, label, ...props })=>{
  * EXPORTS
  * -----------------------------------------------------------------------------------------------*/ const NavLink = {
     Link: LinkImpl,
+    NavButton: NavButtonImpl,
     Tooltip: TooltipImpl,
     Icon: IconImpl,
     Badge: BadgeImpl