@commercetools-frontend/application-shell 0.0.0-FEC-157-preview-releases-20241126230331

package/dist/navbar-1465f182.cjs.prod.js

@@ -0,0 +1,1189 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _pt = require('prop-types');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var react$1 = require('react');
+var snakeCase = require('lodash/snakeCase');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var LogoSVG = require('@commercetools-frontend/assets/logos/commercetools_small-logo.svg');
+var constants = require('@commercetools-frontend/constants');
+var icons = require('@commercetools-uikit/icons');
+var Spacings = require('@commercetools-uikit/spacings');
+var _styled = require('@emotion/styled/base');
+var react = require('@emotion/react');
+var applicationComponents = require('@commercetools-frontend/application-components');
+var designSystem = require('@commercetools-uikit/design-system');
+var oidc = require('./oidc-d74e6aa2.cjs.prod.js');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/every');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+var reactBroadcast = require('@flopflip/react-broadcast');
+var classnames = require('classnames');
+var MissingImageSvg = require('@commercetools-frontend/assets/images/diagonal-line.svg');
+var permissions = require('@commercetools-frontend/permissions');
+var InlineSvg = require('@commercetools-uikit/icons/inline-svg');
+var location = require('./location-537e0660.cjs.prod.js');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _keysInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/keys');
+var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
+var isNil = require('lodash/isNil');
+var throttle = require('lodash/throttle');
+var sentry = require('@commercetools-frontend/sentry');
+var useApplicationsMenu = require('./use-applications-menu-222b9106.cjs.prod.js');
+require('@apollo/client');
+require('@commercetools-frontend/l10n');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var snakeCase__default = /*#__PURE__*/_interopDefault(snakeCase);
+var LogoSVG__default = /*#__PURE__*/_interopDefault(LogoSVG);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var _everyInstanceProperty__default = /*#__PURE__*/_interopDefault(_everyInstanceProperty);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var MissingImageSvg__default = /*#__PURE__*/_interopDefault(MissingImageSvg);
+var InlineSvg__default = /*#__PURE__*/_interopDefault(InlineSvg);
+var _keysInstanceProperty__default = /*#__PURE__*/_interopDefault(_keysInstanceProperty);
+var _sortInstanceProperty__default = /*#__PURE__*/_interopDefault(_sortInstanceProperty);
+var isNil__default = /*#__PURE__*/_interopDefault(isNil);
+var throttle__default = /*#__PURE__*/_interopDefault(throttle);
+
+const IconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1wv1pdj3"
+} )({
+  name: "ex9e0f",
+  styles: "width:auto;display:flex;justify-content:center"
+} );
+const Icon = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1wv1pdj2"
+} )("width:", oidc.NAVBAR.iconSize, ";height:", oidc.NAVBAR.iconSize, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";>svg *:not([fill='none']){fill:", designSystem.designTokens.colorSurface, ";}" + ("" ));
+const ItemIconText = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1wv1pdj1"
+} )({
+  name: "192s9p1",
+  styles: "display:flex;flex-direction:row;justify-content:center;align-items:center"
+} );
+const Title = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1wv1pdj0"
+} )("flex:1;font-weight:600;font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";color:", designSystem.designTokens.colorNeutral, ";opacity:0;transition:", oidc.NAVBAR.leftNavigationTransition, ";text-align:left;text-decoration:none;z-index:1;" + ("" ));
+
+const getSubmenuPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, submenuVerticalPosition) => /*#__PURE__*/react.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":", submenuVerticalPosition, "px;" + ("" ), "" );
+var _ref4 = {
+  name: "abcix4",
+  styles: "top:0"
+} ;
+var _ref5 = {
+  name: "8tapst",
+  styles: "bottom:0"
+} ;
+const getContainerPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed) => [isSublistActiveWhileIsMenuCollapsed && /*#__PURE__*/react.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":-", oidc.NAVBAR.itemSize, ";" + ("" ), "" ), isSublistActiveWhileIsMenuExpanded && isSubmenuAboveMenuItem && _ref5, isSublistActiveWhileIsMenuExpanded && !isSubmenuAboveMenuItem && _ref4];
+const fadeIn = react.keyframes`
+from {opacity: 0;}
+  to { opacity: 1;}
+`;
+var _ref3 = {
+  name: "eivff4",
+  styles: "display:none"
+} ;
+const Expander = /*#__PURE__*/_styled__default["default"]("li", {
+  target: "e1i568cv8"
+} )("display:flex;align-items:center;justify-content:center;background:", designSystem.designTokens.colorPrimary10, ";padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing25, ";", props => !props.isVisible && _ref3, "::before{content:'';position:absolute;top:", oidc.NAVBAR.itemHeight, ";height:1px;background:rgba(255, 255, 255, 0.5);width:calc(100% - 2 * ", designSystem.designTokens.spacing30, ");}" + ("" ));
+const ExpanderIcon = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1i568cv7"
+} )("height:", oidc.NAVBAR.expanderSize, ";width:", oidc.NAVBAR.expanderSize, ";border-radius:", designSystem.designTokens.borderRadius4, ";padding:", designSystem.designTokens.spacing20, ";background:rgba(255, 255, 255, 0.2);display:flex;justify-content:center;align-items:center;:hover,:focus{background:rgba(255, 255, 255, 0.3);cursor:pointer;}" + ("" ));
+const LeftNavigation = /*#__PURE__*/_styled__default["default"]("nav", {
+  target: "e1i568cv6"
+} )("display:grid;width:", oidc.NAVBAR.widthLeftNavigation, ";background:", applicationComponents.designTokens.backgroundColorForNavbar, ";height:100%;grid-template-rows:56px 1fr;transition:", oidc.NAVBAR.leftNavigationTransition, ";" + ("" ));
+const TextLinkSublistWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1i568cv5"
+} )({
+  name: "khglpi",
+  styles: "display:flex;flex-direction:column;position:relative;min-height:0"
+} );
+const NavlinkClickableContent = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1i568cv4"
+} )("height:100%;width:100%;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;transition:all 150ms ease-out;position:relative;left:calc(-1 * ", designSystem.designTokens.spacing20, ");" + ("" ));
+const listStyles = {
+  name: "19z1op4",
+  styles: "margin:0;padding:0;display:flex;flex-direction:column;min-height:0;flex:1 1 0"
+} ;
+const sublistStyles = /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing30, ";font-weight:", designSystem.designTokens.fontWeight400, ";font-size:", designSystem.designTokens.fontSize20, ";background-color:", designSystem.designTokens.colorAccent10, ";left:", oidc.NAVBAR.sublistIndentationWhenCollapsed, ";z-index:-1;list-style:none;position:fixed;display:none;" + ("" ), "" );
+var _ref2 = {
+  name: "6dhm9o",
+  styles: "visibility:hidden"
+} ;
+const MenuList = /*#__PURE__*/_styled__default["default"]("ul", {
+  target: "e1i568cv3"
+} )(props => [props.level === 1 && listStyles, getSubmenuPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.submenuVerticalPosition), props.level === 2 && sublistStyles,
+// prevent glitchy behavior during the initial render when the submenu's vertical position is evaluated as 0
+props.submenuVerticalPosition === 0 && _ref2, (props.isSublistActiveWhileIsMenuExpanded || props.isSublistCollapsedAndActive || props.isSublistCollapsedAndActiveAndAbove) && /*#__PURE__*/react.css("opacity:0;display:none;text-align:left;background-color:", designSystem.designTokens.colorAccent20, ";::before{content:'';position:absolute;display:block;width:calc(", oidc.NAVBAR.sublistWidth, " + ", designSystem.designTokens.spacing20, ");height:", oidc.NAVBAR.itemSize, ";left:calc(-1 * ", designSystem.designTokens.spacing20, ");", getContainerPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.isSublistActiveWhileIsMenuExpanded, props.isSublistActiveWhileIsMenuCollapsed), ";}" + ("" ), "" )], " & .highlighted,& .highlighted ", Title, "{color:", designSystem.designTokens.colorSurface, "!important;font-weight:", designSystem.designTokens.fontWeight600, ";}" + ("" ));
+const SublistItem = /*#__PURE__*/_styled__default["default"]("li", {
+  target: "e1i568cv2"
+} )("display:flex;align-items:center;align-self:stretch;border-radius:", designSystem.designTokens.borderRadius4, ";", props => [props.isActive && /*#__PURE__*/react.css("background:", designSystem.designTokens.colorPrimary40, ";" + ("" ), "" ), !props.isActive && /*#__PURE__*/react.css(":hover,:focus-within{color:", designSystem.designTokens.colorSurface, ";font-weight:", designSystem.designTokens.fontWeight600, ";border-radius:", designSystem.designTokens.borderRadius4, ";background:", designSystem.designTokens.colorPrimary95, ";[data-link-level='text-link-sublist']{>", NavlinkClickableContent, "{left:0;}}}" + ("" ), "" )], ";" + ("" ));
+var _ref = {
+  name: "1azakc",
+  styles: "text-align:center"
+} ;
+const MenuListItem = /*#__PURE__*/_styled__default["default"]("li", {
+  target: "e1i568cv1"
+} )("height:", oidc.NAVBAR.itemSize, ";width:", oidc.NAVBAR.itemSize, ";margin:0;background:", applicationComponents.designTokens.backgroundColorForNavbar, ";list-style:none;cursor:pointer;", IconWrapper, "{width:auto;display:flex;justify-content:center;}", props => [props.isRouteActive && /*#__PURE__*/react.css("background:", designSystem.designTokens.colorPrimary25, ";border-radius:", designSystem.designTokens.borderRadius8, ";" + ("" ), "" ), !props.isRouteActive && /*#__PURE__*/react.css(":hover,:focus-within{background-color:", designSystem.designTokens.colorPrimary20, ";border-radius:", designSystem.designTokens.borderRadius8, ";}" + ("" ), "" ), props.isActive && /*#__PURE__*/react.css(ItemIconText, "{justify-content:flex-start;}" + ("" ), "" ), !props.isActive && /*#__PURE__*/react.css(":hover ", Icon, ">svg *:not([fill='none']),:focus-within ", Icon, ">svg *:not([fill='none']){fill:", designSystem.designTokens.colorSurface, ";}:hover .", Title, ",:focus-within ", Title, "{color:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" ), props.isCollapsed && _ref], " :hover ", Title, ",:focus-within ", Title, "{margin-left:calc(", designSystem.designTokens.spacing25, " + 2px);}:hover ", Icon, ",:focus-within ", Icon, "{transform:scale(1.2);}:hover ", MenuList, ".sublist-collapsed__active,:hover ", MenuList, ".sublist-collapsed__active__above,:hover ", MenuList, ".sublist-expanded__active,:focus-within ", MenuList, ".sublist-collapsed__active,:focus-within ", MenuList, ".sublist-collapsed__active__above,:focus-within ", MenuList, ".sublist-expanded__active{animation-name:", fadeIn, ";animation-duration:16ms;animation-delay:100ms;animation-fill-mode:forwards;display:flex;flex-direction:column;align-items:flex-start;background-color:", designSystem.designTokens.colorSurface, ";min-height:", oidc.NAVBAR.sublistItemMinHeight, ";width:", oidc.NAVBAR.sublistWidth, ";border-radius:", designSystem.designTokens.borderRadius8, ";z-index:20001;box-shadow:-2px 4px 25px 0 rgba(89, 89, 89, 0.5);}:hover ", MenuList, ".sublist-collapsed__active.sublist-collapsed__empty,:hover ", MenuList, ".sublist-collapsed__active__above.sublist-collapsed__empty,:focus-within ", MenuList, ".sublist-collapsed__active.sublist-collapsed__empty,:focus-within ", MenuList, ".sublist-collapsed__active__above.sublist-collapsed__empty{visibility:hidden;}:hover ", MenuList, ".sublist-expanded__active,:focus-within ", MenuList, ".sublist-expanded__active{left:", oidc.NAVBAR.sublistIndentationWhenExpanded, ";}" + ("" ));
+const SafeArea = /*#__PURE__*/_styled__default["default"]("span", {
+  target: "e1i568cv0"
+} )("position:absolute;top:0;bottom:0;right:100%;width:calc(100% - ", designSystem.designTokens.spacing30, ");clip-path:polygon(var(--safe-start), 100% 100%, 100% 0);" + ("" ));
+
+const visible = react.keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+const FixedMenu = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k10"
+} )("position:relative;width:", oidc.NAVBAR.widthLeftNavigation, ";", MenuListItem, " ", ItemIconText, "{justify-content:center;display:flex;width:100%;}" + ("" ));
+const SupportMenuTooltipContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k9"
+} )("position:fixed;left:", oidc.NAVBAR.sublistIndentationWhenCollapsed, ";display:none;align-items:center;justify-content:flex-start;height:", oidc.NAVBAR.itemSize, ";z-index:20001;" + ("" ));
+const ItemContent = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k8"
+} )("color:", designSystem.designTokens.colorNeutral, ";width:", oidc.NAVBAR.itemSize, ";position:relative;display:block;:hover ", SupportMenuTooltipContainer, ",:focus-within ", SupportMenuTooltipContainer, "{display:flex;}" + ("" ));
+const ScrollableMenu = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k7"
+} )("flex:1 1 0;overflow-x:hidden;overflow-y:hidden;padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing30, " ", oidc.NAVBAR.itemSize, ";width:", oidc.NAVBAR.widthLeftNavigation, ";box-sizing:border-box;:hover{overflow-y:scroll;}scrollbar-width:thin;scrollbar-color:", designSystem.designTokens.colorPrimary40, " transparent;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", designSystem.designTokens.colorPrimary40, ";border-radius:", designSystem.designTokens.borderRadius8, ";}" + ("" ));
+const leftNavigationOpenStyles = /*#__PURE__*/react.css(".body__menu-open ", LeftNavigation, "{transition:", oidc.NAVBAR.leftNavigationTransition, ";width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open ", ScrollableMenu, "{width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open ", FixedMenu, "{width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open [data-link-level='text-link']{justify-content:start;}.body__menu-open ", MenuListItem, "{height:auto;min-height:", oidc.NAVBAR.itemSize, ";width:calc(\n      ", oidc.NAVBAR.sublistIndentationWhenExpanded, " - 2 *\n        ", designSystem.designTokens.spacing25, "\n    );&.active{max-height:500px;transition:max-height 0.25s ease-in;", ItemIconText, "{position:relative;width:auto;margin-left:0;}}", Title, "{opacity:1;margin-left:", designSystem.designTokens.spacing25, ";color:", designSystem.designTokens.colorSurface, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";animation:", visible, " 150ms cubic-bezier(1, 0, 0.58, 1);}}.body__menu-open ", ItemContent, "{width:100%;}" + ("" ), "" );
+const NavigationHeader = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k6"
+} )("background-color:", applicationComponents.designTokens.backgroundColorForNavbarHeader, ";color:", designSystem.designTokens.colorSurface, ";display:flex;justify-content:center;flex-direction:row;align-items:center;padding:", designSystem.designTokens.spacing30, ";" + ("" ));
+const HeaderTitle = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k5"
+} )("font-weight:600;margin-left:", designSystem.designTokens.spacing20, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";animation:", visible, " 150ms cubic-bezier(1, 0, 0.58, 1);" + ("" ));
+const TooltipContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k4"
+} )("position:absolute;left:0;display:flex;align-items:center;justify-content:flex-start;height:", oidc.NAVBAR.itemSize, ";visibility:visible;", props => props.alignsAgainstBottom ? 'bottom' : 'top', ":-", oidc.NAVBAR.itemSize, ";" + ("" ));
+const Tooltip = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k3"
+} )("padding:", designSystem.designTokens.spacing10, " calc(", designSystem.designTokens.spacing20, " + ", designSystem.designTokens.spacing10, ");display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;border-radius:", designSystem.designTokens.borderRadius4, ";background:", designSystem.designTokens.colorAccent10, ";box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.25);font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";font-weight:", designSystem.designTokens.fontWeight400, ";color:", designSystem.designTokens.colorSurface, ";max-height:", oidc.NAVBAR.itemSize, ";visibility:inherit;" + ("" ));
+const TextLink = /*#__PURE__*/_styled__default["default"]("a", {
+  target: "e1meml8k2"
+} )("color:", designSystem.designTokens.colorNeutral, ";text-decoration:none;display:flex;padding:", designSystem.designTokens.spacing25, ";align-items:center;justify-content:center;" + ("" ));
+const SupportMenu = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k1"
+} )("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";height:calc(", oidc.NAVBAR.itemSize, " + ", designSystem.designTokens.spacing20, ");" + ("" ));
+const Text = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k0"
+} )("font-weight:", designSystem.designTokens.fontWeight400, ";font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";width:100%;height:100%;" + ("" ));
+const getMenuItemLinkStyles = isSubmenuLink => [isSubmenuLink && /*#__PURE__*/react.css("display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:", designSystem.designTokens.colorSolid, ";font-weight:", designSystem.designTokens.fontWeight600, ";text-decoration:none;flex:1;padding:", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing30, ";transition:padding 150ms ease-out;" + ("" ), "" ), !isSubmenuLink && /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral, ";text-decoration:none;display:flex;padding:", designSystem.designTokens.spacing25, ";align-items:center;justify-content:center;" + ("" ), "" )];
+
+const _excluded = ["icon"];
+function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const HeartIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./heart-01f01038.cjs.prod.js'); }));
+const PaperclipIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./paperclip-fe72a70d.cjs.prod.js'); }));
+const PluginIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./plugin-81ae1044.cjs.prod.js'); }));
+const RocketIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./rocket-cb99be06.cjs.prod.js'); }));
+const StarIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./star-e4902bbb.cjs.prod.js'); }));
+const ConnectedSquareIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./connected-square-2d046cb8.cjs.prod.js'); }));
+const WorldIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./world-22189397.cjs.prod.js'); }));
+const TreeStructureIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./tree-structure-3ec98cce.cjs.prod.js'); }));
+const UserFilledIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./user-filled-26f333b2.cjs.prod.js'); }));
+const SpeedometerIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./speedometer-26f52e73.cjs.prod.js'); }));
+const TagMultiIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./tag-multi-1c065f61.cjs.prod.js'); }));
+const CartIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./cart-645074db.cjs.prod.js'); }));
+const BoxIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./box-09bf50e1.cjs.prod.js'); }));
+const GearIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./gear-4f7cde98.cjs.prod.js'); }));
+const ListWithSearchIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./list-with-search-6462447e.cjs.prod.js'); }));
+// The icon is expected to be the `svg` document as a string.
+// For backwards compatibility purposes, we still support the legacy "icon name",
+// which we then map to one of the pre-defined icons.
+// Eventually, we want to get rid of this "switch" logic.
+const IconSwitcher = _ref => {
+  let icon = _ref.icon,
+    iconProps = _objectWithoutProperties(_ref, _excluded);
+  if (_includesInstanceProperty__default["default"](icon).call(icon, '<svg')) {
+    return jsxRuntime.jsx(InlineSvg__default["default"], _objectSpread$2({
+      data: icon
+    }, iconProps));
+  }
+  // Backwards compatibility for apps using the "icon name".
+  switch (icon) {
+    // Legacy application icons
+    // TODO: To be removed once MC applications icons updates are published
+    case 'TreeStructureIcon':
+      return jsxRuntime.jsx(TreeStructureIcon, _objectSpread$2({}, iconProps));
+    case 'UserFilledIcon':
+      return jsxRuntime.jsx(UserFilledIcon, _objectSpread$2({}, iconProps));
+    case 'SpeedometerIcon':
+      return jsxRuntime.jsx(SpeedometerIcon, _objectSpread$2({}, iconProps));
+    case 'TagMultiIcon':
+      return jsxRuntime.jsx(TagMultiIcon, _objectSpread$2({}, iconProps));
+    case 'CartIcon':
+      return jsxRuntime.jsx(CartIcon, _objectSpread$2({}, iconProps));
+    case 'BoxIcon':
+      return jsxRuntime.jsx(BoxIcon, _objectSpread$2({}, iconProps));
+    case 'GearIcon':
+      return jsxRuntime.jsx(GearIcon, _objectSpread$2({}, iconProps));
+    case 'ListWithSearchIcon':
+      return jsxRuntime.jsx(ListWithSearchIcon, _objectSpread$2({}, iconProps));
+
+    // Custom application icons set
+    case 'HeartIcon':
+      return jsxRuntime.jsx(HeartIcon, _objectSpread$2({}, iconProps));
+    case 'PaperclipIcon':
+      return jsxRuntime.jsx(PaperclipIcon, _objectSpread$2({}, iconProps));
+    case 'PluginIcon':
+      return jsxRuntime.jsx(PluginIcon, _objectSpread$2({}, iconProps));
+    case 'RocketIcon':
+      return jsxRuntime.jsx(RocketIcon, _objectSpread$2({}, iconProps));
+    case 'StarIcon':
+      return jsxRuntime.jsx(StarIcon, _objectSpread$2({}, iconProps));
+    case 'ConnectedSquareIcon':
+      return jsxRuntime.jsx(ConnectedSquareIcon, _objectSpread$2({}, iconProps));
+    // For backwards compatibility
+    case 'WorldIcon':
+      return jsxRuntime.jsx(WorldIcon, _objectSpread$2({}, iconProps));
+    default:
+      return jsxRuntime.jsx("img", {
+        src: MissingImageSvg__default["default"],
+        alt: "missing icon"
+      });
+  }
+};
+IconSwitcher.propTypes = {};
+IconSwitcher.displayName = 'IconSwitcher';
+const getIcon = _ref2 => {
+  let isMenuOpen = _ref2.isMenuOpen;
+  const Icon = isMenuOpen ? icons.SidebarCollapseIcon : icons.SidebarExpandIcon;
+  return jsxRuntime.jsx(Icon, {
+    color: "surface",
+    size: "big"
+  });
+};
+const MenuExpander = props => {
+  return jsxRuntime.jsx(Expander, {
+    isVisible: props.isVisible,
+    children: jsxRuntime.jsx(ExpanderIcon, {
+      onClick: props.onClick,
+      onKeyDown: e => {
+        if (e.key === 'Enter') {
+          props.onClick(e);
+        }
+      },
+      tabIndex: 0,
+      "data-testid": "menu-expander",
+      children: getIcon(props)
+    })
+  }, "expander");
+};
+MenuExpander.propTypes = {};
+MenuExpander.displayName = 'MenuExpander';
+const MenuGroup = /*#__PURE__*/react$1.forwardRef((props, ref) => {
+  if (props.isExpanded && (props.level === 2 && !props.hasSubmenu || props.level === 2 && !props.isActive)) {
+    return null;
+  }
+  const isSublistActiveWhileIsMenuExpanded = Boolean(props.level === 2 && props.isActive && props.isExpanded);
+  const isSublistActiveWhileIsMenuCollapsed = Boolean(props.level === 2 && props.isActive && !props.isExpanded);
+  return jsxRuntime.jsx(MenuList, {
+    ref: ref && props.level === 2 ? ref : null,
+    level: props.level,
+    id: `group-${props.id}`,
+    "data-testid": `group-${props.id}`,
+    role: "menu",
+    "aria-expanded": isSublistActiveWhileIsMenuExpanded || isSublistActiveWhileIsMenuCollapsed,
+    onKeyDown: props.handleKeyDown,
+    className: classnames__default["default"]({
+      'sublist-expanded__active': isSublistActiveWhileIsMenuExpanded
+    }, {
+      'sublist-collapsed__empty': isSublistActiveWhileIsMenuCollapsed && !props.hasSubmenu
+    }, {
+      'sublist-collapsed__active': isSublistActiveWhileIsMenuCollapsed && !props.isSubmenuAboveMenuItem
+    }, {
+      'sublist-collapsed__active__above': isSublistActiveWhileIsMenuCollapsed && props.isSubmenuAboveMenuItem
+    }),
+    isSublistActiveWhileIsMenuExpanded: isSublistActiveWhileIsMenuExpanded,
+    isSublistActiveWhileIsMenuCollapsed: isSublistActiveWhileIsMenuCollapsed,
+    isSublistCollapsedAndActive: isSublistActiveWhileIsMenuCollapsed && !props.isSubmenuAboveMenuItem,
+    isSublistCollapsedAndActiveAndAbove: Boolean(isSublistActiveWhileIsMenuCollapsed && props.isSubmenuAboveMenuItem),
+    isSubmenuAboveMenuItem: props.isSubmenuAboveMenuItem,
+    submenuVerticalPosition: props.submenuVerticalPosition,
+    children: props.children
+  });
+});
+MenuGroup.displayName = 'MenuGroup';
+const MenuItem$1 = props => {
+  return jsxRuntime.jsx(MenuListItem, {
+    role: "menuitem",
+    onClick: props.onClick,
+    onMouseEnter: props.onMouseEnter,
+    onMouseLeave: props.onMouseLeave,
+    onFocus: props.onMouseEnter,
+    onBlur: props.onMouseLeave,
+    onKeyDown: props.onKeyDown,
+    "data-menuitem": props.identifier,
+    className: classnames__default["default"]({
+      active: props.isActive
+    }),
+    isActive: props.isActive,
+    isRouteActive: Boolean(props.isMainMenuRouteActive),
+    isCollapsed: !props.isMenuOpen,
+    onMouseMove: props.onMouseMove,
+    children: jsxRuntime.jsx(ItemContent, {
+      children: props.children
+    })
+  });
+};
+MenuItem$1.propTypes = {};
+MenuItem$1.displayName = 'MenuItem';
+const menuItemLinkDefaultProps = {
+  exactMatch: false
+};
+const NavLinkWrapper = props => {
+  const Wrapper = props.isSubmenuLink ? TextLinkSublistWrapper : react$1.Fragment;
+  return jsxRuntime.jsx(Wrapper, {
+    children: props.children
+  });
+};
+NavLinkWrapper.propTypes = {};
+const NavLinkClickableContentWrapper = props => {
+  const Wrapper = props.isSubmenuLink ? NavlinkClickableContent : react$1.Fragment;
+  return jsxRuntime.jsx(Wrapper, {
+    children: props.children
+  });
+};
+NavLinkClickableContentWrapper.propTypes = {};
+const MenuItemLink = props => {
+  const redirectTo = targetUrl => location.location.replace(targetUrl);
+  if (props.linkTo) {
+    const linkLevel = props.isSubmenuLink ? 'text-link-sublist' : 'text-link';
+    return jsxRuntime.jsx(NavLinkWrapper, _objectSpread$2(_objectSpread$2({}, props), {}, {
+      children: jsxRuntime.jsx(reactRouterDom.NavLink, {
+        to: props.linkTo,
+        exact: props.exactMatch,
+        activeClassName: "highlighted",
+        "data-link-level": linkLevel,
+        css: getMenuItemLinkStyles(Boolean(props.isSubmenuLink)),
+        tabIndex: props.isSubmenuLink && !props.isSubmenuFocused ? -1 : 0,
+        onClick: event => {
+          if (props.linkTo && props.useFullRedirectsForLinks) {
+            event.preventDefault();
+            redirectTo(props.linkTo);
+          } else if (props.onClick) {
+            event.persist();
+            props.onClick(event);
+          }
+        },
+        children: jsxRuntime.jsx(NavLinkClickableContentWrapper, _objectSpread$2(_objectSpread$2({}, props), {}, {
+          children: props.children
+        }))
+      })
+    }));
+  }
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children
+  });
+};
+MenuItemLink.propTypes = {};
+MenuItemLink.displayName = 'MenuItemLink';
+MenuItemLink.defaultProps = menuItemLinkDefaultProps;
+const isEveryMenuVisibilitySetToHidden = (menuVisibilities, namesOfMenuVisibilities) => _Array$isArray__default["default"](namesOfMenuVisibilities) && namesOfMenuVisibilities.length > 0 && _everyInstanceProperty__default["default"](namesOfMenuVisibilities).call(namesOfMenuVisibilities, nameOfMenuVisibility => menuVisibilities && menuVisibilities[nameOfMenuVisibility] === true);
+const restrictedMenuItemDefaultProps = {
+  permissions: []
+};
+function isLongLivedFlag(flag) {
+  return typeof flag?.value === 'boolean';
+}
+const RestrictedMenuItem = props => {
+  // NOTE: Custom application are activated/deactivated while their
+  // visibility is not controlled via a visibiility overwrite.
+  const flagVariation = reactBroadcast.useFlagVariation(props.featureToggle);
+  if (isEveryMenuVisibilitySetToHidden(props.menuVisibilities, props.namesOfMenuVisibilities)) return null;
+  const permissionsWrapper = _Array$isArray__default["default"](props.permissions) && props.permissions.length > 0 || _Array$isArray__default["default"](props.dataFences) && props.dataFences.length > 0 ? jsxRuntime.jsx(permissions.RestrictedByPermissions, {
+    permissions: props.permissions,
+    actionRights: props.actionRights,
+    dataFences: props.dataFences,
+    selectDataFenceData: demandedDataFence => {
+      switch (demandedDataFence.type) {
+        case 'store':
+          return demandedDataFence.actualDataFenceValues;
+        default:
+          return null;
+      }
+    }
+    // Always check that some of the given permissions match.
+    ,
+    shouldMatchSomePermissions: true,
+    projectPermissions: props.projectPermissions,
+    children: props.children
+  }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children
+  });
+  if (props.featureToggle) {
+    // A regular short-lived feature toggle
+    if (flagVariation === true) return permissionsWrapper;
+    // A long-lived feature toggle with `{ value: boolean, string: reason }`
+    if (isLongLivedFlag(flagVariation) && flagVariation.value === true) return permissionsWrapper;
+    return null;
+  }
+  return permissionsWrapper;
+};
+RestrictedMenuItem.propTypes = {};
+RestrictedMenuItem.displayName = 'RestrictedMenuItem';
+RestrictedMenuItem.defaultProps = restrictedMenuItemDefaultProps;
+const MenuLabel = props => {
+  var _context;
+  const localizedLabel = _findInstanceProperty__default["default"](_context = props.labelAllLocales).call(_context, loc => {
+    var _context2;
+    return _startsWithInstanceProperty__default["default"](_context2 = props.applicationLocale).call(_context2, loc.locale);
+  });
+  if (localizedLabel) return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: localizedLabel.value
+  });
+  if (props.defaultLabel) return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.defaultLabel
+  });
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: constants.NO_VALUE_FALLBACK
+  });
+};
+MenuLabel.propTypes = {
+  labelAllLocales: _pt__default["default"].arrayOf(_pt__default["default"].any).isRequired,
+  defaultLabel: _pt__default["default"].string,
+  applicationLocale: _pt__default["default"].string.isRequired
+};
+const NavBarLayout$1 = /*#__PURE__*/react$1.forwardRef((props, ref) => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  children: [jsxRuntime.jsx(react.Global, {
+    styles: leftNavigationOpenStyles
+  }), jsxRuntime.jsx(LeftNavigation, {
+    ref: ref,
+    "data-testid": "left-navigation",
+    children: props.children
+  })]
+}));
+NavBarLayout$1.displayName = 'NavBarLayout';
+const ItemContainer = props => {
+  return jsxRuntime.jsxs(ItemIconText, {
+    children: [jsxRuntime.jsx(IconWrapper, {
+      children: jsxRuntime.jsx(Icon, {
+        className: "icon",
+        children: jsxRuntime.jsx(IconSwitcher, {
+          icon: props.icon,
+          size: "scale"
+        })
+      })
+    }), props.isMenuOpen ? jsxRuntime.jsx(Title, {
+      children: jsxRuntime.jsx(MenuLabel, {
+        labelAllLocales: props.labelAllLocales,
+        defaultLabel: props.defaultLabel,
+        applicationLocale: props.applicationLocale
+      })
+    }) : null]
+  });
+};
+ItemContainer.propTypes = {};
+ItemContainer.displayName = 'ItemContainer';
+
+var messages = reactIntl.defineMessages({
+  'NavBar.MCSupport.title': {
+    id: 'NavBar.MCSupport.title',
+    defaultMessage: 'Support'
+  }
+});
+
+const NavBarLayout = props => {
+  return jsxRuntime.jsx("nav", {
+    "aria-busy": true,
+    css: /*#__PURE__*/react.css("display:flex;flex-direction:column;height:100%;width:", props.isExpanded ? '256px' : '80px', ";" + ("" ), "" ),
+    children: props.children
+  });
+};
+NavBarLayout.propTypes = {};
+const NavBarHeader = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epfjvz37"
+} )("display:flex;justify-content:center;align-items:center;padding:", designSystem.designTokens.spacing30, ";height:", oidc.DIMENSIONS.header, ";background:", applicationComponents.designTokens.backgroundColorForNavbarHeader, ";" + ("" ));
+const NavBarBody = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epfjvz36"
+} )("display:flex;flex:1;padding:", designSystem.designTokens.spacing30, ";flex-direction:column;align-items:flex-start;gap:", designSystem.designTokens.spacing40, ";flex-shrink:0;background:", designSystem.designTokens.colorPrimary10, ";position:relative;" + ("" ));
+const NavBarFooter = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epfjvz35"
+} )("position:relative;display:flex;width:100%;flex-direction:column;background:", designSystem.designTokens.colorPrimary10, ";padding:", designSystem.designTokens.spacing30, " ", props => props.isExpanded ? '58px' : '0px', ";justify-content:center;align-items:center;&::before{content:'';position:absolute;top:0;height:1px;width:calc(100% - 2 * ", designSystem.designTokens.spacing30, ");background:rgba(255, 255, 255, 0.5);}" + ("" ));
+const ExpandIcon = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epfjvz34"
+} )("width:40px;height:40px;border-radius:", designSystem.designTokens.borderRadius4, ";background:rgba(255, 255, 255, 0.2);" + ("" ));
+const MenuItemContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epfjvz33"
+} )("display:flex;align-items:center;justify-content:center;gap:12px;padding:", props => props.contentWidth === 'wide' || !props.isExpanded ? '12px' : '12px 28px', ";height:48px;" + ("" ));
+const MenuItemIcon = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epfjvz32"
+} )("width:24px;height:24px;border-radius:", designSystem.designTokens.borderRadius4, ";background:rgba(255, 255, 255, 0.2);" + ("" ));
+const MenuItemTitle = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epfjvz31"
+} )("border-radius:", designSystem.designTokens.borderRadius4, ";background:rgba(255, 255, 255, 0.2);flex:1;height:18px;" + ("" ));
+const MenuItemGroup = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epfjvz30"
+} )({
+  name: "1d3w5wq",
+  styles: "width:100%"
+} );
+
+const MenuItem = props => {
+  return jsxRuntime.jsxs(MenuItemContainer, {
+    isExpanded: props.isExpanded,
+    contentWidth: props.contentWidth,
+    children: [jsxRuntime.jsx(MenuItemIcon, {}), props.isExpanded && jsxRuntime.jsx(MenuItemTitle, {})]
+  });
+};
+MenuItem.defaultProps = {
+  contentWidth: 'wide'
+};
+const NavBarSkeleton = props => {
+  var _context, _context2, _context3, _context4;
+  return jsxRuntime.jsxs(NavBarLayout, {
+    isExpanded: props.isExpanded,
+    children: [jsxRuntime.jsx(NavBarHeader, {
+      children: jsxRuntime.jsx(MenuItemGroup, {
+        children: jsxRuntime.jsx(MenuItem, {
+          contentWidth: "narrow",
+          isExpanded: props.isExpanded
+        })
+      })
+    }), jsxRuntime.jsxs(NavBarBody, {
+      children: [jsxRuntime.jsx(MenuItemGroup, {
+        children: _mapInstanceProperty__default["default"](_context = [..._keysInstanceProperty__default["default"](_context2 = Array(2)).call(_context2)]).call(_context, index => jsxRuntime.jsx(MenuItem, {
+          isExpanded: props.isExpanded
+        }, index))
+      }), jsxRuntime.jsx(MenuItemGroup, {
+        children: _mapInstanceProperty__default["default"](_context3 = [..._keysInstanceProperty__default["default"](_context4 = Array(10)).call(_context4)]).call(_context3, index => jsxRuntime.jsx(MenuItem, {
+          isExpanded: props.isExpanded
+        }, index))
+      }), jsxRuntime.jsx(MenuItemGroup, {
+        children: jsxRuntime.jsx(MenuItem, {
+          isExpanded: props.isExpanded
+        })
+      })]
+    }), jsxRuntime.jsx(NavBarFooter, {
+      isExpanded: props.isExpanded,
+      children: jsxRuntime.jsx(ExpandIcon, {})
+    })]
+  });
+};
+NavBarSkeleton.displayName = 'NavBarSkeleton';
+
+// Type guard to help with filtering arrays for nullish elements.
+function nonNullable(value) {
+  return value !== null && value !== undefined;
+}
+
+function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys$1(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys$1(Object(t))).call(_context7, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+var FetchProjectExtensionsNavbar = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchProjectExtensionsNavbar" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "projectExtension" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "installedApplications" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "application" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "entryPointUriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "icon" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "mainMenuLink" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "submenuLinks" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }] } }] } }] } }], loc: { start: 0, end: 537, source: { body: "query FetchProjectExtensionsNavbar {\n  projectExtension {\n    id\n    installedApplications {\n      application {\n        id\n        entryPointUriPath\n        icon\n        mainMenuLink {\n          id\n          permissions\n          defaultLabel\n          labelAllLocales {\n            locale\n            value\n          }\n        }\n        submenuLinks {\n          id\n          uriPath\n          permissions\n          defaultLabel\n          labelAllLocales {\n            locale\n            value\n          }\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const getInitialState = isForcedMenuOpen => ({
+  isExpanderVisible: true,
+  isMenuOpen: isNil__default["default"](isForcedMenuOpen) ? false : isForcedMenuOpen,
+  mousePosition: {
+    clientX: 0,
+    clientY: 0
+  }
+});
+const isForcedMenuOpenDefaultValue = false;
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'setActiveItemIndex':
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+        activeItemIndex: action.payload
+      });
+    case 'unsetActiveItemIndex':
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+        activeItemIndex: undefined
+      });
+    case 'setIsExpanderVisible':
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+        isExpanderVisible: true
+      });
+    case 'toggleIsMenuOpen':
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+        isMenuOpen: !state.isMenuOpen
+      });
+    case 'setIsMenuOpenAndMakeExpanderVisible':
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+        isExpanderVisible: true,
+        isMenuOpen: action.payload
+      });
+    case 'getMousePosition':
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+        mousePosition: action.payload
+      });
+    case 'reset':
+      return {
+        isExpanderVisible: false,
+        isMenuOpen: false,
+        mousePosition: {
+          clientX: 0,
+          clientY: 0
+        }
+      };
+    default:
+      return state;
+  }
+};
+const isFocusOutEventCalledBySubmenuItem = event =>
+// a case when a submenu item loses focus
+event.type === 'focusout' &&
+// element receiving focus
+event.relatedTarget?.matches('a[data-link-level="text-link"]') &&
+// element losing focus
+event.target?.matches('a[data-link-level="text-link-sublist"]');
+const useNavbarStateManager = props => {
+  var _context, _context2, _context4, _context5;
+  const navBarNode = react$1.useRef(null);
+  const applicationsNavBarMenuGroups = useApplicationsMenu.useApplicationsMenu('navBarGroups', {
+    queryOptions: {
+      onError: sentry.reportErrorToSentry
+    },
+    environment: props.environment
+  });
+  const _useMcQuery = applicationShellConnectors.useMcQuery(FetchProjectExtensionsNavbar, {
+      skip: !props.project || !props.environment.servedByProxy,
+      context: {
+        target: constants.GRAPHQL_TARGETS.SETTINGS_SERVICE
+      },
+      fetchPolicy: 'cache-and-network',
+      onError: sentry.reportErrorToSentry
+    }),
+    projectExtensionsQuery = _useMcQuery.data;
+  const allCustomApplicationsNavbarMenu = projectExtensionsQuery && projectExtensionsQuery.projectExtension && projectExtensionsQuery.projectExtension.installedApplications ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = projectExtensionsQuery.projectExtension.installedApplications).call(_context2, installedApplication => {
+    var _context3;
+    const application = installedApplication.application;
+    // Map the menu properties to match the one from the proxy schema.
+    // This is to ensure that the menu object is the same from the proxy
+    // config and the custom apps config, thus allowing them to be
+    // concatenated and rendered the same way.
+    return {
+      key: application.id,
+      uriPath: application.entryPointUriPath,
+      labelAllLocales: application.mainMenuLink.labelAllLocales || [],
+      icon: application.icon,
+      permissions: application.mainMenuLink.permissions,
+      defaultLabel: application.mainMenuLink.defaultLabel,
+      featureToggle: undefined,
+      menuVisibility: undefined,
+      actionRights: undefined,
+      dataFences: undefined,
+      submenu: _mapInstanceProperty__default["default"](_context3 = application.submenuLinks || []).call(_context3, submenuLink => ({
+        key: submenuLink.id,
+        uriPath: submenuLink.uriPath,
+        labelAllLocales: submenuLink.labelAllLocales || [],
+        permissions: submenuLink.permissions,
+        defaultLabel: submenuLink.defaultLabel,
+        featureToggle: undefined,
+        menuVisibility: undefined,
+        actionRights: undefined,
+        dataFences: undefined
+      }))
+    };
+  })).call(_context, nonNullable) : [];
+  const cachedIsForcedMenuOpen = window.localStorage.getItem(constants.STORAGE_KEYS.IS_FORCED_MENU_OPEN);
+  const isForcedMenuOpen = isNil__default["default"](cachedIsForcedMenuOpen) ? isForcedMenuOpenDefaultValue : JSON.parse(cachedIsForcedMenuOpen);
+  if (isNil__default["default"](cachedIsForcedMenuOpen)) {
+    window.localStorage.setItem(constants.STORAGE_KEYS.IS_FORCED_MENU_OPEN, String(isForcedMenuOpen));
+  }
+  const _useReducer = react$1.useReducer(reducer, getInitialState(isForcedMenuOpen)),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  const checkSize = react$1.useCallback(throttle__default["default"](() => {
+    const shouldOpen = window.innerWidth > oidc.WINDOW_SIZES.STANDARD;
+    const canExpandMenu = window.innerWidth > oidc.WINDOW_SIZES.WIDE;
+
+    // If the screen is small, we should always keep the menu closed,
+    // no matter the settings.
+    if (!canExpandMenu) {
+      if (state.isMenuOpen || state.isExpanderVisible) {
+        // and resets the state to avoid conflicts
+        dispatch({
+          type: 'reset'
+        });
+      }
+    } else if (isForcedMenuOpen) {
+      dispatch({
+        type: 'setIsMenuOpenAndMakeExpanderVisible',
+        payload: true
+      });
+    } else if (canExpandMenu && state.isExpanderVisible !== true) {
+      dispatch({
+        type: 'setIsExpanderVisible'
+      });
+    } else if (isNil__default["default"](isForcedMenuOpen) && state.isMenuOpen !== shouldOpen) {
+      // User has no settings yet (this.props.isForcedMenuOpen === null)
+      // We check the viewport size and:
+      // - if screen is big, we open the menu
+      // - if screen is small we close it
+      dispatch({
+        type: 'setIsMenuOpenAndMakeExpanderVisible',
+        payload: shouldOpen
+      });
+    } else if (!isNil__default["default"](isForcedMenuOpen) && state.isMenuOpen !== isForcedMenuOpen) {
+      // User has setting, we should use that and ignore the screen size.
+      // Note: if viewport size is small, we should ignore the user settings.
+      dispatch({
+        type: 'setIsMenuOpenAndMakeExpanderVisible',
+        payload: isForcedMenuOpen
+      });
+    }
+  }, 100), [isForcedMenuOpen, state.isExpanderVisible, state.isMenuOpen]);
+  const shouldCloseMenuFly = react$1.useCallback(event => {
+    if (!navBarNode?.current?.contains(event.target) && !state.isMenuOpen) {
+      dispatch({
+        type: 'unsetActiveItemIndex'
+      });
+    } else if (event.type === 'mouseleave') {
+      dispatch({
+        type: 'unsetActiveItemIndex'
+      });
+    } else if (isFocusOutEventCalledBySubmenuItem(event)) {
+      dispatch({
+        type: 'unsetActiveItemIndex'
+      });
+    }
+  }, [state.isMenuOpen]);
+  react$1.useEffect(() => {
+    window.addEventListener('resize', checkSize);
+    window.addEventListener('click', shouldCloseMenuFly, true);
+    window.addEventListener('focusout', shouldCloseMenuFly, true);
+    return () => {
+      window.removeEventListener('resize', checkSize);
+      window.removeEventListener('click', shouldCloseMenuFly, true);
+      window.removeEventListener('focusout', shouldCloseMenuFly, true);
+    };
+  }, [checkSize, shouldCloseMenuFly]);
+  react$1.useEffect(() => {
+    checkSize();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // <-- run this only once!!
+
+  react$1.useLayoutEffect(() => {
+    if (state.isMenuOpen) document.body.classList.add('body__menu-open');
+    if (!state.isMenuOpen) document.body.classList.remove('body__menu-open');
+  }, [state.isMenuOpen]);
+  const handleToggleItem = react$1.useCallback(nextActiveItemIndex => {
+    if (state.activeItemIndex !== nextActiveItemIndex) dispatch({
+      type: 'setActiveItemIndex',
+      payload: nextActiveItemIndex
+    });
+  }, [state.activeItemIndex]);
+  const getMousePosition = react$1.useCallback((e, itemIndex) => {
+    if (state.activeItemIndex === itemIndex) {
+      dispatch({
+        type: 'getMousePosition',
+        payload: {
+          clientX: e.clientX,
+          clientY: e.clientY
+        }
+      });
+    }
+  }, [state.activeItemIndex]);
+  const handleToggleMenu = react$1.useCallback(() => {
+    if (state.isMenuOpen && state.activeItemIndex) {
+      dispatch({
+        type: 'unsetActiveItemIndex'
+      });
+    }
+    dispatch({
+      type: 'toggleIsMenuOpen'
+    });
+    // Synchronize the menu state with local storage.
+    window.localStorage.setItem(constants.STORAGE_KEYS.IS_FORCED_MENU_OPEN, String(!state.isMenuOpen));
+  }, [state.activeItemIndex, state.isMenuOpen]);
+  const allApplicationsNavbarMenuGroups = _sortInstanceProperty__default["default"](_context4 = _mapInstanceProperty__default["default"](_context5 = applicationsNavBarMenuGroups || []).call(_context5, navbarMenuGroup => navbarMenuGroup.key === '2' && allCustomApplicationsNavbarMenu.length > 0 ? {
+    key: navbarMenuGroup.key,
+    items: [...navbarMenuGroup.items, ...allCustomApplicationsNavbarMenu]
+  } : navbarMenuGroup)).call(_context4, (navBarMenuGroupA, navBarMenuGroupB) => Number(navBarMenuGroupA?.key) - Number(navBarMenuGroupB?.key));
+  return _objectSpread$1(_objectSpread$1({}, state), {}, {
+    navBarNode,
+    handleToggleItem,
+    handleToggleMenu,
+    shouldCloseMenuFly,
+    getMousePosition,
+    allApplicationsNavbarMenuGroups
+  });
+};
+
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const getMenuVisibilitiesOfSubmenus = menu => {
+  var _context, _context2;
+  return _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = menu.submenu).call(_context2, submenu => submenu.menuVisibility)).call(_context, nonNullable);
+};
+const getMenuVisibilityOfMainmenu = menu => menu.menuVisibility ? [menu.menuVisibility] : [];
+const getIsSubmenuRouteActive = (uriPath, props) => Boolean(reactRouterDom.matchPath(props.location.pathname, {
+  path: `/${props.projectKey}/${uriPath}`,
+  exact: true,
+  strict: false
+}));
+const ApplicationMenu = props => {
+  var _context3;
+  const _useState = react$1.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    submenuVerticalPosition = _useState2[0],
+    setSubmenuVerticalPosition = _useState2[1];
+  const _useState3 = react$1.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSubmenuAboveMenuItem = _useState4[0],
+    setIsSubmenuAboveMenuItem = _useState4[1];
+  const _useState5 = react$1.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isSubmenuFocused = _useState6[0],
+    setIsSubmenuFocused = _useState6[1];
+  const _useState7 = react$1.useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    percentageX = _useState8[0],
+    setPercentageX = _useState8[1];
+  const _useState9 = react$1.useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    percentageY = _useState10[0],
+    setPercentageY = _useState10[1];
+  const observerRef = react$1.useRef(null);
+  const submenuRef = react$1.useRef(null);
+  const submenuSafeAreaRef = react$1.useRef(null);
+
+  /* Getting the width and height of the menu*/
+  const subRefBoundingClientRect = submenuRef.current?.getBoundingClientRect();
+  const _ref = subRefBoundingClientRect ?? {},
+    menuItemWidth = _ref.width,
+    menuItemHeight = _ref.height;
+
+  // /* We want to track the left, top, width, and height of the safe area */
+  const submenuSafeAreaRefBoundingClientRect = submenuSafeAreaRef.current?.getBoundingClientRect();
+  const safeAreaLeftPos = submenuSafeAreaRefBoundingClientRect?.left || 0;
+  const safeAreaTopPos = submenuSafeAreaRefBoundingClientRect?.top || 0;
+  const safeAreaWidth = submenuSafeAreaRefBoundingClientRect?.width || 0;
+  const safeAreaHeight = submenuSafeAreaRefBoundingClientRect?.height || 0;
+  const calculateSafeAreaStartPositon = react$1.useCallback(e => {
+    const localX = e.clientX - safeAreaLeftPos;
+    const localY = e.clientY - safeAreaTopPos;
+    setPercentageX(localX / safeAreaWidth * 100);
+    setPercentageY(localY / safeAreaHeight * 100);
+  }, [safeAreaHeight, safeAreaLeftPos, safeAreaTopPos, safeAreaWidth]);
+  react$1.useEffect(() => {
+    calculateSafeAreaStartPositon(e => e);
+    window.addEventListener('mousemove', calculateSafeAreaStartPositon);
+    return () => {
+      window.removeEventListener('mousemove', calculateSafeAreaStartPositon);
+    };
+  }, [calculateSafeAreaStartPositon, menuItemHeight, menuItemWidth, safeAreaHeight, safeAreaLeftPos, safeAreaTopPos, safeAreaWidth]);
+  react$1.useLayoutEffect(() => {
+    submenuRef.current?.style.setProperty('--safe-start',
+    // Adding the +1 to slightly keep the cursor inside the safe area while moving
+    `${percentageX}% ${percentageY + 1}%`);
+  }, [calculateSafeAreaStartPositon, percentageX, percentageY]);
+  const hasSubmenu = _Array$isArray__default["default"](props.menu.submenu) && props.menu.submenu.length > 0;
+  const menuItemIdentifier = snakeCase__default["default"](props.menu.key);
+  const callbackFn = react$1.useCallback(entries => {
+    const menuItemBoundingClientRect = document.querySelector(`[data-menuitem="${menuItemIdentifier}"]`)?.getBoundingClientRect();
+    const menuItemTop = menuItemBoundingClientRect?.top || 0;
+    const menuItemBottom = menuItemBoundingClientRect?.bottom || 0;
+    const _entries = _slicedToArray(entries, 1),
+      entry = _entries[0];
+
+    /**
+     * Adding a 12 pixel buffer to the height calculation when determining if the submenu fits within the viewport below the menu item.
+     * This buffer accounts for the padding added during link hover, accommodating one additional line height.
+     * We need this to account for the additional card height when a hovered submenu text link wraps to the next line,
+     * as otherwise the submenu would extend beyond the viewport's bottom edge and flip above the menu item.
+     */
+    const SINGLE_LINE_HEIGHT_BUFFER = 12;
+    const doesSubmenuFitWithinViewportBelowMenuItem = entry.boundingClientRect.height + (props.isMenuOpen ? menuItemTop : menuItemBottom) + SINGLE_LINE_HEIGHT_BUFFER > window.innerHeight;
+    // if the submenu does not fit at the bottom of the viewport (below the menu item)
+    if (doesSubmenuFitWithinViewportBelowMenuItem) {
+      setIsSubmenuAboveMenuItem(true);
+      setSubmenuVerticalPosition(window.innerHeight - (props.isMenuOpen ? menuItemBottom : menuItemTop));
+      // show the submenu above the menu item
+    } else {
+      setIsSubmenuAboveMenuItem(false);
+      setSubmenuVerticalPosition(props.isMenuOpen ? menuItemTop : menuItemBottom);
+    }
+  }, [menuItemIdentifier, props.isMenuOpen]);
+  react$1.useLayoutEffect(() => {
+    observerRef.current = new IntersectionObserver(callbackFn, {
+      rootMargin: '-100% 0px 0px 0px' // we want to observe if the submenu crosses the bottom line of the viewport - therefore we set the root element top margin to -100% of the viewport height
+    });
+    return () => observerRef.current?.disconnect();
+  }, [callbackFn, props.isMenuOpen]);
+  react$1.useLayoutEffect(() => {
+    const currentSubmenuRef = submenuRef.current;
+    const observer = observerRef.current;
+    if (!currentSubmenuRef) return;
+    if (observer && currentSubmenuRef) {
+      observer.observe(currentSubmenuRef);
+    }
+    setIsSubmenuFocused(false);
+    return () => observer?.disconnect();
+  }, [menuItemIdentifier, props.isMenuOpen, props.handleToggleItem, callbackFn]);
+  const isMainMenuRouteActive = Boolean(reactRouterDom.matchPath(props.location.pathname, {
+    path: `/${props.projectKey}/${props.menu.uriPath}`,
+    exact: false,
+    strict: false
+  }));
+  react$1.useEffect(() => {
+    // On first render, check which menu is active for the current application and expand
+    // the submenu automatically unless the all navbar is collapsed or there are no submenu links.
+    if (props.isMenuOpen && isMainMenuRouteActive && hasSubmenu) {
+      props.handleToggleItem();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.isMenuOpen]); // <-- (re)run this only when the all menu expands
+
+  const namesOfMenuVisibilitiesOfAllSubmenus = hasSubmenu ? getMenuVisibilitiesOfSubmenus(props.menu) : getMenuVisibilityOfMainmenu(props.menu);
+  const handleKeyDown = e => {
+    const currentlyFocusedItem = submenuRef.current?.querySelector(':focus');
+    if (e.key === 'Enter') {
+      setIsSubmenuFocused(true);
+      if (!currentlyFocusedItem) {
+        submenuRef.current?.querySelector('a')?.focus();
+      }
+    }
+  };
+  return jsxRuntime.jsx(RestrictedMenuItem, {
+    keyOfMenuItem: props.menu.key,
+    featureToggle: props.menu.featureToggle ?? undefined,
+    permissions: props.menu.permissions,
+    actionRights: props.menu.actionRights ?? undefined,
+    dataFences: props.menu.dataFences ?? undefined,
+    projectPermissions: props.projectPermissions,
+    menuVisibilities: props.menuVisibilities,
+    namesOfMenuVisibilities: namesOfMenuVisibilitiesOfAllSubmenus,
+    children: jsxRuntime.jsxs(MenuItem$1, {
+      hasSubmenu: hasSubmenu,
+      isActive: props.isActive,
+      isMainMenuRouteActive: isMainMenuRouteActive,
+      isMenuOpen: props.isMenuOpen,
+      onClick: props.handleToggleItem,
+      onKeyDown: handleKeyDown,
+      onMouseEnter: props.handleToggleItem,
+      onMouseLeave: props.shouldCloseMenuFly,
+      onMouseMove: props.onMouseMove,
+      identifier: menuItemIdentifier,
+      children: [jsxRuntime.jsx(MenuItemLink, {
+        linkTo: `/${props.projectKey}/${props.menu.uriPath}`,
+        useFullRedirectsForLinks: props.useFullRedirectsForLinks,
+        onClick: props.onMenuItemClick,
+        children: jsxRuntime.jsx(ItemContainer, {
+          labelAllLocales: props.menu.labelAllLocales,
+          defaultLabel: props.menu.defaultLabel,
+          applicationLocale: props.applicationLocale,
+          icon: props.menu.icon,
+          isMenuOpen: props.isMenuOpen
+        })
+      }), jsxRuntime.jsxs(MenuGroup, {
+        id: `group-${props.menu.key}`,
+        level: 2,
+        isActive: props.isActive,
+        isExpanded: props.isMenuOpen,
+        hasSubmenu: hasSubmenu,
+        submenuVerticalPosition: submenuVerticalPosition,
+        isSubmenuAboveMenuItem: isSubmenuAboveMenuItem,
+        ref: submenuRef,
+        children: [!props.isMenuOpen && jsxRuntime.jsx(TooltipContainer, {
+          alignsAgainstBottom: isSubmenuAboveMenuItem,
+          children: jsxRuntime.jsx(Tooltip, {
+            "aria-owns": `group-${props.menu.key}`,
+            role: "tooltip",
+            children: jsxRuntime.jsx(MenuLabel, {
+              labelAllLocales: props.menu.labelAllLocales,
+              defaultLabel: props.menu.defaultLabel,
+              applicationLocale: props.applicationLocale
+            })
+          })
+        }), hasSubmenu ? _mapInstanceProperty__default["default"](_context3 = props.menu.submenu).call(_context3, submenu => jsxRuntime.jsx(RestrictedMenuItem, {
+          keyOfMenuItem: submenu.key,
+          featureToggle: submenu.featureToggle ?? undefined,
+          permissions: submenu.permissions,
+          actionRights: submenu.actionRights ?? undefined,
+          dataFences: submenu.dataFences ?? undefined,
+          projectPermissions: props.projectPermissions,
+          menuVisibilities: props.menuVisibilities,
+          namesOfMenuVisibilities: submenu.menuVisibility ? [submenu.menuVisibility] : undefined,
+          children: jsxRuntime.jsx(SublistItem, {
+            isActive: getIsSubmenuRouteActive(submenu.uriPath, props),
+            children: jsxRuntime.jsx(Text, {
+              children: jsxRuntime.jsx(MenuItemLink, {
+                linkTo: `/${props.projectKey}/${submenu.uriPath}`
+                // We want to use an exact matching strategy to avoid multiple
+                // links matching sub-routes.
+                ,
+                exactMatch: true,
+                useFullRedirectsForLinks: props.useFullRedirectsForLinks,
+                onClick: props.onMenuItemClick,
+                isSubmenuLink: true,
+                isSubmenuFocused: isSubmenuFocused,
+                children: jsxRuntime.jsx(MenuLabel, {
+                  labelAllLocales: submenu.labelAllLocales,
+                  defaultLabel: submenu.defaultLabel,
+                  applicationLocale: props.applicationLocale
+                })
+              })
+            })
+          })
+        }, `${props.menu.key}-submenu-${submenu.key}`)) : null, jsxRuntime.jsx(SafeArea, {
+          ref: submenuSafeAreaRef
+        })]
+      })]
+    })
+  }, props.menu.key);
+};
+ApplicationMenu.propTypes = {};
+ApplicationMenu.displayName = 'ApplicationMenu';
+const NavBar = props => {
+  const _useNavbarStateManage = useNavbarStateManager({
+      environment: props.environment,
+      project: props.project
+    }),
+    navBarNode = _useNavbarStateManage.navBarNode,
+    isMenuOpen = _useNavbarStateManage.isMenuOpen,
+    isExpanderVisible = _useNavbarStateManage.isExpanderVisible,
+    activeItemIndex = _useNavbarStateManage.activeItemIndex,
+    mousePosition = _useNavbarStateManage.mousePosition,
+    handleToggleItem = _useNavbarStateManage.handleToggleItem,
+    handleToggleMenu = _useNavbarStateManage.handleToggleMenu,
+    shouldCloseMenuFly = _useNavbarStateManage.shouldCloseMenuFly,
+    allApplicationsNavbarMenuGroups = _useNavbarStateManage.allApplicationsNavbarMenuGroups,
+    getMousePosition = _useNavbarStateManage.getMousePosition;
+  const useFullRedirectsForLinks = Boolean(props.environment.useFullRedirectsForLinks);
+  const location = reactRouterDom.useLocation();
+  const projectPermissions = react$1.useMemo(() => ({
+    permissions: applicationShellConnectors.normalizeAllAppliedPermissions(props.project?.allPermissionsForAllApplications.allAppliedPermissions),
+    actionRights: applicationShellConnectors.normalizeAllAppliedActionRights(props.project?.allPermissionsForAllApplications.allAppliedActionRights),
+    dataFences: applicationShellConnectors.normalizeAllAppliedDataFences(props.project?.allPermissionsForAllApplications.allAppliedDataFences)
+  }), [props.project]);
+  const menuVisibilities = react$1.useMemo(() => applicationShellConnectors.normalizeAllAppliedMenuVisibilities(props.project?.allPermissionsForAllApplications.allAppliedMenuVisibilities), [props.project]);
+  const applicationLocale = props.applicationLocale;
+
+  // Render the loading navbar as long as all the data
+  // hasn't been loaded, or if the project does not exist.
+  if (props.isLoading || typeof applicationLocale === 'undefined') {
+    return jsxRuntime.jsx(NavBarSkeleton, {
+      isExpanded: isMenuOpen
+    });
+  }
+  return jsxRuntime.jsxs(NavBarLayout$1, {
+    ref: navBarNode,
+    children: [jsxRuntime.jsxs(NavigationHeader, {
+      children: [jsxRuntime.jsx(IconWrapper, {
+        children: jsxRuntime.jsx(Icon, {
+          children: jsxRuntime.jsx("img", {
+            src: LogoSVG__default["default"],
+            width: "100%",
+            alt: "Logo"
+          })
+        })
+      }), isMenuOpen ? jsxRuntime.jsx(HeaderTitle, {
+        children: "Merchant Center"
+      }) : null]
+    }), jsxRuntime.jsxs(MenuGroup, {
+      id: "main",
+      level: 1,
+      children: [jsxRuntime.jsx(ScrollableMenu, {
+        children: jsxRuntime.jsx(Spacings__default["default"].Stack, {
+          scale: "l",
+          children: _mapInstanceProperty__default["default"](allApplicationsNavbarMenuGroups).call(allApplicationsNavbarMenuGroups, navbarMenuGroup => {
+            var _context4;
+            return jsxRuntime.jsx("div", {
+              children: _mapInstanceProperty__default["default"](_context4 = navbarMenuGroup.items).call(_context4, menu => {
+                const menuType = 'scrollable';
+                const itemIndex = `${menuType}-${menu.key}`;
+                return jsxRuntime.jsx(ApplicationMenu, {
+                  location: location,
+                  menu: menu,
+                  isActive: activeItemIndex === itemIndex,
+                  handleToggleItem: () => handleToggleItem(itemIndex),
+                  isMenuOpen: isMenuOpen,
+                  shouldCloseMenuFly: shouldCloseMenuFly,
+                  projectPermissions: projectPermissions,
+                  menuVisibilities: menuVisibilities,
+                  applicationLocale: applicationLocale,
+                  projectKey: props.projectKey,
+                  useFullRedirectsForLinks: useFullRedirectsForLinks,
+                  onMenuItemClick: props.onMenuItemClick,
+                  onMouseMove: e => getMousePosition(e, itemIndex),
+                  mousePosition: mousePosition
+                }, menu.key);
+              })
+            }, navbarMenuGroup.key);
+          })
+        })
+      }), jsxRuntime.jsxs(FixedMenu, {
+        children: [jsxRuntime.jsx(SupportMenu, {
+          children: jsxRuntime.jsxs(MenuItem$1, {
+            hasSubmenu: false,
+            isActive: false,
+            isMenuOpen: isMenuOpen,
+            onClick: () => {
+              handleToggleItem('fixed-support');
+            },
+            onMouseEnter: isMenuOpen ? undefined : () => handleToggleItem('fixed-support'),
+            onMouseLeave: isMenuOpen ? undefined : shouldCloseMenuFly,
+            children: [!isMenuOpen && jsxRuntime.jsx(SupportMenuTooltipContainer, {
+              children: jsxRuntime.jsx(Tooltip, {
+                role: "tooltip",
+                children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages['NavBar.MCSupport.title']))
+              })
+            }), jsxRuntime.jsx(TextLink, {
+              href: constants.SUPPORT_PORTAL_URL,
+              rel: "noopener noreferrer",
+              target: "_blank",
+              children: jsxRuntime.jsxs(ItemIconText, {
+                children: [jsxRuntime.jsx(IconWrapper, {
+                  children: jsxRuntime.jsx(Icon, {
+                    className: "icon",
+                    children: jsxRuntime.jsx(icons.SupportIcon, {
+                      size: "scale"
+                    })
+                  })
+                }), isMenuOpen ? jsxRuntime.jsx(Title, {
+                  children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages['NavBar.MCSupport.title']))
+                }) : null]
+              })
+            })]
+          })
+        }), jsxRuntime.jsx(MenuExpander, {
+          isVisible: isExpanderVisible,
+          onClick: handleToggleMenu,
+          isMenuOpen: isMenuOpen
+        })]
+      })]
+    })]
+  });
+};
+NavBar.propTypes = {};
+NavBar.displayName = 'NavBar';
+
+exports.ApplicationMenu = ApplicationMenu;
+exports["default"] = NavBar;