@commercetools-frontend/application-shell 21.3.2 → 21.3.5

package/dist/{application-entry-point-575996c4.cjs.dev.js → application-entry-point-2fa512ec.cjs.dev.js}

@@ -22,7 +22,7 @@ var omitEmpty = require('omit-empty-es');
 var notifications = require('@commercetools-frontend/notifications');
 var sdk = require('@commercetools-frontend/sdk');
 var constants = require('@commercetools-frontend/constants');
-var constants$1 = require('./constants-fdbe0e9d.cjs.dev.js');
+var constants$1 = require('./constants-0b2cadbb.cjs.dev.js');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
@@ -101,7 +101,7 @@ var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var invariant__default = /*#__PURE__*/_interopDefault(invariant);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.2";
+var version = "21.3.5";
 
 var isAddNotificationErrorAction = function isAddNotificationErrorAction(action) {
   var errorAction = action;

package/dist/{application-entry-point-f21c8316.cjs.prod.js → application-entry-point-dae0d1ac.cjs.prod.js}

@@ -22,7 +22,7 @@ var omitEmpty = require('omit-empty-es');
 var notifications = require('@commercetools-frontend/notifications');
 var sdk = require('@commercetools-frontend/sdk');
 var constants = require('@commercetools-frontend/constants');
-var constants$1 = require('./constants-745aeeca.cjs.prod.js');
+var constants$1 = require('./constants-9710f983.cjs.prod.js');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
@@ -100,7 +100,7 @@ var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var invariant__default = /*#__PURE__*/_interopDefault(invariant);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.2";
+var version = "21.3.5";
 
 var isAddNotificationErrorAction = function isAddNotificationErrorAction(action) {
   var errorAction = action;

package/dist/{application-entry-point-bad42f46.esm.js → application-entry-point-f7f932ac.esm.js}

@@ -20,7 +20,7 @@ import omitEmpty from 'omit-empty-es';
 import { ADD_NOTIFICATION, removeNotification, REMOVE_NOTIFICATION, reducer, middleware } from '@commercetools-frontend/notifications';
 import { createMiddleware } from '@commercetools-frontend/sdk';
 import { HIDE_ALL_PAGE_NOTIFICATIONS, NOTIFICATION_KINDS_PAGE, SHOW_LOADING, HIDE_LOADING, GRAPHQL_TARGETS, STATUS_CODES, LOGOUT_REASONS } from '@commercetools-frontend/constants';
-import { S as STORAGE_KEYS, L as LOGIN_STRATEGY_OIDC, c as SUPPORTED_HEADERS } from './constants-33a16227.esm.js';
+import { S as STORAGE_KEYS, L as LOGIN_STRATEGY_OIDC, c as SUPPORTED_HEADERS } from './constants-6f8e0d87.esm.js';
 import { selectPageNotifications } from '@commercetools-frontend/react-notifications';
 import _startsWithInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
 import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
@@ -60,7 +60,7 @@ import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/appli
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.2";
+var version = "21.3.5";
 
 var isAddNotificationErrorAction = function isAddNotificationErrorAction(action) {
   var errorAction = action;

package/dist/commercetools-frontend-application-shell.cjs.dev.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var applicationEntryPoint = require('./application-entry-point-575996c4.cjs.dev.js');
-var dist_commercetoolsFrontendApplicationShell = require('./index-7809bd4b.cjs.dev.js');
+var applicationEntryPoint = require('./application-entry-point-2fa512ec.cjs.dev.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-93c8f750.cjs.dev.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 require('uuid');
 require('@babel/runtime-corejs3/core-js-stable/url');
@@ -31,7 +31,7 @@ require('omit-empty-es');
 require('@commercetools-frontend/notifications');
 require('@commercetools-frontend/sdk');
 require('@commercetools-frontend/constants');
-require('./constants-fdbe0e9d.cjs.dev.js');
+require('./constants-0b2cadbb.cjs.dev.js');
 require('@commercetools-frontend/react-notifications');
 require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 require('@babel/runtime-corejs3/core-js-stable/instance/includes');
@@ -73,7 +73,7 @@ require('perfume.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
 require('lodash/camelCase');
 require('@apollo/client/react');
-require('./oidc-dc44ab6f.cjs.dev.js');
+require('./oidc-137df8f6.cjs.dev.js');
 require('qss');
 require('jwt-decode');
 require('@commercetools-frontend/assets/images/locked-diamond.svg');

package/dist/commercetools-frontend-application-shell.cjs.prod.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var applicationEntryPoint = require('./application-entry-point-f21c8316.cjs.prod.js');
-var dist_commercetoolsFrontendApplicationShell = require('./index-655dc306.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-dae0d1ac.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-32cd533b.cjs.prod.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 require('uuid');
 require('@babel/runtime-corejs3/core-js-stable/url');
@@ -31,7 +31,7 @@ require('omit-empty-es');
 require('@commercetools-frontend/notifications');
 require('@commercetools-frontend/sdk');
 require('@commercetools-frontend/constants');
-require('./constants-745aeeca.cjs.prod.js');
+require('./constants-9710f983.cjs.prod.js');
 require('@commercetools-frontend/react-notifications');
 require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 require('@babel/runtime-corejs3/core-js-stable/instance/includes');
@@ -73,7 +73,7 @@ require('perfume.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
 require('lodash/camelCase');
 require('@apollo/client/react');
-require('./oidc-69515812.cjs.prod.js');
+require('./oidc-ebdbe61e.cjs.prod.js');
 require('qss');
 require('jwt-decode');
 require('@commercetools-frontend/assets/images/locked-diamond.svg');

package/dist/commercetools-frontend-application-shell.esm.js

@@ -1,5 +1,5 @@
-export { p as RouteCatchAll, q as applyDefaultMiddlewares, f as createApolloClient, n as selectProjectKeyFromUrl, t as selectUserId, v as version } from './application-entry-point-bad42f46.esm.js';
-export { A as ApplicationShell, a as ApplicationShellProvider, C as ConfigureIntlProvider, G as GtmContext, b as GtmUserLogoutTracker, I as InjectReducers, S as SetupFlopFlipProvider, c as createApolloContextForProxyForwardTo, s as setupGlobalErrorListener, d as useMcLazyQuery, e as useMcMutation, u as useMcQuery } from './index-6ed51d04.esm.js';
+export { p as RouteCatchAll, q as applyDefaultMiddlewares, f as createApolloClient, n as selectProjectKeyFromUrl, t as selectUserId, v as version } from './application-entry-point-f7f932ac.esm.js';
+export { A as ApplicationShell, a as ApplicationShellProvider, C as ConfigureIntlProvider, G as GtmContext, b as GtmUserLogoutTracker, I as InjectReducers, S as SetupFlopFlipProvider, c as createApolloContextForProxyForwardTo, s as setupGlobalErrorListener, d as useMcLazyQuery, e as useMcMutation, u as useMcQuery } from './index-82d5b1c3.esm.js';
 import '@babel/runtime-corejs3/core-js-stable/instance/filter';
 import 'uuid';
 import '@babel/runtime-corejs3/core-js-stable/url';
@@ -27,7 +27,7 @@ import 'omit-empty-es';
 import '@commercetools-frontend/notifications';
 import '@commercetools-frontend/sdk';
 import '@commercetools-frontend/constants';
-import './constants-33a16227.esm.js';
+import './constants-6f8e0d87.esm.js';
 import '@commercetools-frontend/react-notifications';
 import '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
 import '@babel/runtime-corejs3/core-js-stable/instance/includes';
@@ -69,7 +69,7 @@ import 'perfume.js';
 import '@babel/runtime-corejs3/core-js-stable/instance/reverse';
 import 'lodash/camelCase';
 import '@apollo/client/react';
-import './oidc-415a3ef6.esm.js';
+import './oidc-ad6058e2.esm.js';
 import 'qss';
 import 'jwt-decode';
 import '@commercetools-frontend/assets/images/locked-diamond.svg';

package/dist/{constants-745aeeca.cjs.prod.js → constants-0b2cadbb.cjs.dev.js}

@@ -1,5 +1,10 @@
 'use strict';
 
+var DIMENSIONS = {
+  header: '43px',
+  navMenu: '64px',
+  navMenuExpanded: '200px'
+};
 var SUPPORTED_HEADERS = {
   ACCEPT_VERSION: 'Accept-version',
   AUTHORIZATION: 'Authorization',
@@ -46,6 +51,7 @@ var OIDC_CLAIMS = {
 };
 
 exports.CONTAINERS = CONTAINERS;
+exports.DIMENSIONS = DIMENSIONS;
 exports.LOGIN_STRATEGY_OIDC = LOGIN_STRATEGY_OIDC;
 exports.OIDC_CLAIMS = OIDC_CLAIMS;
 exports.OIDC_RESPONSE_TYPES = OIDC_RESPONSE_TYPES;

package/dist/{constants-33a16227.esm.js → constants-6f8e0d87.esm.js}

@@ -1,3 +1,8 @@
+var DIMENSIONS = {
+  header: '43px',
+  navMenu: '64px',
+  navMenuExpanded: '200px'
+};
 var SUPPORTED_HEADERS = {
   ACCEPT_VERSION: 'Accept-version',
   AUTHORIZATION: 'Authorization',
@@ -43,4 +48,4 @@ var OIDC_CLAIMS = {
   MANAGE: 'manage'
 };
 
-export { CONTAINERS as C, LOGIN_STRATEGY_OIDC as L, OIDC_CLAIMS as O, STORAGE_KEYS as S, SUSPENSION_REASONS as a, OIDC_RESPONSE_TYPES as b, SUPPORTED_HEADERS as c };
+export { CONTAINERS as C, DIMENSIONS as D, LOGIN_STRATEGY_OIDC as L, OIDC_CLAIMS as O, STORAGE_KEYS as S, SUSPENSION_REASONS as a, OIDC_RESPONSE_TYPES as b, SUPPORTED_HEADERS as c };

package/dist/{constants-fdbe0e9d.cjs.dev.js → constants-9710f983.cjs.prod.js}

@@ -1,5 +1,10 @@
 'use strict';
 
+var DIMENSIONS = {
+  header: '43px',
+  navMenu: '64px',
+  navMenuExpanded: '200px'
+};
 var SUPPORTED_HEADERS = {
   ACCEPT_VERSION: 'Accept-version',
   AUTHORIZATION: 'Authorization',
@@ -46,6 +51,7 @@ var OIDC_CLAIMS = {
 };
 
 exports.CONTAINERS = CONTAINERS;
+exports.DIMENSIONS = DIMENSIONS;
 exports.LOGIN_STRATEGY_OIDC = LOGIN_STRATEGY_OIDC;
 exports.OIDC_CLAIMS = OIDC_CLAIMS;
 exports.OIDC_RESPONSE_TYPES = OIDC_RESPONSE_TYPES;

package/dist/declarations/src/components/application-shell/application-shell.d.ts

@@ -4,7 +4,7 @@ import type { NormalizedCacheObject } from '@apollo/client';
 import type { TApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n';
 import type { TrackingList } from '../../utils/gtm';
-import { ReactNode, SyntheticEvent } from 'react';
+import { type ReactNode, type SyntheticEvent } from 'react';
 import { ApolloClient } from '@apollo/client';
 declare type Props<AdditionalEnvironmentProperties extends {}> = {
     apolloClient?: ApolloClient<NormalizedCacheObject>;

package/dist/declarations/src/components/navbar/tracking-events.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    readonly collapseMainNav: {
+        readonly action: "CollapseMainNav";
+        readonly category: "Main-Navigation";
+        readonly label: "Collapse Main Navigation";
+    };
+    readonly expandMainNav: {
+        readonly action: "ExpandMainNav";
+        readonly category: "Main-Navigation";
+        readonly label: "Expand Main Navigation";
+    };
+    readonly goToSupport: {
+        readonly action: "GoToSupport";
+        readonly category: "Main-Navigation";
+        readonly label: "Go to Support";
+    };
+};
+export default _default;

package/dist/declarations/src/constants.d.ts

@@ -1,3 +1,8 @@
+export declare const DIMENSIONS: {
+    readonly header: "43px";
+    readonly navMenu: "64px";
+    readonly navMenuExpanded: "200px";
+};
 export declare const SUPPORTED_HEADERS: {
     readonly ACCEPT_VERSION: "Accept-version";
     readonly AUTHORIZATION: "Authorization";

package/dist/{index-655dc306.cjs.prod.js → index-32cd533b.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var applicationEntryPoint = require('./application-entry-point-f21c8316.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-dae0d1ac.cjs.prod.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 var _pt = require('prop-types');
@@ -24,8 +24,8 @@ var applicationShellConnectors = require('@commercetools-frontend/application-sh
 var applicationComponents = require('@commercetools-frontend/application-components');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var i18n = require('@commercetools-frontend/i18n');
+var constants = require('./constants-9710f983.cjs.prod.js');
 var uuid = require('uuid');
-var constants = require('./constants-745aeeca.cjs.prod.js');
 var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
@@ -38,7 +38,7 @@ var reactRedux = require('react-redux');
 var history = require('@commercetools-frontend/browser-history');
 var reactIntl = require('react-intl');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
-var oidc = require('./oidc-69515812.cjs.prod.js');
+var oidc = require('./oidc-ebdbe61e.cjs.prod.js');
 var qss = require('qss');
 var jwtDecode = require('jwt-decode');
 var FailedAuthenticationSVG = require('@commercetools-frontend/assets/images/locked-diamond.svg');
@@ -1406,7 +1406,7 @@ FetchProject.displayName = 'FetchProject';
 
 function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys$9(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys$9(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$9(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$9(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var FetchApplicationsMenu = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchApplicationsMenu" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "applicationsMenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "navBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "shouldRenderDivider" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "icon" }, 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: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "submenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, 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: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }] } }] } }, { kind: "Field", name: { kind: "Name", value: "appBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, 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: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 849, source: { body: "query FetchApplicationsMenu {\n  applicationsMenu {\n    navBar {\n      shouldRenderDivider\n      key\n      uriPath\n      icon\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      menuVisibility\n      permissions\n      dataFences {\n        group\n        name\n        type\n      }\n      actionRights {\n        group\n        name\n      }\n      submenu {\n        key\n        uriPath\n        labelAllLocales {\n          locale\n          value\n        }\n        featureToggle\n        menuVisibility\n        permissions\n        actionRights {\n          group\n          name\n        }\n        dataFences {\n          group\n          name\n          type\n        }\n      }\n    }\n    appBar {\n      key\n      uriPath\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      permissions\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 var supportedLocales = ['en', 'de', 'es', 'fr-FR', 'zh-CN', 'ja'];
 var defaultApiUrl$1 = window.location.origin;
@@ -1471,19 +1471,12 @@ var mapApplicationMenuConfigToGraqhQLQueryResult = function mapApplicationMenuCo
         // @ts-ignore: not defined in schema, as it's only used internally.
         dataFences: (_menuLinks$dataFences = menuLinks.dataFences) !== null && _menuLinks$dataFences !== void 0 ? _menuLinks$dataFences : null,
         submenu: _mapInstanceProperty__default["default"](_context = menuLinks.submenuLinks).call(_context, function (submenuLink) {
-          var _context2, _context3, _submenuLink$featureT, _submenuLink$menuVisi, _submenuLink$actionRi, _submenuLink$dataFenc;
+          var _context2, _submenuLink$featureT, _submenuLink$menuVisi, _submenuLink$actionRi, _submenuLink$dataFenc;
 
           return {
             __typename: 'BaseMenu',
             key: _concatInstanceProperty__default["default"](_context2 = "".concat(entryPointUriPath, "-")).call(_context2, submenuLink.uriPath),
-            // The `uriPath` of each submenu link is supposed to be defined relative
-            // to the entry point URI path.
-            // However, when rendering the link, we need to provide the full uri path.
-            // Special case when the value is `/`: it means that the link is supposed to be
-            // treated the same as the entry point uri path. In this case, the return value
-            // should not contain any unnecessary trailing slash and therefore we return the
-            // main value `entryPointUriPath`.
-            uriPath: submenuLink.uriPath === '/' ? entryPointUriPath : _concatInstanceProperty__default["default"](_context3 = "".concat(entryPointUriPath, "/")).call(_context3, submenuLink.uriPath),
+            uriPath: submenuLink.uriPath,
             labelAllLocales: mapLabelAllLocalesWithDefaults(submenuLink.labelAllLocales, submenuLink.defaultLabel),
             permissions: submenuLink.permissions,
             // @ts-ignore: not defined in schema, as it's only used internally.
@@ -2183,7 +2176,7 @@ var AppBar = function AppBar(props) {
 
   var previousProjectKey = getPreviousProjectKey((_props$user$defaultPr = (_props$user = props.user) === null || _props$user === void 0 ? void 0 : _props$user.defaultProjectKey) !== null && _props$user$defaultPr !== void 0 ? _props$user$defaultPr : undefined);
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react$2.css("box-shadow:", designSystem.customProperties.shadow1, ";min-height:43px;position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
+    css: /*#__PURE__*/react$2.css("background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow1, ";min-height:", constants.DIMENSIONS.header, ";position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
     "data-test": "top-navigation",
     children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       children: [jsxRuntime.jsx("div", {
@@ -2237,7 +2230,7 @@ var AppBar = function AppBar(props) {
             });
           }()]
         }), jsxRuntime.jsx("div", {
-          css: /*#__PURE__*/react$2.css("border-left:1px ", designSystem.customProperties.colorNeutral90, " solid;height:43px;" + ("" ), "" )
+          css: /*#__PURE__*/react$2.css("border-left:1px ", designSystem.customProperties.colorNeutral90, " solid;height:", constants.DIMENSIONS.header, ";" + ("" ), "" )
         }), props.user ? jsxRuntime.jsx(UserSettingsMenu, {
           language: props.user.language,
           firstName: props.user.firstName,
@@ -2332,19 +2325,19 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
 LocaleSwitcher.propTypes = {};
 
 var ProjectNotFound = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-found-bff932dd.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-found-998fdc8e.cjs.prod.js'
   /* webpackChunkName: "project-not-found" */
   ); });
 });
 
 var ProjectExpired = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-expired-78a70097.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-expired-59cb3714.cjs.prod.js'
   /* webpackChunkName: "project-expired" */
   ); });
 });
 
 var ProjectNotInitialized = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-initialized-64ac7587.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-initialized-aca1e34f.cjs.prod.js'
   /* webpackChunkName: "project-not-initialized" */
   ); });
 });
@@ -2391,7 +2384,7 @@ var RedirectToProjectCreate = function RedirectToProjectCreate() {
 RedirectToProjectCreate.displayName = 'RedirectToProjectCreate';
 
 var ProjectSuspended = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-suspended-540da552.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-suspended-e5827cf6.cjs.prod.js'
   /* webpackChunkName: "project-suspended" */
   ); });
 });
@@ -3007,6 +3000,24 @@ var useNavbarStateManager = function useNavbarStateManager(props) {
   });
 };
 
+var trackingEvents$1 = {
+  collapseMainNav: {
+    action: 'CollapseMainNav',
+    category: 'Main-Navigation',
+    label: 'Collapse Main Navigation'
+  },
+  expandMainNav: {
+    action: 'ExpandMainNav',
+    category: 'Main-Navigation',
+    label: 'Expand Main Navigation'
+  },
+  goToSupport: {
+    action: 'GoToSupport',
+    category: 'Main-Navigation',
+    label: 'Go to Support'
+  }
+};
+
 var _excluded = ["icon"];
 
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -3127,10 +3138,18 @@ IconSwitcher.propTypes = {};
 IconSwitcher.displayName = 'IconSwitcher';
 
 var MenuExpander = function MenuExpander(props) {
+  var gtmTracking = react.useContext(GtmContext);
   return jsxRuntime.jsx("li", {
     className: classnames__default["default"](styles['list-item'], styles.expander, _defineProperty({}, styles.hidden, !props.isVisible)),
     children: jsxRuntime.jsx("div", {
-      onClick: props.onClick,
+      onClick: function onClick(event) {
+        var _trackingEvents = trackingEvents$1[props.isMenuOpen ? 'collapseMainNav' : 'expandMainNav'],
+            action = _trackingEvents.action,
+            category = _trackingEvents.category,
+            label = _trackingEvents.label;
+        gtmTracking.track(action, category, label);
+        props.onClick(event);
+      },
       className: styles['expand-icon'],
       "data-testid": "menu-expander",
       children: jsxRuntime.jsx(icons.BackIcon, {
@@ -3464,6 +3483,7 @@ var NavBar = function NavBar(props) {
 
   var useFullRedirectsForLinks = Boolean(props.environment.useFullRedirectsForLinks);
   var location = reactRouterDom.useLocation();
+  var gtmTracking = react.useContext(GtmContext);
   var projectPermissions = react.useMemo(function () {
     var _props$project, _props$project2, _props$project3;
 
@@ -3501,7 +3521,8 @@ var NavBar = function NavBar(props) {
             menuVisibilities: menuVisibilities,
             applicationLocale: props.applicationLocale,
             projectKey: props.projectKey,
-            useFullRedirectsForLinks: useFullRedirectsForLinks
+            useFullRedirectsForLinks: useFullRedirectsForLinks,
+            onMenuItemClick: props.onMenuItemClick
           }, menu.key);
         })
       }), jsxRuntime.jsxs("div", {
@@ -3511,6 +3532,8 @@ var NavBar = function NavBar(props) {
           isActive: false,
           isMenuOpen: isMenuOpen,
           onClick: function onClick() {
+            gtmTracking.track(trackingEvents$1.goToSupport.action, trackingEvents$1.goToSupport.category, trackingEvents$1.goToSupport.label);
+
             _handleToggleItem('fixed-support');
           },
           onMouseEnter: isMenuOpen ? undefined : function () {
@@ -3537,7 +3560,8 @@ var NavBar = function NavBar(props) {
           })
         }), jsxRuntime.jsx(MenuExpander, {
           isVisible: isExpanderVisible,
-          onClick: handleToggleMenu
+          onClick: handleToggleMenu,
+          isMenuOpen: isMenuOpen
         })]
       })]
     })
@@ -3606,7 +3630,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./quick-access-1d4f2411.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./quick-access-09abcedb.cjs.prod.js'
   /* webpackChunkName: "quick-access" */
   ); });
 });
