@strapi/admin 5.25.0 → 5.27.0

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

@@ -1,22 +1,39 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var styled = require('styled-components');
-var Auth = require('../features/Auth.js');
 var Tracking = require('../features/Tracking.js');
-var users = require('../utils/users.js');
-var Tours = require('./GuidedTour/Tours.js');
 var MainNav = require('./MainNav/MainNav.js');
+var MainNavLinks = require('./MainNav/MainNavLinks.js');
 var NavBrand = require('./MainNav/NavBrand.js');
-var NavLink = require('./MainNav/NavLink.js');
+var NavBurgerMenu = require('./MainNav/NavBurgerMenu.js');
 var NavUser = require('./MainNav/NavUser.js');
 var TrialCountdown = require('./MainNav/TrialCountdown.js');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
 const sortLinks = (links)=>{
     return links.sort((a, b)=>{
         // if no position is defined, we put the link in the position of the external plugins, before the plugins list
@@ -29,118 +46,156 @@ const sortLinks = (links)=>{
         }
     });
 };
-const NavLinkBadgeCounter = styled.styled(NavLink.NavLink.Badge)`
-  span {
-    color: ${({ theme })=>theme.colors.neutral0};
-  }
-`;
-const NavLinkBadgeLock = styled.styled(NavLink.NavLink.Badge)`
-  background-color: transparent;
-`;
 const NavListWrapper = styled.styled(designSystem.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__*/ jsxRuntime.jsx(Tours.tours.contentTypeBuilder.Finish, {
-                children: children
-            });
-        case '':
-            return /*#__PURE__*/ jsxRuntime.jsx(Tours.tours.apiTokens.Finish, {
-                children: children
-            });
-        case 'settings':
-            return /*#__PURE__*/ jsxRuntime.jsx(Tours.tours.contentManager.Finish, {
-                children: children
-            });
-        default:
-            return children;
-    }
-};
-const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks })=>{
-    const user = Auth.useAuth('AuthenticatedApp', (state)=>state.user);
+const MenuDetails = styled.styled(designSystem.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__namespace.useState(false);
     const { trackUsage } = Tracking.useTracking();
     const { pathname } = reactRouterDom.useLocation();
-    const userDisplayName = users.getDisplayName(user);
     const { formatMessage, locale } = reactIntl.useIntl();
     const formatter = designSystem.useCollator(locale, {
         sensitivity: 'base'
     });
-    const initials = users.getInitials(user);
     const handleClickOnLink = (destination)=>{
         trackUsage('willNavigate', {
             from: pathname,
             to: destination
         });
     };
+    // Close burger menu when route changes
+    React__namespace.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__*/ jsxRuntime.jsxs(MainNav.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__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(NavBrand.NavBrand, {}),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {}),
-            /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(icons.Lightning, {
-                        fill: "primary600"
-                    }) : undefined;
-                    const badgeContentNumeric = link.notificationsCount && link.notificationsCount > 0 ? link.notificationsCount.toString() : undefined;
-                    const labelValue = formatMessage(link.intlLabel);
-                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                        tag: "li",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(GuidedTourTooltip, {
-                            to: link.to,
-                            children: /*#__PURE__*/ jsxRuntime.jsx(NavLink.NavLink.Tooltip, {
-                                label: labelValue,
-                                children: /*#__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
-                                    ]
+            /*#__PURE__*/ jsxRuntime.jsxs(MainNav.MainNav, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(NavBrand.NavBrand, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {}),
+                    /*#__PURE__*/ jsxRuntime.jsxs(MenuDetails, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(MainNavLinks.MainNavIcons, {
+                                    listLinks: listLinks,
+                                    mobileLinks: topMobileNavigationLinks,
+                                    handleClickOnLink: handleClickOnLink
                                 })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(TrialCountdown.TrialCountdown, {}),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                display: {
+                                    initial: 'none',
+                                    large: 'flex'
+                                },
+                                borderStyle: "solid",
+                                borderWidth: {
+                                    initial: 0,
+                                    large: '1px 0 0 0'
+                                },
+                                borderColor: "neutral150",
+                                padding: 3,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(NavUser.NavUser, {})
                             })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        padding: 3,
+                        display: {
+                            initial: 'flex',
+                            large: 'none'
+                        },
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            height: "3.2rem",
+                            width: "3.2rem",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            onClick: ()=>setIsBurgerMenuShown(!isBurgerMenuShown),
+                            children: !isBurgerMenuShown ? /*#__PURE__*/ jsxRuntime.jsx(icons.List, {}) : /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
                         })
-                    }, link.to);
-                }) : null
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(TrialCountdown.TrialCountdown, {}),
-            /*#__PURE__*/ jsxRuntime.jsx(NavUser.NavUser, {
-                initials: initials,
-                children: userDisplayName
+            /*#__PURE__*/ jsxRuntime.jsx(NavBurgerMenu.NavBurgerMenu, {
+                isShown: isBurgerMenuShown,
+                listLinks: burgerMobileNavigationLinks,
+                handleClickOnLink: handleClickOnLink
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"file":"LeftMenu.js","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.js","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/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
             })
         ]
     });