@strapi/admin 5.0.0-beta.6 → 5.0.0-beta.8

package/dist/admin/{AuthenticatedLayout-eMLYKMgW.mjs → AuthenticatedLayout-qx1Lyy4q.mjs}

@@ -1,30 +1,30 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Flex, Portal, FocusTrap, IconButton, Box, Button, Typography, LinkButton, VisuallyHidden, Badge, Tooltip, MainNav, NavBrand as NavBrand$1, Divider, NavSections, NavLink as NavLink$2, NavSection, NavFooter, NavUser, NavCondense, PopoverPrimitives, SkipToContent } from '@strapi/design-system';
+import { Flex, Portal, FocusTrap, IconButton, Box, Button, Typography, LinkButton, VisuallyHidden, Badge, Tooltip, AccessibleIcon, Menu, Initials, useCollator, Divider, PopoverPrimitives, SkipToContent } from '@strapi/design-system';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
-import { NavLink as NavLink$1, useLocation, Outlet } from 'react-router-dom';
+import { NavLink as NavLink$1, useNavigate, useLocation, Outlet } from 'react-router-dom';
 import lt from 'semver/functions/lt';
 import valid from 'semver/functions/valid';
-import { Cross, ArrowRight, House, Feather, Lock, SignOut, Play, Message, Question, Book, PaperPlane, PuzzlePiece, ShoppingCart, Cog } from '@strapi/icons';
+import { Cross, ArrowRight, SignOut, Lock, Play, Message, Question, Book, PaperPlane, House, PuzzlePiece, ShoppingCart, Cog } from '@strapi/icons';
 import get from 'lodash/get';
-import styled from 'styled-components';
-import { d as useTracking, o as useConfiguration, a as useAuth, m as useAppInfo, n as useStrapiApp, P as Page, p as AppInfoProvider } from './rbac-uVd0RAE5.mjs';
-import { L as LAYOUT_DATA, V as VerticalDivider, S as STATES, N as Number } from './Ornaments-h_LCCr5P.mjs';
-import { j as useGuidedTour, w as usePersistentState, N as NpsSurvey } from './index-7fPlAzj6.mjs';
+import { styled } from 'styled-components';
+import { d as useTracking, o as useConfiguration, a as useAuth, m as useAppInfo, n as useStrapiApp, P as Page, p as AppInfoProvider } from './rbac-oJEkQdXG.mjs';
+import { L as LAYOUT_DATA, V as VerticalDivider, S as STATES, N as Number$1 } from './Ornaments-h_LCCr5P.mjs';
+import { l as useGuidedTour, N as NpsSurvey } from './index-69WUS0qJ.mjs';
 import { g as getDisplayName, h as hashAdminUserEmail } from './users-a4KTyEyc.mjs';
 import { produce } from 'immer';
 import set from 'lodash/set';
-import { P as PrivateRoute } from './PrivateRoute-zZ7p1pc9.mjs';
+import { P as PrivateRoute } from './PrivateRoute-1hyhztQM.mjs';
 import cloneDeep from 'lodash/cloneDeep';
 import { useSelector } from 'react-redux';
-import { s as selectAdminPermissions } from './selectors-AvywwQRm.mjs';
+import { s as selectAdminPermissions } from './selectors-Ilww6FA-.mjs';
 import { u as useOnce } from './useOnce-GJ2Ta2mZ.mjs';
-import { d as useInformationQuery } from './admin-5SXhE_nJ.mjs';
+import { d as useInformationQuery } from './admin-B6AW0Kov.mjs';
 
 const name = "@strapi/admin";