@@ -3911,11 +3935,6 @@ var _ref5 = {
   styles: "grid-row:1;grid-column:1/3"
 } ;
 
-var _ref6 = {
-  name: "1gbbf0w",
-  styles: "height:100vh;display:grid;grid-template-rows:auto 43px 1fr;grid-template-columns:auto 1fr"
-} ;
-
 var RestrictedApplication = function RestrictedApplication(props) {
   var applicationEnvironment = applicationShellConnectors.useApplicationContext(function (context) {
     return context.environment;
@@ -3926,11 +3945,17 @@ var RestrictedApplication = function RestrictedApplication(props) {
   // ok-ish but we might want to look into a more performant solution.
 
   var location = reactRouterDom.useLocation();
+  var notificationsGlobalRef = react.useRef(null);
+  var notificationsPageRef = react.useRef(null);
+  var layoutRefs = react.useRef({
+    notificationsGlobalRef: notificationsGlobalRef,
+    notificationsPageRef: notificationsPageRef
+  });
   return jsxRuntime.jsx(FetchUser, {
-    children: function children(_ref7) {
-      var isLoadingUser = _ref7.isLoading,
-          user = _ref7.user,
-          error = _ref7.error;
+    children: function children(_ref6) {
+      var isLoadingUser = _ref6.isLoading,
+          user = _ref6.user,
+          error = _ref6.error;
 
       if (error) {
         // In case there is an unauthorized error, we redirect to the login page
@@ -3953,9 +3978,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
         return jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: userLocale,
           applicationMessages: props.applicationMessages,
-          children: function children(_ref8) {
-            var locale = _ref8.locale,
-                messages = _ref8.messages;
+          children: function children(_ref7) {
+            var locale = _ref7.locale,
+                messages = _ref7.messages;
             sentry.reportErrorToSentry(error, {});
             return jsxRuntime.jsx(ConfigureIntlProvider, {
               locale: locale,
@@ -3973,12 +3998,12 @@ var RestrictedApplication = function RestrictedApplication(props) {
         children: jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: user === null || user === void 0 ? void 0 : user.language,
           applicationMessages: props.applicationMessages,
-          children: function children(_ref9) {
+          children: function children(_ref8) {
             var _user$businessRole;
 
-            var isLoadingLocaleData = _ref9.isLoading,
-                locale = _ref9.locale,
-                messages = _ref9.messages;
+            var isLoadingLocaleData = _ref8.isLoading,
+                locale = _ref8.locale,
+                messages = _ref8.messages;
             return jsxRuntime.jsx(ConfigureIntlProvider // We do not want to pass the language as long as the locale data
             // is not loaded.
             , _objectSpread(_objectSpread({}, isLoadingLocaleData ? {} : {
@@ -4002,8 +4027,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                     userBusinessRole: (_user$businessRole = user === null || user === void 0 ? void 0 : user.businessRole) !== null && _user$businessRole !== void 0 ? _user$businessRole : undefined
                   }), jsxRuntime.jsxs("div", {
                     role: "application-layout",
-                    css: _ref6,
+                    css: /*#__PURE__*/react$2.css("height:100vh;display:grid;grid-template-rows:auto ", constants.DIMENSIONS.header, " 1fr;grid-template-columns:auto 1fr;" + ("" ), "" ),
                     children: [jsxRuntime.jsx("div", {
+                      ref: notificationsGlobalRef,
                       role: "global-notifications",
                       css: _ref5,
                       children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
@@ -4014,9 +4040,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                         if (!projectKeyFromUrl) return jsxRuntime.jsx(QuickAccessTrigger, {});
                         return jsxRuntime.jsx(FetchProject, {
                           projectKey: projectKeyFromUrl,
-                          children: function children(_ref10) {
-                            var isProjectLoading = _ref10.isLoading,
-                                project = _ref10.project;
+                          children: function children(_ref9) {
+                            var isProjectLoading = _ref9.isLoading,
+                                project = _ref9.project;
                             if (isProjectLoading || !project) return null; // when used outside of a project context,
                             // or when the project is expired or supsended
 
@@ -4024,9 +4050,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                             if (!shouldUseProjectContext) return jsxRuntime.jsx(QuickAccessTrigger, {});
                             return jsxRuntime.jsx(ProjectDataLocale, {
                               locales: project.languages,
-                              children: function children(_ref11) {
-                                var dataLocale = _ref11.locale,
-                                    setProjectDataLocale = _ref11.setProjectDataLocale;
+                              children: function children(_ref10) {
+                                var dataLocale = _ref10.locale,
+                                    setProjectDataLocale = _ref10.setProjectDataLocale;
                                 return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
                                   user: user,
                                   project: project,
@@ -4065,9 +4091,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                         if (!projectKeyFromUrl) return null;
                         return jsxRuntime.jsx(FetchProject, {
                           projectKey: projectKeyFromUrl,
-                          children: function children(_ref12) {
-                            var isLoadingProject = _ref12.isLoading,
-                                project = _ref12.project;
+                          children: function children(_ref11) {
+                            var isLoadingProject = _ref11.isLoading,
+                                project = _ref11.project;
                             // Render the loading navbar as long as all the data
                             // hasn't been loaded, or if the project does not exist.
                             if (isLoadingUser || isLoadingLocaleData || isLoadingProject || !locale || !project) return jsxRuntime.jsx(LoadingNavBar, {});
@@ -4093,13 +4119,22 @@ var RestrictedApplication = function RestrictedApplication(props) {
                       children: jsxRuntime.jsx(ApplicationLoader, {})
                     }) : jsxRuntime.jsxs(MainContainer, {
                       role: "main",
-                      children: [jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                        domain: constants$1.DOMAINS.PAGE
+                      children: [jsxRuntime.jsx("div", {
+                        ref: notificationsPageRef,
+                        children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
+                          domain: constants$1.DOMAINS.PAGE
+                        })
                       }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
                         domain: constants$1.DOMAINS.SIDE
                       }), jsxRuntime.jsxs("div", {
                         css: _ref2,
-                        children: [jsxRuntime.jsx(applicationComponents.PortalsContainer, {}), jsxRuntime.jsxs(reactRouterDom.Switch, {
+                        children: [jsxRuntime.jsx(applicationComponents.PortalsContainer // @ts-ignore
+                        , {
+                          ref: layoutRefs,
+                          offsetTop: constants.DIMENSIONS.header,
+                          offsetLeft: projectKeyFromUrl ? constants.DIMENSIONS.navMenu : '0px',
+                          offsetLeftOnExpandedMenu: projectKeyFromUrl ? constants.DIMENSIONS.navMenuExpanded : '0px'
+                        }), jsxRuntime.jsxs(reactRouterDom.Switch, {
                           children: [jsxRuntime.jsx(reactRouterDom.Redirect, {
                             from: "/profile",
                             to: "/account/profile"
@@ -4174,8 +4209,8 @@ var RestrictedApplication = function RestrictedApplication(props) {
 RestrictedApplication.displayName = 'RestrictedApplication';
 
 var _ref = {
-  name: "jq7s6j",
-  styles: "#app{height:100%;}.ReactModal__Body--open main{overflow:hidden;}"
+  name: "172jsbd",
+  styles: "#app{height:100%;}"
 } ;
 
 var ApplicationShell = function ApplicationShell(props) {
@@ -4195,8 +4230,8 @@ var ApplicationShell = function ApplicationShell(props) {
       environment: props.environment,
       trackingEventList: props.trackingEventList,
       applicationMessages: props.applicationMessages,
-      children: function children(_ref13) {
-        var isAuthenticated = _ref13.isAuthenticated;
+      children: function children(_ref12) {
+        var isAuthenticated = _ref12.isAuthenticated;
 
         if (isAuthenticated) {
           return jsxRuntime.jsxs(reactRouterDom.Switch, {