@commercetools-frontend/application-shell 21.6.0 → 21.8.1

package/dist/{index-de9e07d6.cjs.prod.js → index-6021fecc.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var applicationEntryPoint = require('./application-entry-point-6328a8cc.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-223805b2.cjs.prod.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 var _pt = require('prop-types');
@@ -24,7 +24,7 @@ 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 constants = require('./constants-f34da47c.cjs.prod.js');
 var uuid = require('uuid');
 var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -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-ebdbe61e.cjs.prod.js');
+var oidc = require('./oidc-82e151f9.cjs.prod.js');
 var qss = require('qss');
 var jwtDecode = require('jwt-decode');
 var FailedAuthenticationSVG = require('@commercetools-frontend/assets/images/locked-diamond.svg');
@@ -68,6 +68,7 @@ var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instan
 var Downshift = require('downshift');
 var reactBroadcast = require('@flopflip/react-broadcast');
 var Avatar = require('@commercetools-uikit/avatar');
+var AccessibleHidden = require('@commercetools-uikit/accessible-hidden');
 var client = require('@apollo/client');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var memoize = require('memoize-one');
@@ -136,6 +137,7 @@ var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceP
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
 var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
+var AccessibleHidden__default = /*#__PURE__*/_interopDefault(AccessibleHidden);
 var memoize__default = /*#__PURE__*/_interopDefault(memoize);
 var SelectInput__default = /*#__PURE__*/_interopDefault(SelectInput);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
@@ -173,7 +175,8 @@ var createApolloContextForProxyForwardTo = function createApolloContextForProxyF
     forwardToConfig: {
       version: 'v2',
       uri: proxyForwardTocontext.uri,
-      headers: proxyForwardTocontext.headers
+      headers: proxyForwardTocontext.headers,
+      audiencePolicy: proxyForwardTocontext.audiencePolicy || 'forward-url-full-path'
     },
     skipGraphQlTargetCheck: true
   };
@@ -1059,7 +1062,7 @@ var ApplicationLoader = function ApplicationLoader(props) {
 
 ApplicationLoader.displayName = 'ApplicationLoader';
 
-var messages$5 = reactIntl.defineMessages({
+var messages$6 = reactIntl.defineMessages({
   title: {
     id: 'ErrorApologizer.title',
     defaultMessage: 'Sorry! An unexpected error occured.'
@@ -1078,9 +1081,9 @@ var ErrorApologizer = function ErrorApologizer() {
   var intl = reactIntl.useIntl();
   return jsxRuntime.jsx(applicationComponents.MaintenancePageLayout, {
     imageSrc: UnexpectedErrorSVG__default["default"],
-    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$c({}, messages$5.title)),
-    label: intl.formatMessage(messages$5.title),
-    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$c({}, messages$5.notifiedTeam))
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$c({}, messages$6.title)),
+    label: intl.formatMessage(messages$6.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$c({}, messages$6.notifiedTeam))
   });
 };
 
@@ -1564,7 +1567,7 @@ function useApplicationsMenu(menuKey, config) {
   return;
 }
 
-var messages$4 = reactIntl.defineMessages({
+var messages$5 = reactIntl.defineMessages({
   support: {
     id: 'UserSettingsMenu.support',
     description: 'The label for Support',
@@ -1580,6 +1583,11 @@ var messages$4 = reactIntl.defineMessages({
     description: 'The label for privacy policy option',
     defaultMessage: 'Privacy Policy'
   },
+  menuLabel: {
+    id: 'UserSettingsMenu.menuLabel',
+    description: 'The label describing the menu',
+    defaultMessage: 'User settings menu'
+  },
   openMenuLabel: {
     id: 'UserSettingsMenu.openMenuLabel',
     description: 'The label when menu is closed and would be opened by a click',
@@ -1595,6 +1603,7 @@ var messages$4 = reactIntl.defineMessages({
 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 _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 MENU_LABEL_ID = 'user-menu-setting-menu-label';
 
 var UserAvatar = function UserAvatar(props) {
   var _useState = react.useState(false),
@@ -1773,7 +1782,7 @@ var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
         children: jsxRuntime.jsx(MenuItem$1, {
           children: jsxRuntime.jsx(Spacings__default["default"].Inset, {
             scale: "s",
-            children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$4.privacyPolicy))
+            children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$5.privacyPolicy))
           })
         })
       }), jsxRuntime.jsx("a", {
@@ -1791,7 +1800,7 @@ var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
         children: jsxRuntime.jsx(MenuItem$1, {
           children: jsxRuntime.jsx(Spacings__default["default"].Inset, {
             scale: "s",
-            children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$4.support))
+            children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$5.support))
           })
         })
       }), jsxRuntime.jsx(MenuItem$1, {
@@ -1806,7 +1815,7 @@ var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
         children: [jsxRuntime.jsx(MenuItem$1, {
           children: jsxRuntime.jsx(Spacings__default["default"].Inset, {
             scale: "s",
-            children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$4.logout))
+            children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$5.logout))
           })
         }), jsxRuntime.jsx("div", {
           tabIndex: 0,
@@ -1829,17 +1838,22 @@ var _ref$4 = {
 
 var UserSettingsMenu = function UserSettingsMenu(props) {
   var intl = reactIntl.useIntl();
-  return jsxRuntime.jsx("div", {
+  return jsxRuntime.jsxs("div", {
     "data-test": "user-settings-menu",
-    children: jsxRuntime.jsx(Downshift__default["default"], {
+    children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
+      children: jsxRuntime.jsx("span", {
+        id: MENU_LABEL_ID,
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$5.menuLabel))
+      })
+    }), jsxRuntime.jsx(Downshift__default["default"], {
       stateReducer: stateReducer,
+      labelId: MENU_LABEL_ID,
       children: function children(downshiftProps) {
         return jsxRuntime.jsxs("div", {
           children: [jsxRuntime.jsx("button", _objectSpread$9(_objectSpread$9({
-            role: "user-menu-toggle",
             css: _ref$4
           }, downshiftProps.getToggleButtonProps({
-            'aria-label': intl.formatMessage(downshiftProps.isOpen ? messages$4.closeMenuLabel : messages$4.openMenuLabel)
+            'aria-label': intl.formatMessage(downshiftProps.isOpen ? messages$5.closeMenuLabel : messages$5.openMenuLabel)
           })), {}, {
             children: jsxRuntime.jsx(UserAvatar, {
               firstName: props.firstName,
@@ -1851,17 +1865,17 @@ var UserSettingsMenu = function UserSettingsMenu(props) {
           }))]
         });
       }
-    })
+    })]
   });
 };
 
 UserSettingsMenu.displayName = 'UserSettingsMenu';
 
-var messages$3 = reactIntl.defineMessages({
-  projects: {
-    id: 'ProjectSwitcher.projects',
+var messages$4 = reactIntl.defineMessages({
+  projectsLabel: {
+    id: 'ProjectSwitcher.projectsLabel',
     description: 'The label for project dropdown switcher',
-    defaultMessage: 'Projects'
+    defaultMessage: 'Projects menu'
   },
   searchPlaceholder: {
     id: 'ProjectSwitcher.searchPlaceholder',
@@ -1891,6 +1905,7 @@ function ownKeys$8(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var ProjectsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchUserProjects" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "projects" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "suspension" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "expiry" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }] } }] } }] } }] } }], loc: { start: 0, end: 218, source: { body: "query FetchUserProjects {\n  user: me {\n    id\n    projects {\n      results {\n        name\n        key\n        suspension {\n          isActive\n        }\n        expiry {\n          isActive\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+var PROJECT_SWITCHER_LABEL_ID = 'project-switcher-label';
 
 var _ref4$1 = {
   name: "82a6rk",
@@ -1948,10 +1963,10 @@ var ProjectSwitcherOption = function ProjectSwitcherOption(props) {
         children: project.key
       }), project.suspension && project.suspension.isActive && jsxRuntime.jsx("div", {
         css: /*#__PURE__*/react$2.css("font-size:11px;color:", designSystem.customProperties.colorError, ";" + ("" ), "" ),
-        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages$3.suspended))
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages$4.suspended))
       }), project.expiry && project.expiry.isActive && jsxRuntime.jsx("div", {
         css: /*#__PURE__*/react$2.css("font-size:11px;color:", designSystem.customProperties.colorError, ";" + ("" ), "" ),
-        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages$3.expired))
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages$4.expired))
       })]
     })
   }));
@@ -1991,14 +2006,19 @@ var ProjectSwitcher = function ProjectSwitcher(props) {
       data = _useMcQuery.data;
 
   if (loading) return null;
-  return jsxRuntime.jsx("div", {
+  return jsxRuntime.jsxs("div", {
     css: _ref$3,
     "data-track-component": "ProjectSwitch",
     "data-track-event": "click",
-    children: jsxRuntime.jsx(SelectInput__default["default"], {
+    children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
+      children: jsxRuntime.jsx("span", {
+        id: PROJECT_SWITCHER_LABEL_ID,
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages$4.projectsLabel))
+      })
+    }), jsxRuntime.jsx(SelectInput__default["default"], {
       value: props.projectKey || '',
       name: "project-switcher",
-      "aria-labelledby": "project-switcher",
+      "aria-labelledby": PROJECT_SWITCHER_LABEL_ID,
       onChange: function onChange(event) {
         var selectedProjectKey = event.target.value;
 
@@ -2030,17 +2050,17 @@ var ProjectSwitcher = function ProjectSwitcher(props) {
       },
       isClearable: false,
       backspaceRemovesValue: false,
-      placeholder: intl.formatMessage(messages$3.searchPlaceholder),
+      placeholder: intl.formatMessage(messages$4.searchPlaceholder),
       noOptionsMessage: function noOptionsMessage() {
-        return intl.formatMessage(messages$3.noResults);
+        return intl.formatMessage(messages$4.noResults);
       }
-    })
+    })]
   });
 };
 
 ProjectSwitcher.displayName = 'ProjectSwitcher';
 
-var messages$2 = reactIntl.defineMessages({
+var messages$3 = reactIntl.defineMessages({
   backToProjectLink: {
     id: 'AppBar.backToProjectLink',
     defaultMessage: 'Back to project'
@@ -2063,7 +2083,7 @@ var BackToProject = function BackToProject(props) {
       return redirectToProject(props.projectKey || '');
     },
     icon: jsxRuntime.jsx(icons.AngleLeftIcon, {}),
-    label: intl.formatMessage(messages$2.backToProjectLink)
+    label: intl.formatMessage(messages$3.backToProjectLink)
   });
 };
 BackToProject.displayName = 'BackToProject';
@@ -2185,8 +2205,8 @@ var AppBar = function AppBar(props) {
           src: LogoSVG__default["default"],
           width: "100%",
           alt: "Logo"
-        }) : jsxRuntime.jsx(reactRouterDom.Link, {
-          to: "/".concat(previousProjectKey || ''),
+        }) : jsxRuntime.jsx("a", {
+          href: "/".concat(previousProjectKey || ''),
           children: jsxRuntime.jsx("img", {
             src: LogoSVG__default["default"],
             width: "100%",
@@ -2248,9 +2268,18 @@ var AppBar = function AppBar(props) {
 
 AppBar.displayName = 'AppBar';
 
+var messages$2 = reactIntl.defineMessages({
+  localesLabel: {
+    id: 'LocaleSwitcher.localesLabel',
+    description: 'The label for project dropdown switcher',
+    defaultMessage: 'Locales menu'
+  }
+});
+
 function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$7(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+var LOCALE_SWITCHER_LABEL_ID = 'locale-switcher-label';
 
 var _ref$1 = {
   name: "lmfqdl",
@@ -2293,13 +2322,18 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
   var handleSelection = react.useCallback(function (event) {
     setProjectDataLocale(event.target.value);
   }, [setProjectDataLocale]);
-  return jsxRuntime.jsx("div", {
+  return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react$2.css("position:relative;width:", designSystem.customProperties.constraint3, ";" + ("" ), "" ),
     "data-track-component": "LocaleSwitch",
-    children: jsxRuntime.jsx(SelectInput__default["default"], {
+    children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
+      children: jsxRuntime.jsx("span", {
+        id: LOCALE_SWITCHER_LABEL_ID,
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$2.localesLabel))
+      })
+    }), jsxRuntime.jsx(SelectInput__default["default"], {
       value: props.projectDataLocale,
       name: "locale-switcher",
-      "aria-labelledby": "locale-switcher",
+      "aria-labelledby": LOCALE_SWITCHER_LABEL_ID,
       onChange: handleSelection,
       options: _mapInstanceProperty__default["default"](_context = props.availableLocales).call(_context, function (locale) {
         return {
@@ -2318,26 +2352,26 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
       isClearable: false,
       backspaceRemovesValue: false,
       isSearchable: false
-    })
+    })]
   });
 };
 
 LocaleSwitcher.propTypes = {};
 
 var ProjectNotFound = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-found-87465054.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-found-ff0b8045.cjs.prod.js'
   /* webpackChunkName: "project-not-found" */
   ); });
 });
 
 var ProjectExpired = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-expired-57962717.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-expired-c3d4e453.cjs.prod.js'
   /* webpackChunkName: "project-expired" */
   ); });
 });
 
 var ProjectNotInitialized = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-initialized-0b25801c.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-initialized-054b47ae.cjs.prod.js'
   /* webpackChunkName: "project-not-initialized" */
   ); });
 });
