@strapi/admin 5.26.0 → 5.28.0

package/dist/admin/admin/src/components/LeftMenu.mjs

@@ -1,17 +1,15 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import { Flex, useCollator, Divider } from '@strapi/design-system';
-import { Lightning } from '@strapi/icons';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Flex, useCollator, Divider, Box } from '@strapi/design-system';
+import { List, Cross } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
-import { useAuth } from '../features/Auth.mjs';
 import { useTracking } from '../features/Tracking.mjs';
-import { getInitials, getDisplayName } from '../utils/users.mjs';
-import { tours } from './GuidedTour/Tours.mjs';
 import { MainNav } from './MainNav/MainNav.mjs';
+import { MainNavIcons } from './MainNav/MainNavLinks.mjs';
 import { NavBrand } from './MainNav/NavBrand.mjs';
-import { NavLink } from './MainNav/NavLink.mjs';
+import { NavBurgerMenu } from './MainNav/NavBurgerMenu.mjs';
 import { NavUser } from './MainNav/NavUser.mjs';
 import { TrialCountdown } from './MainNav/TrialCountdown.mjs';
 
@@ -27,118 +25,156 @@ const sortLinks = (links)=>{
         }
     });
 };
-const NavLinkBadgeCounter = styled(NavLink.Badge)`
-  span {
-    color: ${({ theme })=>theme.colors.neutral0};
-  }
-`;
-const NavLinkBadgeLock = styled(NavLink.Badge)`
-  background-color: transparent;
-`;
 const NavListWrapper = styled(Flex)`
+  width: 100%;
   overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
-const GuidedTourTooltip = ({ to, children })=>{
-    const normalizedTo = to.toString().replace(/\//g, '');
-    switch(normalizedTo){
-        case 'content-manager':
-            return /*#__PURE__*/ jsx(tours.contentTypeBuilder.Finish, {
-                children: children
-            });
-        case '':
-            return /*#__PURE__*/ jsx(tours.apiTokens.Finish, {
-                children: children
-            });
-        case 'settings':
-            return /*#__PURE__*/ jsx(tours.contentManager.Finish, {
-                children: children
-            });
-        default:
-            return children;
-    }
-};
-const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks })=>{
-    const user = useAuth('AuthenticatedApp', (state)=>state.user);
+const MenuDetails = styled(Flex)`
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  overflow-x: auto;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+`;
+const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks, topMobileNavigation, burgerMobileNavigation })=>{
+    const [isBurgerMenuShown, setIsBurgerMenuShown] = React.useState(false);
     const { trackUsage } = useTracking();
     const { pathname } = useLocation();
-    const userDisplayName = getDisplayName(user);
     const { formatMessage, locale } = useIntl();
     const formatter = useCollator(locale, {
         sensitivity: 'base'
     });
-    const initials = getInitials(user);
     const handleClickOnLink = (destination)=>{
         trackUsage('willNavigate', {
             from: pathname,
             to: destination
         });
     };
+    // Close burger menu when route changes
+    React.useEffect(()=>{
+        setIsBurgerMenuShown(false);
+    }, [
+        pathname
+    ]);
     const listLinksAlphabeticallySorted = [
         ...pluginsSectionLinks,
         ...generalSectionLinks
     ].sort((a, b)=>formatter.compare(formatMessage(a.intlLabel), formatMessage(b.intlLabel)));
     const listLinks = sortLinks(listLinksAlphabeticallySorted);
-    return /*#__PURE__*/ jsxs(MainNav, {
+    /**
+   * Return filtered mobile navigation links (used for both top and burger menu)
+   */ const mapMobileNavigationLinks = (mobileNavLinks)=>mobileNavLinks.reduce((acc, mobileLink)=>{
+            const linkFound = listLinks.find((link)=>link.to === mobileLink.to);
+            if (linkFound) {
+                acc.push(mobileLink.link ? {
+                    ...linkFound,
+                    navigationLink: mobileLink.link
+                } : linkFound);
+            }
+            return acc;
+        }, []);
+    /**
+   * Mobile top navigation
+   */ const topMobileNavigationLinks = mapMobileNavigationLinks(topMobileNavigation);
+    /**
+   * Mobile burger menu
+   */ const excludedPluginsFromBurgerMenu = [
+        'content-manager',
+        'content-type-builder',
+        'upload',
+        'content-releases'
+    ];
+    const burgerMenuPluginsLinks = pluginsSectionLinks.filter((plugin)=>!excludedPluginsFromBurgerMenu.some((link)=>plugin.to.includes(link)));
+    const burgerMobileNavigationLinks = [
+        ...burgerMenuPluginsLinks,
+        ...mapMobileNavigationLinks(burgerMobileNavigation)
+    ];
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(NavBrand, {}),
-            /*#__PURE__*/ jsx(Divider, {}),
-            /*#__PURE__*/ jsx(NavListWrapper, {
-                tag: "ul",
-                gap: 3,
-                direction: "column",
-                flex: 1,
-                paddingTop: 3,
-                paddingBottom: 3,
-                children: listLinks.length > 0 ? listLinks.map((link)=>{
-                    const LinkIcon = link.icon;
-                    const badgeContentLock = link?.licenseOnly ? /*#__PURE__*/ jsx(Lightning, {
-                        fill: "primary600"
-                    }) : undefined;
-                    const badgeContentNumeric = link.notificationsCount && link.notificationsCount > 0 ? link.notificationsCount.toString() : undefined;
-                    const labelValue = formatMessage(link.intlLabel);
-                    return /*#__PURE__*/ jsx(Flex, {
-                        tag: "li",
-                        children: /*#__PURE__*/ jsx(GuidedTourTooltip, {
-                            to: link.to,
-                            children: /*#__PURE__*/ jsx(NavLink.Tooltip, {
-                                label: labelValue,
-                                children: /*#__PURE__*/ jsxs(NavLink.Link, {
-                                    to: link.to,
-                                    onClick: ()=>handleClickOnLink(link.to),
-                                    "aria-label": labelValue,
-                                    children: [
-                                        /*#__PURE__*/ jsx(NavLink.Icon, {
-                                            label: labelValue,
-                                            children: /*#__PURE__*/ jsx(LinkIcon, {
-                                                width: "20",
-                                                height: "20",
-                                                fill: "neutral500"
-                                            })
-                                        }),
-                                        badgeContentLock ? /*#__PURE__*/ jsx(NavLinkBadgeLock, {
-                                            label: "locked",
-                                            textColor: "neutral500",
-                                            paddingLeft: 0,
-                                            paddingRight: 0,
-                                            children: badgeContentLock
-                                        }) : badgeContentNumeric ? /*#__PURE__*/ jsx(NavLinkBadgeCounter, {
-                                            label: badgeContentNumeric,
-                                            backgroundColor: "primary600",
-                                            width: "2.3rem",
-                                            color: "neutral0",
-                                            children: badgeContentNumeric
-                                        }) : null
-                                    ]
+            /*#__PURE__*/ jsxs(MainNav, {
+                children: [
+                    /*#__PURE__*/ jsx(NavBrand, {}),
+                    /*#__PURE__*/ jsx(Divider, {}),
+                    /*#__PURE__*/ jsxs(MenuDetails, {
+                        children: [
+                            /*#__PURE__*/ jsx(NavListWrapper, {
+                                tag: "ul",
+                                gap: 3,
+                                direction: {
+                                    initial: 'row',
+                                    large: 'column'
+                                },
+                                alignItems: "center",
+                                justifyContent: {
+                                    initial: 'center',
+                                    large: 'flex-start'
+                                },
+                                flex: 1,
+                                paddingLeft: {
+                                    initial: 3,
+                                    large: 0
+                                },
+                                paddingRight: {
+                                    initial: 3,
+                                    large: 0
+                                },
+                                paddingTop: 3,
+                                paddingBottom: 3,
+                                children: /*#__PURE__*/ jsx(MainNavIcons, {
+                                    listLinks: listLinks,
+                                    mobileLinks: topMobileNavigationLinks,
+                                    handleClickOnLink: handleClickOnLink
                                 })
+                            }),
+                            /*#__PURE__*/ jsx(TrialCountdown, {}),
+                            /*#__PURE__*/ jsx(Box, {
+                                display: {
+                                    initial: 'none',
+                                    large: 'flex'
+                                },
+                                borderStyle: "solid",
+                                borderWidth: {
+                                    initial: 0,
+                                    large: '1px 0 0 0'
+                                },
+                                borderColor: "neutral150",
+                                padding: 3,
+                                children: /*#__PURE__*/ jsx(NavUser, {})
                             })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        padding: 3,
+                        display: {
+                            initial: 'flex',
+                            large: 'none'
+                        },
+                        children: /*#__PURE__*/ jsx(Flex, {
+                            height: "3.2rem",
+                            width: "3.2rem",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            onClick: ()=>setIsBurgerMenuShown(!isBurgerMenuShown),
+                            children: !isBurgerMenuShown ? /*#__PURE__*/ jsx(List, {}) : /*#__PURE__*/ jsx(Cross, {})
                         })
-                    }, link.to);
-                }) : null
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsx(TrialCountdown, {}),
-            /*#__PURE__*/ jsx(NavUser, {
-                initials: initials,
-                children: userDisplayName
+            /*#__PURE__*/ jsx(NavBurgerMenu, {
+                isShown: isBurgerMenuShown,
+                listLinks: burgerMobileNavigationLinks,
+                handleClickOnLink: handleClickOnLink
             })
         ]
     });

package/dist/admin/admin/src/components/LeftMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LeftMenu.mjs","sources":["../../../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Divider, Flex, FlexComponent, useCollator } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { type To, useLocation } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useAuth } from '../features/Auth';\nimport { useTracking } from '../features/Tracking';\nimport { Menu, MenuItem } from '../hooks/useMenu';\nimport { getDisplayName, getInitials } from '../utils/users';\n\nimport { tours } from './GuidedTour/Tours';\nimport { MainNav } from './MainNav/MainNav';\nimport { NavBrand } from './MainNav/NavBrand';\nimport { NavLink } from './MainNav/NavLink';\nimport { NavUser } from './MainNav/NavUser';\nimport { TrialCountdown } from './MainNav/TrialCountdown';\n\nconst sortLinks = (links: MenuItem[]) => {\n  return links.sort((a, b) => {\n    // if no position is defined, we put the link in the position of the external plugins, before the plugins list\n    const positionA = a.position ?? 6;\n    const positionB = b.position ?? 6;\n\n    if (positionA < positionB) {\n      return -1;\n    } else {\n      return 1;\n    }\n  });\n};\n\nconst NavLinkBadgeCounter = styled(NavLink.Badge)`\n  span {\n    color: ${({ theme }) => theme.colors.neutral0};\n  }\n`;\n\nconst NavLinkBadgeLock = styled(NavLink.Badge)`\n  background-color: transparent;\n`;\n\nconst NavListWrapper = styled<FlexComponent<'ul'>>(Flex)`\n  overflow-y: auto;\n`;\n\ninterface LeftMenuProps extends Pick<Menu, 'generalSectionLinks' | 'pluginsSectionLinks'> {}\n\nconst GuidedTourTooltip = ({ to, children }: { to: To; children: React.ReactNode }) => {\n  const normalizedTo = to.toString().replace(/\\//g, '');\n\n  switch (normalizedTo) {\n    case 'content-manager':\n      return <tours.contentTypeBuilder.Finish>{children}</tours.contentTypeBuilder.Finish>;\n    case '':\n      return <tours.apiTokens.Finish>{children}</tours.apiTokens.Finish>;\n    case 'settings':\n      return <tours.contentManager.Finish>{children}</tours.contentManager.Finish>;\n    default:\n      return children;\n  }\n};\n\nconst LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) => {\n  const user = useAuth('AuthenticatedApp', (state) => state.user);\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const userDisplayName = getDisplayName(user);\n  const { formatMessage, locale } = useIntl();\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const initials = getInitials(user);\n\n  const handleClickOnLink = (destination: string) => {\n    trackUsage('willNavigate', { from: pathname, to: destination });\n  };\n\n  const listLinksAlphabeticallySorted = [...pluginsSectionLinks, ...generalSectionLinks].sort(\n    (a, b) => formatter.compare(formatMessage(a.intlLabel), formatMessage(b.intlLabel))\n  );\n  const listLinks = sortLinks(listLinksAlphabeticallySorted);\n\n  return (\n    <MainNav>\n      <NavBrand />\n\n      <Divider />\n\n      <NavListWrapper tag=\"ul\" gap={3} direction=\"column\" flex={1} paddingTop={3} paddingBottom={3}>\n        {listLinks.length > 0\n          ? listLinks.map((link) => {\n              const LinkIcon = link.icon;\n              const badgeContentLock = link?.licenseOnly ? (\n                <Lightning fill=\"primary600\" />\n              ) : undefined;\n\n              const badgeContentNumeric =\n                link.notificationsCount && link.notificationsCount > 0\n                  ? link.notificationsCount.toString()\n                  : undefined;\n\n              const labelValue = formatMessage(link.intlLabel);\n              return (\n                <Flex tag=\"li\" key={link.to}>\n                  <GuidedTourTooltip to={link.to}>\n                    <NavLink.Tooltip label={labelValue}>\n                      <NavLink.Link\n                        to={link.to}\n                        onClick={() => handleClickOnLink(link.to)}\n                        aria-label={labelValue}\n                      >\n                        <NavLink.Icon label={labelValue}>\n                          <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n                        </NavLink.Icon>\n                        {badgeContentLock ? (\n                          <NavLinkBadgeLock\n                            label=\"locked\"\n                            textColor=\"neutral500\"\n                            paddingLeft={0}\n                            paddingRight={0}\n                          >\n                            {badgeContentLock}\n                          </NavLinkBadgeLock>\n                        ) : badgeContentNumeric ? (\n                          <NavLinkBadgeCounter\n                            label={badgeContentNumeric}\n                            backgroundColor=\"primary600\"\n                            width=\"2.3rem\"\n                            color=\"neutral0\"\n                          >\n                            {badgeContentNumeric}\n                          </NavLinkBadgeCounter>\n                        ) : null}\n                      </NavLink.Link>\n                    </NavLink.Tooltip>\n                  </GuidedTourTooltip>\n                </Flex>\n              );\n            })\n          : null}\n      </NavListWrapper>\n      <TrialCountdown />\n      <NavUser initials={initials}>{userDisplayName}</NavUser>\n    </MainNav>\n  );\n};\n\nexport { LeftMenu };\n"],"names":["sortLinks","links","sort","a","b","positionA","position","positionB","NavLinkBadgeCounter","styled","NavLink","Badge","theme","colors","neutral0","NavLinkBadgeLock","NavListWrapper","Flex","GuidedTourTooltip","to","children","normalizedTo","toString","replace","_jsx","tours","contentTypeBuilder","Finish","apiTokens","contentManager","LeftMenu","generalSectionLinks","pluginsSectionLinks","user","useAuth","state","trackUsage","useTracking","pathname","useLocation","userDisplayName","getDisplayName","formatMessage","locale","useIntl","formatter","useCollator","sensitivity","initials","getInitials","handleClickOnLink","destination","from","listLinksAlphabeticallySorted","compare","intlLabel","listLinks","_jsxs","MainNav","NavBrand","Divider","tag","gap","direction","flex","paddingTop","paddingBottom","length","map","link","LinkIcon","icon","badgeContentLock","licenseOnly","Lightning","fill","undefined","badgeContentNumeric","notificationsCount","labelValue","Tooltip","label","Link","onClick","aria-label","Icon","width","height","textColor","paddingLeft","paddingRight","backgroundColor","color","TrialCountdown","NavUser"],"mappings":"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"}
+{"version":3,"file":"LeftMenu.mjs","sources":["../../../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Divider, Flex, FlexComponent, useCollator } from '@strapi/design-system';\nimport { Cross, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useLocation } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../features/Tracking';\nimport { Menu, MenuItem, MobileMenuItem } from '../hooks/useMenu';\n\nimport { MainNav } from './MainNav/MainNav';\nimport { MainNavIcons } from './MainNav/MainNavLinks';\nimport { NavBrand } from './MainNav/NavBrand';\nimport { NavBurgerMenu } from './MainNav/NavBurgerMenu';\nimport { NavUser } from './MainNav/NavUser';\nimport { TrialCountdown } from './MainNav/TrialCountdown';\n\nconst sortLinks = (links: MenuItem[]) => {\n  return links.sort((a, b) => {\n    // if no position is defined, we put the link in the position of the external plugins, before the plugins list\n    const positionA = a.position ?? 6;\n    const positionB = b.position ?? 6;\n\n    if (positionA < positionB) {\n      return -1;\n    } else {\n      return 1;\n    }\n  });\n};\n\nconst NavListWrapper = styled<FlexComponent<'ul'>>(Flex)`\n  width: 100%;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\ninterface LeftMenuProps\n  extends Pick<\n    Menu,\n    'generalSectionLinks' | 'pluginsSectionLinks' | 'topMobileNavigation' | 'burgerMobileNavigation'\n  > {}\n\nconst MenuDetails = styled(Flex)`\n  flex: 1;\n  flex-direction: row;\n  justify-content: space-between;\n  overflow-x: auto;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n`;\n\nconst LeftMenu = ({\n  generalSectionLinks,\n  pluginsSectionLinks,\n  topMobileNavigation,\n  burgerMobileNavigation,\n}: LeftMenuProps) => {\n  const [isBurgerMenuShown, setIsBurgerMenuShown] = React.useState(false);\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const { formatMessage, locale } = useIntl();\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const handleClickOnLink = (destination: string) => {\n    trackUsage('willNavigate', { from: pathname, to: destination });\n  };\n\n  // Close burger menu when route changes\n  React.useEffect(() => {\n    setIsBurgerMenuShown(false);\n  }, [pathname]);\n\n  const listLinksAlphabeticallySorted = [...pluginsSectionLinks, ...generalSectionLinks].sort(\n    (a, b) => formatter.compare(formatMessage(a.intlLabel), formatMessage(b.intlLabel))\n  );\n  const listLinks = sortLinks(listLinksAlphabeticallySorted);\n\n  /**\n   * Return filtered mobile navigation links (used for both top and burger menu)\n   */\n  const mapMobileNavigationLinks = (mobileNavLinks: MobileMenuItem[]): MenuItem[] =>\n    mobileNavLinks.reduce<MenuItem[]>((acc, mobileLink) => {\n      const linkFound = listLinks.find((link) => link.to === mobileLink.to);\n      if (linkFound) {\n        acc.push(mobileLink.link ? { ...linkFound, navigationLink: mobileLink.link } : linkFound);\n      }\n      return acc;\n    }, []);\n\n  /**\n   * Mobile top navigation\n   */\n  const topMobileNavigationLinks = mapMobileNavigationLinks(topMobileNavigation);\n\n  /**\n   * Mobile burger menu\n   */\n  const excludedPluginsFromBurgerMenu = [\n    'content-manager',\n    'content-type-builder',\n    'upload',\n    'content-releases',\n  ];\n  const burgerMenuPluginsLinks = pluginsSectionLinks.filter(\n    (plugin) => !excludedPluginsFromBurgerMenu.some((link) => plugin.to.includes(link))\n  );\n  const burgerMobileNavigationLinks = [\n    ...burgerMenuPluginsLinks,\n    ...mapMobileNavigationLinks(burgerMobileNavigation),\n  ];\n\n  return (\n    <>\n      <MainNav>\n        <NavBrand />\n\n        <Divider />\n\n        <MenuDetails>\n          <NavListWrapper\n            tag=\"ul\"\n            gap={3}\n            direction={{\n              initial: 'row',\n              large: 'column',\n            }}\n            alignItems=\"center\"\n            justifyContent={{\n              initial: 'center',\n              large: 'flex-start',\n            }}\n            flex={1}\n            paddingLeft={{\n              initial: 3,\n              large: 0,\n            }}\n            paddingRight={{\n              initial: 3,\n              large: 0,\n            }}\n            paddingTop={3}\n            paddingBottom={3}\n          >\n            <MainNavIcons\n              listLinks={listLinks}\n              mobileLinks={topMobileNavigationLinks}\n              handleClickOnLink={handleClickOnLink}\n            />\n          </NavListWrapper>\n          <TrialCountdown />\n          <Box\n            display={{\n              initial: 'none',\n              large: 'flex',\n            }}\n            borderStyle=\"solid\"\n            borderWidth={{\n              initial: 0,\n              large: '1px 0 0 0',\n            }}\n            borderColor=\"neutral150\"\n            padding={3}\n          >\n            <NavUser />\n          </Box>\n        </MenuDetails>\n\n        <Box\n          padding={3}\n          display={{\n            initial: 'flex',\n            large: 'none',\n          }}\n        >\n          <Flex\n            height=\"3.2rem\"\n            width=\"3.2rem\"\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            onClick={() => setIsBurgerMenuShown(!isBurgerMenuShown)}\n          >\n            {!isBurgerMenuShown ? <List /> : <Cross />}\n          </Flex>\n        </Box>\n      </MainNav>\n      <NavBurgerMenu\n        isShown={isBurgerMenuShown}\n        listLinks={burgerMobileNavigationLinks}\n        handleClickOnLink={handleClickOnLink}\n      />\n    </>\n  );\n};\n\nexport { LeftMenu };\n"],"names":["sortLinks","links","sort","a","b","positionA","position","positionB","NavListWrapper","styled","Flex","MenuDetails","theme","breakpoints","large","LeftMenu","generalSectionLinks","pluginsSectionLinks","topMobileNavigation","burgerMobileNavigation","isBurgerMenuShown","setIsBurgerMenuShown","React","useState","trackUsage","useTracking","pathname","useLocation","formatMessage","locale","useIntl","formatter","useCollator","sensitivity","handleClickOnLink","destination","from","to","useEffect","listLinksAlphabeticallySorted","compare","intlLabel","listLinks","mapMobileNavigationLinks","mobileNavLinks","reduce","acc","mobileLink","linkFound","find","link","push","navigationLink","topMobileNavigationLinks","excludedPluginsFromBurgerMenu","burgerMenuPluginsLinks","filter","plugin","some","includes","burgerMobileNavigationLinks","_jsxs","_Fragment","MainNav","_jsx","NavBrand","Divider","tag","gap","direction","initial","alignItems","justifyContent","flex","paddingLeft","paddingRight","paddingTop","paddingBottom","MainNavIcons","mobileLinks","TrialCountdown","Box","display","borderStyle","borderWidth","borderColor","padding","NavUser","height","width","onClick","List","Cross","NavBurgerMenu","isShown"],"mappings":"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"}

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

@@ -5,18 +5,32 @@ var designSystem = require('@strapi/design-system');
 var styled = require('styled-components');
 
 const MainNavWrapper = styled.styled(designSystem.Flex)`
-  border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
+  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+  position: sticky;
+  max-height: 100%;
+  height: auto;
+  z-index: 4;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    border-bottom: none;
+    border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
+    height: 100dvh;
+  }
 `;
 const MainNav = (props)=>/*#__PURE__*/ jsxRuntime.jsx(MainNavWrapper, {
         alignItems: "normal",
         tag: "nav",
         background: "neutral0",
-        direction: "column",
-        height: "100vh",
-        position: "sticky",
+        direction: {
+            initial: 'row',
+            large: 'column'
+        },
         top: 0,
-        zIndex: 2,
-        width: 10,
+        zIndex: 3,
+        width: {
+            initial: '100dvw',
+            large: 10
+        },
         ...props
     });
 

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

@@ -1 +1 @@
-{"version":3,"file":"MainNav.js","sources":["../../../../../../admin/src/components/MainNav/MainNav.tsx"],"sourcesContent":["import { Flex, FlexComponent, FlexProps } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst MainNavWrapper = styled<FlexComponent<'nav'>>(Flex)`\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst MainNav = (props: FlexProps<'nav'>) => (\n  <MainNavWrapper\n    alignItems=\"normal\"\n    tag=\"nav\"\n    background=\"neutral0\"\n    direction=\"column\"\n    height=\"100vh\"\n    position=\"sticky\"\n    top={0}\n    zIndex={2}\n    width={10}\n    {...props}\n  />\n);\n\nexport { MainNav };\n"],"names":["MainNavWrapper","styled","Flex","theme","colors","neutral150","MainNav","props","_jsx","alignItems","tag","background","direction","height","position","top","zIndex","width"],"mappings":";;;;;;AAGA,MAAMA,cAAAA,GAAiBC,aAA6BC,CAAAA,iBAAAA,CAAK;0BAC/B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;AACnE,CAAC;AAEKC,MAAAA,OAAAA,GAAU,CAACC,KAAAA,iBACfC,cAACR,CAAAA,cAAAA,EAAAA;QACCS,UAAW,EAAA,QAAA;QACXC,GAAI,EAAA,KAAA;QACJC,UAAW,EAAA,UAAA;QACXC,SAAU,EAAA,QAAA;QACVC,MAAO,EAAA,OAAA;QACPC,QAAS,EAAA,QAAA;QACTC,GAAK,EAAA,CAAA;QACLC,MAAQ,EAAA,CAAA;QACRC,KAAO,EAAA,EAAA;AACN,QAAA,GAAGV;;;;;"}
+{"version":3,"file":"MainNav.js","sources":["../../../../../../admin/src/components/MainNav/MainNav.tsx"],"sourcesContent":["import { Flex, FlexProps } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst MainNavWrapper = styled(Flex)`\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n  position: sticky;\n  max-height: 100%;\n  height: auto;\n  z-index: 4;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    border-bottom: none;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n    height: 100dvh;\n  }\n`;\n\nconst MainNav = (props: FlexProps<'nav'>) => (\n  <MainNavWrapper\n    alignItems=\"normal\"\n    tag=\"nav\"\n    background=\"neutral0\"\n    direction={{\n      initial: 'row',\n      large: 'column',\n    }}\n    top={0}\n    zIndex={3}\n    width={{\n      initial: '100dvw',\n      large: 10,\n    }}\n    {...props}\n  />\n);\n\nexport { MainNav };\n"],"names":["MainNavWrapper","styled","Flex","theme","colors","neutral150","breakpoints","large","MainNav","props","_jsx","alignItems","tag","background","direction","initial","top","zIndex","width"],"mappings":";;;;;;AAGA,MAAMA,cAAAA,GAAiBC,aAAOC,CAAAA,iBAAAA,CAAK;2BACR,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;EAMlE,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMG,CAAAA,WAAW,CAACC,KAAK,CAAC;;4BAEf,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAGrE,CAAC;AAEKG,MAAAA,OAAAA,GAAU,CAACC,KAAAA,iBACfC,cAACV,CAAAA,cAAAA,EAAAA;QACCW,UAAW,EAAA,QAAA;QACXC,GAAI,EAAA,KAAA;QACJC,UAAW,EAAA,UAAA;QACXC,SAAW,EAAA;YACTC,OAAS,EAAA,KAAA;YACTR,KAAO,EAAA;AACT,SAAA;QACAS,GAAK,EAAA,CAAA;QACLC,MAAQ,EAAA,CAAA;QACRC,KAAO,EAAA;YACLH,OAAS,EAAA,QAAA;YACTR,KAAO,EAAA;AACT,SAAA;AACC,QAAA,GAAGE;;;;;"}

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

@@ -3,18 +3,32 @@ import { Flex } from '@strapi/design-system';
 import { styled } from 'styled-components';
 
 const MainNavWrapper = styled(Flex)`
-  border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
+  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+  position: sticky;
+  max-height: 100%;
+  height: auto;
+  z-index: 4;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    border-bottom: none;
+    border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
+    height: 100dvh;
+  }
 `;
 const MainNav = (props)=>/*#__PURE__*/ jsx(MainNavWrapper, {
         alignItems: "normal",
         tag: "nav",
         background: "neutral0",
-        direction: "column",
-        height: "100vh",
-        position: "sticky",
+        direction: {
+            initial: 'row',
+            large: 'column'
+        },
         top: 0,
-        zIndex: 2,
-        width: 10,
+        zIndex: 3,
+        width: {
+            initial: '100dvw',
+            large: 10
+        },
         ...props
     });
 

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

@@ -1 +1 @@
-{"version":3,"file":"MainNav.mjs","sources":["../../../../../../admin/src/components/MainNav/MainNav.tsx"],"sourcesContent":["import { Flex, FlexComponent, FlexProps } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst MainNavWrapper = styled<FlexComponent<'nav'>>(Flex)`\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst MainNav = (props: FlexProps<'nav'>) => (\n  <MainNavWrapper\n    alignItems=\"normal\"\n    tag=\"nav\"\n    background=\"neutral0\"\n    direction=\"column\"\n    height=\"100vh\"\n    position=\"sticky\"\n    top={0}\n    zIndex={2}\n    width={10}\n    {...props}\n  />\n);\n\nexport { MainNav };\n"],"names":["MainNavWrapper","styled","Flex","theme","colors","neutral150","MainNav","props","_jsx","alignItems","tag","background","direction","height","position","top","zIndex","width"],"mappings":";;;;AAGA,MAAMA,cAAAA,GAAiBC,MAA6BC,CAAAA,IAAAA,CAAK;0BAC/B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;AACnE,CAAC;AAEKC,MAAAA,OAAAA,GAAU,CAACC,KAAAA,iBACfC,GAACR,CAAAA,cAAAA,EAAAA;QACCS,UAAW,EAAA,QAAA;QACXC,GAAI,EAAA,KAAA;QACJC,UAAW,EAAA,UAAA;QACXC,SAAU,EAAA,QAAA;QACVC,MAAO,EAAA,OAAA;QACPC,QAAS,EAAA,QAAA;QACTC,GAAK,EAAA,CAAA;QACLC,MAAQ,EAAA,CAAA;QACRC,KAAO,EAAA,EAAA;AACN,QAAA,GAAGV;;;;;"}
+{"version":3,"file":"MainNav.mjs","sources":["../../../../../../admin/src/components/MainNav/MainNav.tsx"],"sourcesContent":["import { Flex, FlexProps } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst MainNavWrapper = styled(Flex)`\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n  position: sticky;\n  max-height: 100%;\n  height: auto;\n  z-index: 4;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    border-bottom: none;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n    height: 100dvh;\n  }\n`;\n\nconst MainNav = (props: FlexProps<'nav'>) => (\n  <MainNavWrapper\n    alignItems=\"normal\"\n    tag=\"nav\"\n    background=\"neutral0\"\n    direction={{\n      initial: 'row',\n      large: 'column',\n    }}\n    top={0}\n    zIndex={3}\n    width={{\n      initial: '100dvw',\n      large: 10,\n    }}\n    {...props}\n  />\n);\n\nexport { MainNav };\n"],"names":["MainNavWrapper","styled","Flex","theme","colors","neutral150","breakpoints","large","MainNav","props","_jsx","alignItems","tag","background","direction","initial","top","zIndex","width"],"mappings":";;;;AAGA,MAAMA,cAAAA,GAAiBC,MAAOC,CAAAA,IAAAA,CAAK;2BACR,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;EAMlE,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMG,CAAAA,WAAW,CAACC,KAAK,CAAC;;4BAEf,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAGrE,CAAC;AAEKG,MAAAA,OAAAA,GAAU,CAACC,KAAAA,iBACfC,GAACV,CAAAA,cAAAA,EAAAA;QACCW,UAAW,EAAA,QAAA;QACXC,GAAI,EAAA,KAAA;QACJC,UAAW,EAAA,UAAA;QACXC,SAAW,EAAA;YACTC,OAAS,EAAA,KAAA;YACTR,KAAO,EAAA;AACT,SAAA;QACAS,GAAK,EAAA,CAAA;QACLC,MAAQ,EAAA,CAAA;QACRC,KAAO,EAAA;YACLH,OAAS,EAAA,QAAA;YACTR,KAAO,EAAA;AACT,SAAA;AACC,QAAA,GAAGE;;;;;"}

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

@@ -0,0 +1,157 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styled = require('styled-components');
+var useMediaQuery = require('../../hooks/useMediaQuery.js');
+var Tours = require('../GuidedTour/Tours.js');
+var NavLink = require('./NavLink.js');
+
+const NavLinkBadgeLock = styled.styled(NavLink.NavLink.Badge)`
+  background-color: transparent;
+`;
+const NavLinkBadgeCounter = styled.styled(NavLink.NavLink.Badge)`
+  span {
+    color: ${({ theme })=>theme.colors.neutral0};
+  }
+`;
+/**
+ * Will attach a guided tour tooltip to the right links. (mostly used for the finish step to indicate the next tour)
+ * @param to: The target link
+ * @param children: The original link to be wrapped in a guided tour tooltip
+ * @returns The link wrapped in a guided tour tooltip or the original link if no guided tour needs to be attached
+ */ const GuidedTourTooltip = ({ to, children })=>{
+    const normalizedTo = to.toString().replace(/\//g, '');
+    switch(normalizedTo){
+        // We attach the final step of the content type builder tour on content manager link because it's the next tour (Content Type Builder -> Content Manager).
+        case 'content-manager':
+            return /*#__PURE__*/ jsxRuntime.jsx(Tours.tours.contentTypeBuilder.Finish, {
+                children: children
+            });
+        // We attach the final step of the api tokens tour on the home link because it was the last tour (API Tokens -> Go back to homepage).
+        case '':
+            return /*#__PURE__*/ jsxRuntime.jsx(Tours.tours.apiTokens.Finish, {
+                children: children
+            });
+        // We attach the final step of the content manager tour on the settings link because it's the next tour (Content Manager -> API tokens).
+        case 'settings':
+            return /*#__PURE__*/ jsxRuntime.jsx(Tours.tours.contentManager.Finish, {
+                children: children
+            });
+        // If the link doesn't match any of the above, we return the original link.
+        default:
+            return children;
+    }
+};
+const MainNavIcons = ({ listLinks, mobileLinks, handleClickOnLink })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isDesktop = useMediaQuery.useIsDesktop();
+    return listLinks.length > 0 ? listLinks.map((link)=>{
+        const LinkIcon = link.icon;
+        const badgeContentLock = link?.licenseOnly ? /*#__PURE__*/ jsxRuntime.jsx(icons.Lightning, {
+            fill: "primary600"
+        }) : undefined;
+        const badgeContentNumeric = link.notificationsCount && link.notificationsCount > 0 ? link.notificationsCount.toString() : undefined;
+        const labelValue = formatMessage(link.intlLabel);
+        const linkMobile = mobileLinks.find((mobileLink)=>mobileLink.to === link.to);
+        const LinkElement = ()=>/*#__PURE__*/ jsxRuntime.jsxs(NavLink.NavLink.Link, {
+                to: link.to,
+                onClick: ()=>handleClickOnLink(link.to),
+                "aria-label": labelValue,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(NavLink.NavLink.Icon, {
+                        label: labelValue,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(LinkIcon, {
+                            width: "20",
+                            height: "20",
+                            fill: "neutral500"
+                        })
+                    }),
+                    badgeContentLock ? /*#__PURE__*/ jsxRuntime.jsx(NavLinkBadgeLock, {
+                        label: "locked",
+                        textColor: "neutral500",
+                        paddingLeft: 0,
+                        paddingRight: 0,
+                        children: badgeContentLock
+                    }) : badgeContentNumeric ? /*#__PURE__*/ jsxRuntime.jsx(NavLinkBadgeCounter, {
+                        label: badgeContentNumeric,
+                        backgroundColor: "primary600",
+                        width: "2.3rem",
+                        color: "neutral0",
+                        children: badgeContentNumeric
+                    }) : null
+                ]
+            });
+        return isDesktop || !isDesktop && linkMobile ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            tag: "li",
+            children: /*#__PURE__*/ jsxRuntime.jsx(GuidedTourTooltip, {
+                to: link.to,
+                children: isDesktop ? /*#__PURE__*/ jsxRuntime.jsx(NavLink.NavLink.Tooltip, {
+                    label: labelValue,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(LinkElement, {})
+                }) : /*#__PURE__*/ jsxRuntime.jsx(LinkElement, {})
+            })
+        }, link.to) : null;
+    }) : null;
+};
+const IconContainer = styled.styled(designSystem.Box)`
+  svg {
+    display: block;
+  }
+`;
+const MainNavBurgerMenuLinks = ({ listLinks, handleClickOnLink })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return listLinks.length > 0 ? listLinks.map((link)=>{
+        const LinkIcon = link.icon;
+        const badgeContentLock = link?.licenseOnly ? /*#__PURE__*/ jsxRuntime.jsx(icons.Lightning, {
+            fill: "primary600"
+        }) : undefined;
+        const badgeContentNumeric = link.notificationsCount && link.notificationsCount > 0 ? link.notificationsCount.toString() : undefined;
+        const labelValue = formatMessage(link.intlLabel);
+        const navigationTarget = link.navigationLink || link.to;
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            paddingTop: 3,
+            alignItems: "center",
+            tag: "li",
+            children: /*#__PURE__*/ jsxRuntime.jsxs(NavLink.NavLink.Link, {
+                to: navigationTarget,
+                onClick: ()=>handleClickOnLink(navigationTarget),
+                "aria-label": labelValue,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(IconContainer, {
+                        marginRight: "0.6rem",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(LinkIcon, {
+                            width: "20",
+                            height: "20",
+                            fill: "neutral500"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        marginLeft: 3,
+                        children: labelValue
+                    }),
+                    badgeContentLock ? /*#__PURE__*/ jsxRuntime.jsx(NavLinkBadgeLock, {
+                        label: "locked",
+                        textColor: "neutral500",
+                        paddingLeft: 0,
+                        paddingRight: 0,
+                        children: badgeContentLock
+                    }) : badgeContentNumeric ? /*#__PURE__*/ jsxRuntime.jsx(NavLinkBadgeCounter, {
+                        label: badgeContentNumeric,
+                        backgroundColor: "primary600",
+                        width: "2.3rem",
+                        color: "neutral0",
+                        children: badgeContentNumeric
+                    }) : null
+                ]
+            })
+        }, navigationTarget);
+    }) : null;
+};
+
+exports.MainNavBurgerMenuLinks = MainNavBurgerMenuLinks;
+exports.MainNavIcons = MainNavIcons;
+//# sourceMappingURL=MainNavLinks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MainNavLinks.js","sources":["../../../../../../admin/src/components/MainNav/MainNavLinks.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Lightning } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { type To } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useIsDesktop } from '../../hooks/useMediaQuery';\nimport { MenuItem } from '../../hooks/useMenu';\nimport { tours } from '../GuidedTour/Tours';\n\nimport { NavLink } from './NavLink';\n\nconst NavLinkBadgeLock = styled(NavLink.Badge)`\n  background-color: transparent;\n`;\n\nconst NavLinkBadgeCounter = styled(NavLink.Badge)`\n  span {\n    color: ${({ theme }) => theme.colors.neutral0};\n  }\n`;\n\n/**\n * Will attach a guided tour tooltip to the right links. (mostly used for the finish step to indicate the next tour)\n * @param to: The target link\n * @param children: The original link to be wrapped in a guided tour tooltip\n * @returns The link wrapped in a guided tour tooltip or the original link if no guided tour needs to be attached\n */\nconst GuidedTourTooltip = ({ to, children }: { to: To; children: React.ReactNode }) => {\n  const normalizedTo = to.toString().replace(/\\//g, '');\n\n  switch (normalizedTo) {\n    // We attach the final step of the content type builder tour on content manager link because it's the next tour (Content Type Builder -> Content Manager).\n    case 'content-manager':\n      return <tours.contentTypeBuilder.Finish>{children}</tours.contentTypeBuilder.Finish>;\n    // We attach the final step of the api tokens tour on the home link because it was the last tour (API Tokens -> Go back to homepage).\n    case '':\n      return <tours.apiTokens.Finish>{children}</tours.apiTokens.Finish>;\n    // We attach the final step of the content manager tour on the settings link because it's the next tour (Content Manager -> API tokens).\n    case 'settings':\n      return <tours.contentManager.Finish>{children}</tours.contentManager.Finish>;\n    // If the link doesn't match any of the above, we return the original link.\n    default:\n      return children;\n  }\n};\n\nconst MainNavIcons = ({\n  listLinks,\n  mobileLinks,\n  handleClickOnLink,\n}: {\n  listLinks: MenuItem[];\n  mobileLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n}) => {\n  const { formatMessage } = useIntl();\n  const isDesktop = useIsDesktop();\n\n  return listLinks.length > 0\n    ? listLinks.map((link) => {\n        const LinkIcon = link.icon;\n        const badgeContentLock = link?.licenseOnly ? <Lightning fill=\"primary600\" /> : undefined;\n\n        const badgeContentNumeric =\n          link.notificationsCount && link.notificationsCount > 0\n            ? link.notificationsCount.toString()\n            : undefined;\n\n        const labelValue = formatMessage(link.intlLabel);\n        const linkMobile = mobileLinks.find((mobileLink) => mobileLink.to === link.to);\n\n        const LinkElement = () => (\n          <NavLink.Link\n            to={link.to}\n            onClick={() => handleClickOnLink(link.to)}\n            aria-label={labelValue}\n          >\n            <NavLink.Icon label={labelValue}>\n              <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n            </NavLink.Icon>\n            {badgeContentLock ? (\n              <NavLinkBadgeLock\n                label=\"locked\"\n                textColor=\"neutral500\"\n                paddingLeft={0}\n                paddingRight={0}\n              >\n                {badgeContentLock}\n              </NavLinkBadgeLock>\n            ) : badgeContentNumeric ? (\n              <NavLinkBadgeCounter\n                label={badgeContentNumeric}\n                backgroundColor=\"primary600\"\n                width=\"2.3rem\"\n                color=\"neutral0\"\n              >\n                {badgeContentNumeric}\n              </NavLinkBadgeCounter>\n            ) : null}\n          </NavLink.Link>\n        );\n\n        return isDesktop || (!isDesktop && linkMobile) ? (\n          <Flex tag=\"li\" key={link.to}>\n            <GuidedTourTooltip to={link.to}>\n              {isDesktop ? (\n                <NavLink.Tooltip label={labelValue}>\n                  <LinkElement />\n                </NavLink.Tooltip>\n              ) : (\n                <LinkElement />\n              )}\n            </GuidedTourTooltip>\n          </Flex>\n        ) : null;\n      })\n    : null;\n};\n\nconst IconContainer = styled(Box)`\n  svg {\n    display: block;\n  }\n`;\n\nconst MainNavBurgerMenuLinks = ({\n  listLinks,\n  handleClickOnLink,\n}: {\n  listLinks: MenuItem[];\n  handleClickOnLink: (value: string) => void;\n}) => {\n  const { formatMessage } = useIntl();\n\n  return listLinks.length > 0\n    ? listLinks.map((link) => {\n        const LinkIcon = link.icon;\n        const badgeContentLock = link?.licenseOnly ? <Lightning fill=\"primary600\" /> : undefined;\n\n        const badgeContentNumeric =\n          link.notificationsCount && link.notificationsCount > 0\n            ? link.notificationsCount.toString()\n            : undefined;\n\n        const labelValue = formatMessage(link.intlLabel);\n        const navigationTarget = link.navigationLink || link.to;\n\n        return (\n          <Flex paddingTop={3} alignItems=\"center\" tag=\"li\" key={navigationTarget}>\n            <NavLink.Link\n              to={navigationTarget}\n              onClick={() => handleClickOnLink(navigationTarget)}\n              aria-label={labelValue}\n            >\n              <IconContainer marginRight=\"0.6rem\">\n                <LinkIcon width=\"20\" height=\"20\" fill=\"neutral500\" />\n              </IconContainer>\n              <Typography marginLeft={3}>{labelValue}</Typography>\n              {badgeContentLock ? (\n                <NavLinkBadgeLock\n                  label=\"locked\"\n                  textColor=\"neutral500\"\n                  paddingLeft={0}\n                  paddingRight={0}\n                >\n                  {badgeContentLock}\n                </NavLinkBadgeLock>\n              ) : badgeContentNumeric ? (\n                <NavLinkBadgeCounter\n                  label={badgeContentNumeric}\n                  backgroundColor=\"primary600\"\n                  width=\"2.3rem\"\n                  color=\"neutral0\"\n                >\n                  {badgeContentNumeric}\n                </NavLinkBadgeCounter>\n              ) : null}\n            </NavLink.Link>\n          </Flex>\n        );\n      })\n    : null;\n};\n\nexport { MainNavIcons, MainNavBurgerMenuLinks };\n"],"names":["NavLinkBadgeLock","styled","NavLink","Badge","NavLinkBadgeCounter","theme","colors","neutral0","GuidedTourTooltip","to","children","normalizedTo","toString","replace","_jsx","tours","contentTypeBuilder","Finish","apiTokens","contentManager","MainNavIcons","listLinks","mobileLinks","handleClickOnLink","formatMessage","useIntl","isDesktop","useIsDesktop","length","map","link","LinkIcon","icon","badgeContentLock","licenseOnly","Lightning","fill","undefined","badgeContentNumeric","notificationsCount","labelValue","intlLabel","linkMobile","find","mobileLink","LinkElement","_jsxs","Link","onClick","aria-label","Icon","label","width","height","textColor","paddingLeft","paddingRight","backgroundColor","color","Flex","tag","Tooltip","IconContainer","Box","MainNavBurgerMenuLinks","navigationTarget","navigationLink","paddingTop","alignItems","marginRight","Typography","marginLeft"],"mappings":"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"}