-const version = "5.0.0-beta.5";
+const version = "5.0.0-beta.7";
 const description = "Strapi Admin";
 const repository = {
 	type: "git",
@@ -102,16 +102,16 @@ const dependencies = {
 	"@radix-ui/react-context": "1.0.1",
 	"@radix-ui/react-toolbar": "1.0.4",
 	"@reduxjs/toolkit": "1.9.7",
-	"@strapi/design-system": "2.0.0-beta.2",
-	"@strapi/icons": "2.0.0-beta.2",
-	"@strapi/permissions": "5.0.0-beta.5",
-	"@strapi/provider-audit-logs-local": "5.0.0-beta.5",
-	"@strapi/types": "5.0.0-beta.5",
-	"@strapi/typescript-utils": "5.0.0-beta.5",
-	"@strapi/utils": "5.0.0-beta.5",
-	"@testing-library/dom": "9.2.0",
-	"@testing-library/react": "14.0.0",
-	"@testing-library/user-event": "14.4.3",
+	"@strapi/design-system": "2.0.0-beta.4",
+	"@strapi/icons": "2.0.0-beta.4",
+	"@strapi/permissions": "5.0.0-beta.7",
+	"@strapi/provider-audit-logs-local": "5.0.0-beta.7",
+	"@strapi/types": "5.0.0-beta.7",
+	"@strapi/typescript-utils": "5.0.0-beta.7",
+	"@strapi/utils": "5.0.0-beta.7",
+	"@testing-library/dom": "10.1.0",
+	"@testing-library/react": "15.0.7",
+	"@testing-library/user-event": "14.5.2",
 	axios: "1.6.8",
 	bcryptjs: "2.4.3",
 	boxen: "5.1.2",
@@ -148,7 +148,6 @@ const dependencies = {
 	"react-is": "^18.2.0",
 	"react-query": "3.39.3",
 	"react-redux": "8.1.3",
-	"react-router-dom": "6.22.3",
 	"react-select": "5.8.0",
 	"react-window": "1.8.10",
 	rimraf: "5.0.5",
@@ -156,15 +155,14 @@ const dependencies = {
 	scheduler: "0.23.0",
 	semver: "7.5.4",
 	sift: "16.0.1",
-	"styled-components": "5.3.11",
 	typescript: "5.3.2",
 	"use-context-selector": "1.4.1",
 	yup: "0.32.9",
 	zod: "^3.22.4"
 };
 const devDependencies = {
-	"@strapi/admin-test-utils": "5.0.0-beta.5",
-	"@strapi/data-transfer": "5.0.0-beta.5",
+	"@strapi/admin-test-utils": "5.0.0-beta.7",
+	"@strapi/data-transfer": "5.0.0-beta.7",
 	"@strapi/pack-up": "5.0.0",
 	"@types/codemirror5": "npm:@types/codemirror@^5.60.15",
 	"@types/fs-extra": "11.0.4",
@@ -182,10 +180,10 @@ const devDependencies = {
 	"@types/sanitize-html": "2.11.0",
 	"@vitejs/plugin-react-swc": "3.6.0",
 	"koa-body": "6.0.1",
-	react: "^18.2.0",
-	"react-dom": "^18.2.0",
+	react: "18.3.1",
+	"react-dom": "18.3.1",
 	"react-router-dom": "6.22.3",
-	"styled-components": "5.3.11",
+	"styled-components": "6.1.8",
 	vite: "5.1.6",
 	"vite-plugin-dts": "3.7.3"
 };
@@ -194,7 +192,7 @@ const peerDependencies = {
 	react: "^17.0.0 || ^18.0.0",
 	"react-dom": "^17.0.0 || ^18.0.0",
 	"react-router-dom": "^6.0.0",
-	"styled-components": "^5.2.1"
+	"styled-components": "^6.0.0"
 };
 const engines = {
 	node: ">=18.0.0 <=20.x.x",
@@ -280,7 +278,8 @@ const GuidedTourModal = () => {
           IconButton,
           {
             onClick: handleCtaClick,
-            "aria-label": formatMessage({
+            withTooltip: false,
+            label: formatMessage({
               id: "app.utils.close-label",
               defaultMessage: "Close"
             }),
@@ -345,7 +344,7 @@ const GuidedTourStepper = ({
     ] }),
     /* @__PURE__ */ jsxs(Flex, { children: [
       /* @__PURE__ */ jsx(Flex, { marginRight: 8, minWidth: `3rem`, children: /* @__PURE__ */ jsx(
-        Number,
+        Number$1,
         {
           state: hasStepsBefore ? STATES.IS_DONE : STATES.IS_ACTIVE,
           paddingTop: 3,
@@ -353,19 +352,19 @@ const GuidedTourStepper = ({
           children: sectionIndex + 1
         }
       ) }),
-      title && /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", textColor: "neutral800", as: "h3", id: "title", children: formatMessage(title) })
+      title && /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", textColor: "neutral800", tag: "h3", id: "title", children: formatMessage(title) })
     ] }),
     /* @__PURE__ */ jsxs(Flex, { alignItems: "stretch", children: [
       /* @__PURE__ */ jsx(Flex, { marginRight: 8, direction: "column", justifyContent: "center", minWidth: `3rem`, children: hasSectionAfter && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(VerticalDivider, { state: STATES.IS_DONE }),
-        hasStepsBefore && /* @__PURE__ */ jsx(Number, { state: STATES.IS_ACTIVE, paddingTop: 3, children: nextSectionIndex + 1 })
+        hasStepsBefore && /* @__PURE__ */ jsx(Number$1, { state: STATES.IS_ACTIVE, paddingTop: 3, children: nextSectionIndex + 1 })
       ] }) }),
       /* @__PURE__ */ jsxs(Box, { children: [
         children,
         cta && (cta.target ? /* @__PURE__ */ jsx(
           LinkButton,
           {
-            as: NavLink$1,
+            tag: NavLink$1,
             endIcon: /* @__PURE__ */ jsx(ArrowRight, {}),
             onClick: onCtaClick,
             to: cta.target,
@@ -394,7 +393,7 @@ const GuidedTourContent = ({ id, defaultMessage }) => {
 const DocumentationLink = (children) => /* @__PURE__ */ jsx(
   Typography,
   {
-    as: "a",
+    tag: "a",
     textColor: "primary600",
     target: "_blank",
     rel: "noopener noreferrer",
@@ -414,6 +413,25 @@ const LiStyled = styled.li`
 `;
 const ListItem = (children) => /* @__PURE__ */ jsx(LiStyled, { children });
 
+const MainNavWrapper = styled(Flex)`
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const MainNav = (props) => /* @__PURE__ */ jsx(
+  MainNavWrapper,
+  {
+    alignItems: "normal",
+    tag: "nav",
+    background: "neutral0",
+    direction: "column",
+    height: "100vh",
+    position: "sticky",
+    top: 0,
+    zIndex: 2,
+    width: 10,
+    ...props
+  }
+);
+
 const BrandIconWrapper = styled(Box)`
   svg,
   img {
@@ -458,8 +476,11 @@ const MainNavLinkWrapper = styled(NavLink$1)`
   display: block;
   border-radius: ${({ theme }) => theme.borderRadius};
   background: ${({ theme }) => theme.colors.neutral0};
-  color: ${({ theme }) => theme.colors.neutral600};
+  color: ${({ theme }) => theme.colors.neutral500};
   position: relative;
+  width: fit-content;
+  padding-block: 0.6rem;
+  padding-inline: 0.6rem;
 
   &:hover,
   &.active {
@@ -486,23 +507,35 @@ const LinkImpl = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(MainNavLinkWrapper, { ...props, children });
 };
 const TooltipImpl = ({ children, label, position = "right" }) => {
-  return /* @__PURE__ */ jsx(Tooltip, { position, label, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", width: 7, height: 7, children }) });
+  return /* @__PURE__ */ jsx(Tooltip, { side: position, label, children: /* @__PURE__ */ jsx("span", { children }) });
 };
-const IconImpl = ({ children }) => {
+const IconImpl = ({ label, children }) => {
   if (!children) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", "aria-hidden": true, as: "span", width: 5, height: 5, children });
+  return /* @__PURE__ */ jsx(AccessibleIcon, { label, children });
 };
 const CustomBadge = styled(Badge)`
   /* override default badge styles to change the border radius of the Base element in the Design System */
   border-radius: ${({ theme }) => theme.spaces[10]};
+  height: 2rem;
 `;
 const BadgeImpl = ({ children, label, ...props }) => {
   if (!children) {
     return null;
   }
-  return /* @__PURE__ */ jsx(CustomBadge, { position: "absolute", top: "-1.2rem", right: "-0.4rem", "aria-label": label, ...props, children });
+  return /* @__PURE__ */ jsx(
+    CustomBadge,
+    {
+      position: "absolute",
+      top: "-0.8rem",
+      left: "1.7rem",
+      "aria-label": label,
+      active: false,
+      ...props,
+      children
+    }
+  );
 };
 const NavLink = {
   Link: LinkImpl,
@@ -511,204 +544,130 @@ const NavLink = {
   Badge: BadgeImpl
 };
 
-const LinkUserWrapper = styled(Box)`
-  width: 15rem;
-  position: absolute;
-  bottom: ${({ theme }) => theme.spaces[9]};
+const MenuTrigger = styled(Menu.Trigger)`
+  height: 100%;
+`;
+const MenuContent = styled(Menu.Content)`
   left: ${({ theme }) => theme.spaces[5]};
 `;
-const LinkUser = styled(NavLink$1)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  text-decoration: none;
-  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};
-  border-radius: ${({ theme }) => theme.spaces[1]};
-
-  &:hover {
-    background: ${({ theme, logout }) => logout ? theme.colors.danger100 : theme.colors.primary100};
-    text-decoration: none;
+const MenuItem = styled(Menu.Item)`
+  span {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
   }
+`;
+const NavUser = ({ children, initials, ...props }) => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const logout = useAuth("Logout", (state) => state.logout);
+  const handleProfile = () => {
+    navigate("/me");
+  };
+  const handleLogout = () => {
+    logout();
+    navigate("/auth/login");
+  };
+  return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", ...props, children: /* @__PURE__ */ jsxs(Menu.Root, { children: [
+    /* @__PURE__ */ jsxs(MenuTrigger, { endIcon: null, fullWidth: true, justifyContent: "center", children: [
+      /* @__PURE__ */ jsx(Initials, { children: initials }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children })
+    ] }),
+    /* @__PURE__ */ jsxs(MenuContent, { popoverPlacement: "top", zIndex: 3, width: "15rem", children: [
+      /* @__PURE__ */ jsx(MenuItem, { onSelect: handleProfile, children: formatMessage({
+        id: "global.profile",
+        defaultMessage: "Profile"
+      }) }),
+      /* @__PURE__ */ jsxs(MenuItem, { onSelect: handleLogout, color: "danger600", children: [
+        formatMessage({
+          id: "app.components.LeftMenu.logout",
+          defaultMessage: "Logout"
+        }),
+        /* @__PURE__ */ jsx(SignOut, {})
+      ] })
+    ] })
+  ] }) });
+};
 
-  svg {
-    fill: ${({ theme }) => theme.colors.danger600};
+const sortLinks = (links) => {
+  return links.sort((a, b) => {
+    const positionA = a.position ?? 6;
+    const positionB = b.position ?? 6;
+    if (positionA < positionB) {
+      return -1;
+    } else {
+      return 1;
+    }
+  });
+};
+const NavLinkBadgeCounter = styled(NavLink.Badge)`
+  span {
+    color: ${({ theme }) => theme.colors.neutral0};
   }
 `;
-const NavLinkWrapper = styled(Box)`
-  div:nth-child(2) {
-    /* remove badge background color */
-    background: transparent;
-  }
+const NavLinkBadgeLock = styled(NavLink.Badge)`
+  background-color: transparent;
+`;
+const NavListWrapper = styled(Flex)`
+  overflow-y: auto;
 `;
 const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
-  const navUserRef = React.useRef(null);
-  const [userLinksVisible, setUserLinksVisible] = React.useState(false);
-  const {
-    logos: { menu }
-  } = useConfiguration("LeftMenu");
-  const [condensed, setCondensed] = usePersistentState("navbar-condensed", false);
   const user = useAuth("AuthenticatedApp", (state) => state.user);
-  const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
-  const logout = useAuth("Logout", (state) => state.logout);
   const userDisplayName = getDisplayName(user);
+  const { formatMessage, locale } = useIntl();
+  const formatter = useCollator(locale, {
+    sensitivity: "base"
+  });
   const initials = userDisplayName.split(" ").map((name) => name.substring(0, 1)).join("").substring(0, 2);
-  const handleToggleUserLinks = () => setUserLinksVisible((prev) => !prev);
-  const handleBlur = (e) => {
-    if (!e.currentTarget.contains(e.relatedTarget) && /**
-     * TODO: can we replace this by just using the navUserRef?
-     */
-    e.relatedTarget?.parentElement?.id !== "main-nav-user-button") {
-      setUserLinksVisible(false);
-    }
-  };
   const handleClickOnLink = (destination) => {
     trackUsage("willNavigate", { from: pathname, to: destination });
   };
-  const menuTitle = formatMessage({
-    id: "app.components.LeftMenu.navbrand.title",
-    defaultMessage: "Strapi Dashboard"
-  });
-  return /* @__PURE__ */ jsxs(MainNav, { condensed, children: [
-    condensed ? (
-      /**
-       * TODO: remove the conditional rendering once the new Main nav is fully implemented
-       */
-      /* @__PURE__ */ jsx(NavBrand, {})
-    ) : /* @__PURE__ */ jsx(
-      NavBrand$1,
-      {
-        as: NavLink$1,
-        workplace: formatMessage({
-          id: "app.components.LeftMenu.navbrand.workplace",
-          defaultMessage: "Workplace"
-        }),
-        title: menuTitle,
-        icon: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: menu.custom?.url || menu.default,
-            alt: formatMessage({
-              id: "app.components.LeftMenu.logo.alt",
-              defaultMessage: "Application logo"
-            })
-          }
-        )
-      }
-    ),
+  const listLinksAlphabeticallySorted = [...pluginsSectionLinks, ...generalSectionLinks].sort(
+    (a, b) => formatter.compare(formatMessage(a.intlLabel), formatMessage(b.intlLabel))
+  );
+  const listLinks = sortLinks(listLinksAlphabeticallySorted);
+  return /* @__PURE__ */ jsxs(MainNav, { children: [
+    /* @__PURE__ */ jsx(NavBrand, {}),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsxs(NavSections, { children: [
-      condensed && /* @__PURE__ */ jsx(NavLink.Link, { to: "/", onClick: () => handleClickOnLink("/"), children: /* @__PURE__ */ jsx(
-        NavLink.Tooltip,
+    /* @__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?.lockIcon ? /* @__PURE__ */ jsx(Lock, {}) : void 0;
+      const badgeContentNumeric = link.notificationsCount && link.notificationsCount > 0 ? link.notificationsCount.toString() : void 0;
+      const labelValue = formatMessage(link.intlLabel);
+      return /* @__PURE__ */ jsx(Flex, { tag: "li", children: /* @__PURE__ */ jsx(NavLink.Tooltip, { label: labelValue, children: /* @__PURE__ */ jsxs(
+        NavLink.Link,
         {
-          label: formatMessage({ id: "global.home", defaultMessage: "Home" }),
-          children: /* @__PURE__ */ jsx(NavLink.Icon, { children: /* @__PURE__ */ jsx(House, { fill: "neutral500" }) })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        NavLink$2,
-        {
-          as: NavLink$1,
-          to: "/content-manager",
-          icon: /* @__PURE__ */ jsx(Feather, {}),
-          onClick: () => handleClickOnLink("/content-manager"),
-          children: formatMessage({ id: "global.content-manager", defaultMessage: "Content manager" })
-        }
-      ),
-      pluginsSectionLinks.length > 0 ? /* @__PURE__ */ jsx(
-        NavSection,
-        {
-          label: formatMessage({
-            id: "app.components.LeftMenu.plugins",
-            defaultMessage: "Plugins"
-          }),
-          children: pluginsSectionLinks.map((link) => {
-            if (link.to === "content-manager") {
-              return null;
-            }
-            const LinkIcon = link.icon;
-            return /* @__PURE__ */ jsx(NavLinkWrapper, { children: /* @__PURE__ */ jsx(
-              NavLink$2,
+          to: link.to,
+          onClick: () => handleClickOnLink(link.to),
+          "aria-label": labelValue,
+          children: [
+            /* @__PURE__ */ jsx(NavLink.Icon, { label: labelValue, children: /* @__PURE__ */ jsx(LinkIcon, { width: "2rem", height: "2rem", fill: "neutral500" }) }),
+            badgeContentLock ? /* @__PURE__ */ jsx(
+              NavLinkBadgeLock,
               {
-                as: NavLink$1,
-                to: link.to,
-                icon: /* @__PURE__ */ jsx(LinkIcon, {}),
-                onClick: () => handleClickOnLink(link.to),
-                badgeContent: link?.lockIcon ? /* @__PURE__ */ jsx(Lock, { width: "1.5rem", height: "1.5rem" }) : void 0,
-                children: formatMessage(link.intlLabel)
+                label: "locked",
+                textColor: "neutral500",
+                paddingLeft: 0,
+                paddingRight: 0,
+                children: badgeContentLock
               }
-            ) }, link.to);
-          })
-        }
-      ) : null,
-      generalSectionLinks.length > 0 ? /* @__PURE__ */ jsx(
-        NavSection,
-        {
-          label: formatMessage({
-            id: "app.components.LeftMenu.general",
-            defaultMessage: "General"
-          }),
-          children: generalSectionLinks.map((link) => {
-            const LinkIcon = link.icon;
-            return /* @__PURE__ */ jsx(
-              NavLink$2,
+            ) : badgeContentNumeric ? /* @__PURE__ */ jsx(
+              NavLinkBadgeCounter,
               {
-                as: NavLink$1,
-                badgeContent: link.notificationsCount && link.notificationsCount > 0 ? link.notificationsCount.toString() : void 0,
-                to: link.to,
-                icon: /* @__PURE__ */ jsx(LinkIcon, {}),
-                onClick: () => handleClickOnLink(link.to),
-                children: formatMessage(link.intlLabel)
-              },
-              link.to
-            );
-          })
-        }
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsxs(NavFooter, { children: [
-      /* @__PURE__ */ jsx(
-        NavUser,
-        {
-          id: "main-nav-user-button",
-          ref: navUserRef,
-          onClick: handleToggleUserLinks,
-          initials,
-          children: userDisplayName
-        }
-      ),
-      userLinksVisible && /* @__PURE__ */ jsx(
-        LinkUserWrapper,
-        {
-          onBlur: handleBlur,
-          padding: 1,
-          shadow: "tableShadow",
-          background: "neutral0",
-          hasRadius: true,
-          children: /* @__PURE__ */ jsx(FocusTrap, { onEscape: handleToggleUserLinks, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 0, children: [
-            /* @__PURE__ */ jsx(LinkUser, { tabIndex: 0, onClick: handleToggleUserLinks, to: "/me", children: /* @__PURE__ */ jsx(Typography, { children: formatMessage({
-              id: "global.profile",
-              defaultMessage: "Profile"
-            }) }) }),
-            /* @__PURE__ */ jsxs(LinkUser, { tabIndex: 0, onClick: logout, to: "/auth/login", children: [
-              /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: formatMessage({
-                id: "app.components.LeftMenu.logout",
-                defaultMessage: "Logout"
-              }) }),
-              /* @__PURE__ */ jsx(SignOut, {})
-            ] })
-          ] }) })
+                label: badgeContentNumeric,
+                backgroundColor: "primary600",
+                width: "2.3rem",
+                color: "neutral0",
+                children: badgeContentNumeric
+              }
+            ) : null
+          ]
         }
-      ),
-      /* @__PURE__ */ jsx(NavCondense, { onClick: () => setCondensed((s) => !s), children: condensed ? formatMessage({
-        id: "app.components.LeftMenu.expand",
-        defaultMessage: "Expand the navbar"
-      }) : formatMessage({
-        id: "app.components.LeftMenu.collapse",
-        defaultMessage: "Collapse the navbar"
-      }) })
-    ] })
+      ) }) }, link.to);
+    }) : null }),
+    /* @__PURE__ */ jsx(NavUser, { initials, children: userDisplayName })
   ] });
 };
 
@@ -731,7 +690,7 @@ const Onboarding = () => {
     }
   ];
   const Icon = isOpen ? Cross : Question;
-  return /* @__PURE__ */ jsxs(Box, { as: "aside", position: "fixed", bottom: 2, right: 2, children: [
+  return /* @__PURE__ */ jsxs(Box, { tag: "aside", position: "fixed", bottom: 2, right: 2, children: [
     /* @__PURE__ */ jsx(
       HelperButton,
       {
@@ -774,7 +733,7 @@ const Onboarding = () => {
                 /* @__PURE__ */ jsx(
                   TextLink,
                   {
-                    as: "a",
+                    tag: "a",
                     href: WATCH_MORE.href,
                     target: "_blank",
                     rel: "noreferrer noopener",
@@ -790,7 +749,7 @@ const Onboarding = () => {
           VIDEO_LINKS.map(({ href, duration, label }, index) => /* @__PURE__ */ jsxs(
             VideoLinkWrapper,
             {
-              as: "a",
+              tag: "a",
               href,
               target: "_blank",
               rel: "noreferrer noopener",
@@ -800,7 +759,7 @@ const Onboarding = () => {
               paddingLeft: 6,
               paddingRight: 11,
               children: [
-                /* @__PURE__ */ jsx(Box, { paddingRight: 5, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral200", variant: "alpha", children: index + 1 }) }),
+                /* @__PURE__ */ jsx(Box, { paddingRight: 5, children: /* @__PURE__ */ jsx(Number, { textColor: "neutral200", variant: "alpha", children: index + 1 }) }),
                 /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
                   /* @__PURE__ */ jsx(Preview, { src: onboardingPreview, alt: "" }),
                   /* @__PURE__ */ jsx(
@@ -819,7 +778,7 @@ const Onboarding = () => {
                   )
                 ] }),
                 /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", paddingLeft: 4, children: [
-                  /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: formatMessage(label) }),
+                  /* @__PURE__ */ jsx(Label, { fontWeight: "bold", children: formatMessage(label) }),
                   /* @__PURE__ */ jsx(VisuallyHidden, { children: ":" }),
                   /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "pi", children: duration })
                 ] })
@@ -841,7 +800,7 @@ const Onboarding = () => {
                 /* @__PURE__ */ jsx(
                   TextLink,
                   {
-                    as: "a",
+                    tag: "a",
                     href,
                     target: "_blank",
                     rel: "noreferrer noopener",
@@ -867,6 +826,8 @@ const HelperButton = styled(Button)`
 const IconWrapper = styled(Flex)`
   transform: translate(-50%, -50%);
 `;
+const Number = styled(Typography)``;
+const Label = styled(Typography)``;
 const VideoLinkWrapper = styled(Flex)`
   text-decoration: none;
 
@@ -878,12 +839,12 @@ const VideoLinkWrapper = styled(Flex)`
     background: ${({ theme }) => theme.colors.primary100};
 
     /* Hover style for the number displayed */
-    ${Typography}:first-child {
+    ${Number} {
       color: ${({ theme }) => theme.colors.primary500};
     }
 
     /* Hover style for the label */
-    ${Typography}:nth-child(1) {
+    ${Label} {
       color: ${({ theme }) => theme.colors.primary600};
     }
   }
@@ -899,8 +860,9 @@ const TypographyLineHeight = styled(Typography)`
   /* line height of label and watch more to 1 so they can be better aligned visually */
   line-height: 1;
 `;
-const TextLink = styled(TypographyLineHeight)`
+const TextLink = styled(Typography)`
   text-decoration: none;
+  line-height: 1;
 
   :hover {
     text-decoration: underline;
@@ -1003,6 +965,16 @@ const useMenu = (shouldUpdateStrapi) => {
   const permissions = useSelector(selectAdminPermissions);
   const [menuWithUserPermissions, setMenuWithUserPermissions] = React.useState({
     generalSectionLinks: [
+      {
+        icon: House,
+        intlLabel: {
+          id: "global.home",
+          defaultMessage: "Home"
+        },
+        to: "/",
+        permissions: [],
+        position: 0
+      },
       {
         icon: PuzzlePiece,
         intlLabel: {
@@ -1010,7 +982,8 @@ const useMenu = (shouldUpdateStrapi) => {
           defaultMessage: "Plugins"
         },
         to: "/list-plugins",
-        permissions: permissions.marketplace?.main ?? []
+        permissions: permissions.marketplace?.main ?? [],
+        position: 7
       },
       {
         icon: ShoppingCart,
@@ -1019,7 +992,8 @@ const useMenu = (shouldUpdateStrapi) => {
           defaultMessage: "Marketplace"
         },
         to: "/marketplace",
-        permissions: permissions.marketplace?.main ?? []
+        permissions: permissions.marketplace?.main ?? [],
+        position: 8
       },
       {
         icon: Cog,
@@ -1031,7 +1005,8 @@ const useMenu = (shouldUpdateStrapi) => {
         // Permissions of this link are retrieved in the init phase
         // using the settings menu
         permissions: [],
-        notificationsCount: 0
+        notificationsCount: 0,
+        position: 10
       }
     ],
     pluginsSectionLinks: [],
@@ -1191,4 +1166,4 @@ const checkLatestStrapiVersion = (currentPackageVersion, latestPublishedVersion
 };
 
 export { AdminLayout, PrivateAdminLayout };
-//# sourceMappingURL=AuthenticatedLayout-eMLYKMgW.mjs.map
+//# sourceMappingURL=AuthenticatedLayout-qx1Lyy4q.mjs.map