@@ -2384,7 +2418,7 @@ var RedirectToProjectCreate = function RedirectToProjectCreate() {
 RedirectToProjectCreate.displayName = 'RedirectToProjectCreate';
 
 var ProjectSuspended = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-suspended-c32010a3.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-suspended-3d9de033.cjs.prod.js'
   /* webpackChunkName: "project-suspended" */
   ); });
 });
@@ -3630,7 +3664,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./quick-access-dd09f312.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./quick-access-0f57e72d.cjs.prod.js'
   /* webpackChunkName: "quick-access" */
   ); });
 });
@@ -4026,11 +4060,11 @@ var RestrictedApplication = function RestrictedApplication(props) {
                     projectKey: projectKeyFromUrl,
                     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: /*#__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",
+                      role: "region",
+                      "aria-live": "polite",
                       css: _ref5,
                       children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
                         domain: constants$1.DOMAINS.GLOBAL
@@ -4068,14 +4102,12 @@ var RestrictedApplication = function RestrictedApplication(props) {
                         });
                       }
                     }), jsxRuntime.jsx("header", {
-                      role: "header",
                       css: _ref4,
                       children: jsxRuntime.jsx(AppBar, {
                         user: user,
                         projectKeyFromUrl: projectKeyFromUrl
                       })
                     }), jsxRuntime.jsx("aside", {
-                      role: "aside",
                       css: _ref3,
                       children: function () {
                         // The <NavBar> should only be rendered within a project