@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta1

package/dist/Sidebar.js

@@ -1,713 +1,79 @@
-import React, { useState, forwardRef, useEffect } from 'react';
+import { _ as _slicedToArray } from './slicedToArray-b4278ecd.js';
+import React__default, { useState, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
+import { capitalize, findBy, hyphenate, isNotPresent, isNotEmpty, isPresent } from '@bigbinary/neeto-cist';
 import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/initializers';
-import { useFetchNeetoApps, useLocalStorage } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Typography, Input, Tooltip, Spinner, Avatar, Button } from '@bigbinary/neetoui';
+import useLocalStorage from '@bigbinary/neeto-commons-frontend/react-utils/useLocalStorage';
+import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
+import { Typography, Button } from '@bigbinary/neetoui';
+import { not, is, findLast } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation, NavLink } from 'react-router-dom';
-import { NeetoIcon, Search, AppSwitcher as AppSwitcher$1, ChatEmpty, Book, Gift, Keyboard, User, Settings, LeftArrow, Help, Down } from '@bigbinary/neeto-icons';
-import { capitalize, truncate, isPresent, findBy, isNotPresent } from '@bigbinary/neeto-cist';
-import * as AppIcons from '@bigbinary/neeto-icons/app-icons';
-import { t as t$1 } from 'i18next';
-import { resetAuthTokens } from '@bigbinary/neeto-commons-frontend/utils';
-import { toLower, all, mergeDeepLeft, curry, is, includes, __, not } from 'ramda';
-import KeyboardShortcuts from '@bigbinary/neeto-molecules/KeyboardShortcuts';
+import { Link, useLocation, useHistory } from 'react-router-dom';
+import { f as filterByPermissions, a as CheckPointNavLinks, I as Items, b as SELECTED_NAV_LINK_ROUTE_STORAGE_KEY, g as getSidebarStateLocalStorageKey, S as SelectedLink, C as Chevron } from './Chevron-c64ff676.js';
+import useFetchNeetoApps from '@bigbinary/neeto-commons-frontend/react-utils/useFetchNeetoApps';
 import * as ProductTypefaceLogos from '@bigbinary/neeto-icons/typeface-logos';
 import { Neeto } from '@bigbinary/neeto-icons/typeface-logos';
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-var Chevron = function Chevron(_ref) {
-  var style = _ref.style;
-  return /*#__PURE__*/React.createElement("svg", {
-    height: "16",
-    viewBox: "0 0 16 16",
-    width: "16",
-    style: style
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M7.07031 13.8887C7.2207 14.0391 7.40527 14.1211 7.62402 14.1211C8.06836 14.1211 8.41699 13.7725 8.41699 13.3281C8.41699 13.1094 8.32812 12.9043 8.17773 12.7539L3.37207 8.05762L8.17773 3.375C8.32812 3.21777 8.41699 3.0127 8.41699 2.80078C8.41699 2.35645 8.06836 2.00781 7.62402 2.00781C7.40527 2.00781 7.2207 2.08984 7.07031 2.24023L1.73828 7.44922C1.56055 7.62012 1.46484 7.8252 1.46484 8.06445C1.46484 8.29688 1.55371 8.49512 1.73828 8.67969L7.07031 13.8887ZM13.1748 13.8887C13.3252 14.0391 13.5098 14.1211 13.7354 14.1211C14.1797 14.1211 14.5283 13.7725 14.5283 13.3281C14.5283 13.1094 14.4395 12.9043 14.2891 12.7539L9.4834 8.05762L14.2891 3.375C14.4395 3.21777 14.5283 3.0127 14.5283 2.80078C14.5283 2.35645 14.1797 2.00781 13.7354 2.00781C13.5098 2.00781 13.3252 2.08984 13.1748 2.24023L7.84961 7.44922C7.66504 7.62012 7.57617 7.8252 7.56934 8.06445C7.56934 8.29688 7.66504 8.49512 7.84961 8.67969L13.1748 13.8887Z",
-    fill: "currentColor"
-  }));
-};
-
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css$1 = ".neeto-molecules-app-switcher__wrapper{align-items:flex-start;background-color:rgb(var(--neeto-ui-white));display:flex;flex-direction:column;justify-content:flex-start;max-width:100%;overflow-y:auto;padding:40px;position:relative;transition:all .3s;width:100%}@media only screen and (max-width:992px){.neeto-molecules-app-switcher__wrapper{padding:32px}}.neeto-molecules-app-switcher__grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}@media only screen and (max-width:992px){.neeto-molecules-app-switcher__grid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}}.neeto-molecules-app-switcher__header{align-items:center;display:flex;gap:32px;justify-content:space-between;margin-bottom:32px;position:relative;width:100%}@media only screen and (max-width:768px){.neeto-molecules-app-switcher__header{align-items:flex-start;flex-direction:column-reverse;gap:24px}}@media only screen and (max-width:640px){.neeto-molecules-app-switcher__header h1{font-size:28px}}.neeto-molecules-app-switcher__close-btn{position:absolute;right:12px;top:12px}.neeto-molecules-app-switcher__search-wrapper{flex-grow:1}@media only screen and (min-width:992px){.neeto-molecules-app-switcher__search-wrapper{flex-grow:0;width:296px}}.neeto-molecules-app-switcher__body{display:flex;flex-direction:column;font-size:var(--neeto-ui-text-sm);gap:12px;margin-bottom:24px;width:100%}.neeto-molecules-app-switcher-link{align-items:center;background-color:rgb(var(--neeto-ui-gray-100));border-color:rgb(var(--neeto-ui-gray-100));border-radius:var(--neeto-ui-rounded-lg);border-style:solid;border-width:2px;cursor:pointer;display:flex;gap:12px;max-width:100%;padding:12px 16px;text-decoration:none;transition:background-color .3s ease-in-out;width:100%}.neeto-molecules-app-switcher-link:focus,.neeto-molecules-app-switcher-link:focus-visible{outline:none}.neeto-molecules-app-switcher-link:focus-visible{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-app-switcher-link:not(.neeto-molecules-app-switcher-link--active):hover{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-app-switcher-link--active{background:rgb(var(--neeto-ui-primary-100));border-color:rgb(var(--neeto-ui-primary-600))}.neeto-molecules-app-switcher-link__icon-holder{align-items:center;border-radius:var(--neeto-ui-rounded-lg);display:flex;flex-shrink:0;height:42px;justify-content:center;width:42px}.neeto-molecules-app-switcher-link__content{flex-grow:1}.neeto-molecules-app-switcher-link__content span{display:block}";
-n(css$1,{});
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-var AppLink = function AppLink(_ref) {
-  var name = _ref.name,
-    description = _ref.description,
-    url = _ref.url;
-  var appName = "Neeto".concat(name.charAt(0)).concat(name.slice(1).toLowerCase());
-  var AppIcon = AppIcons[appName];
-  return /*#__PURE__*/React.createElement("a", {
-    "data-cy": "".concat(name, "-app-link"),
-    "data-test-id": "neetoapp-link-".concat(name),
-    href: url,
-    rel: "noreferrer",
-    target: "_blank",
-    className: classnames("neeto-molecules-app-switcher-link", {
-      "neeto-molecules-app-switcher-link--active": capitalize(globalProps.appName) === appName
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classnames("neeto-molecules-app-switcher-link__icon-holder", {
-      "neeto-ui-bg-primary-500": !AppIcon
-    })
-  }, AppIcon ? /*#__PURE__*/React.createElement(AppIcon, {
-    size: 42
-  }) : /*#__PURE__*/React.createElement(NeetoIcon, {
-    color: "white",
-    size: 42
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-app-switcher-link__content"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    lineHeight: "relaxed",
-    style: "h4",
-    weight: "medium"
-  }, name), /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    style: "body3",
-    weight: "normal"
-  }, description)));
-};
-var AppLink$1 = /*#__PURE__*/React.memo(AppLink);
-
-var Body = function Body() {
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchTerm = _useState2[0],
-    setSearchTerm = _useState2[1];
-  var _useFetchNeetoApps = useFetchNeetoApps(),
-    data = _useFetchNeetoApps.data;
-  var substring = searchTerm.replace(/ /g, "").toLowerCase();
-  var filteredApps = data === null || data === void 0 ? void 0 : data.neetoApps.filter(function (_ref) {
-    var name = _ref.name;
-    return name.toLowerCase().includes(substring);
-  });
-  var handleSearch = function handleSearch(e) {
-    return setSearchTerm(e.target.value);
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-app-switcher__header",
-    "data-cy": "app-switcher-body-wrapper"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h1"
-  }, t("neetoMolecules.appSwitcher.chooseNeetoProduct")), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-app-switcher__search-wrapper"
-  }, /*#__PURE__*/React.createElement(Input, {
-    autoFocus: true,
-    "data-cy": "app-switcher-search-input",
-    placeholder: t("neetoMolecules.appSwitcher.searchProducts"),
-    prefix: /*#__PURE__*/React.createElement(Search, null),
-    type: "search",
-    value: searchTerm,
-    onChange: handleSearch
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-app-switcher__body"
-  }, (filteredApps === null || filteredApps === void 0 ? void 0 : filteredApps.length) > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-app-switcher__grid"
-  }, filteredApps.map(function (app) {
-    return /*#__PURE__*/React.createElement(AppLink$1, _extends({
-      key: app.name
-    }, app));
-  })) : /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-center",
-    style: "body1"
-  }, t("neetoMolecules.appSwitcher.noApps"))));
-};
-
-var AppSwitcher = function AppSwitcher() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-app-switcher__wrapper",
-    "data-cy": "switcher-wrapper",
-    "data-testid": "switcher-wrapper",
-    key: "switcher-wrapper"
-  }, /*#__PURE__*/React.createElement(Body, null));
-};
-
-var css = ":root{--neeto-molecules-sidebar-width:240px;--neeto-molecules-sidebar-z-index:99998;--neeto-chat-primary:136,134,255;--neeto-wireframe-primary:106,103,232;--neeto-site-primary:129,118,255;--neeto-desk-primary:253,148,55;--neeto-planner-primary:82,169,198;--neeto-replay-primary:32,199,189;--neeto-course-primary:140,214,114;--neeto-ci-primary:255,133,184;--neeto-invoice-primary:70,160,211;--neeto-quiz-primary:254,99,99;--neeto-runner-primary:75,71,255;--neeto-form-primary:254,128,114;--neeto-crm-primary:96,154,240;--neeto-changelog-primary:255,135,135;--neeto-deploy-primary:20,209,164;--neeto-kb-primary:101,205,161;--neeto-cal-primary:238,77,95;--neeto-invisible-primary:121,157,250;--neeto-testify-primary:255,158,69;--neeto-monitor-primary:70,181,197;--neeto-git-primary:255,78,110}.neeto-molecules-sidebar__wrapper{display:flex;max-width:240px;max-width:var(--neeto-molecules-sidebar-width);position:relative;transition:all .15s;width:240px;width:var(--neeto-molecules-sidebar-width)}.neeto-molecules-sidebar__wrapper--collapsed{max-width:0;width:0}.neeto-molecules-sidebar__wrapper--collapsed .neeto-molecules-sidebar__toggler{right:-36px;transform:scale(-1)}.neeto-molecules-sidebar{background-color:rgb(var(--neeto-ui-gray-100));border-right:1px solid rgb(var(--neeto-ui-gray-100));height:100vh;padding:24px 0;width:100%;z-index:99998;z-index:var(--neeto-molecules-sidebar-z-index)}.neeto-molecules-sidebar__no-shrinkable{max-width:240px;max-width:var(--neeto-molecules-sidebar-width);width:240px;width:var(--neeto-molecules-sidebar-width)}.neeto-molecules-sidebar::-webkit-scrollbar{height:0;width:0}.neeto-molecules-sidebar::-webkit-scrollbar-thumb{background:rgb(var(--neeto-ui-gray-300));border-radius:50px}.neeto-molecules-sidebar::-webkit-scrollbar-track{background:\"transparent\"}.neeto-molecules-sidebar__toggler{position:absolute;right:8px;top:8px;z-index:99998;z-index:var(--neeto-molecules-sidebar-z-index)}.neeto-molecules-sidebar__header{margin:14px 0 28px;padding:0 24px}.neeto-molecules-sidebar__logo svg{height:20px;max-width:100%;width:auto}.neeto-molecules-sidebar__links{margin-bottom:40px}.neeto-molecules-sidebar__link{color:rgb(var(--neeto-ui-gray-800));gap:10px;padding:12px 24px;position:relative;text-decoration:none!important;transition:var(--neeto-ui-transition);width:100%}.neeto-molecules-sidebar__link-icon{flex-shrink:0;transition:var(--neeto-ui-transition)}.neeto-molecules-sidebar__link-icon svg path{vector-effect:non-scaling-stroke}.neeto-molecules-sidebar__link-icon--rotate{transform:scale(-1)}.neeto-molecules-sidebar__link-icon--caret{opacity:0;transition:opacity .3s ease-in-out}.neeto-molecules-sidebar__link-label,.neeto-molecules-sidebar__link-sub-label{flex-grow:1;text-align:left}.neeto-molecules-sidebar__link:hover{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-black))}.neeto-molecules-sidebar__link:focus,.neeto-molecules-sidebar__link:focus-visible,.neeto-molecules-sidebar__link[aria-expanded=true]{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-black));outline:none}.neeto-molecules-sidebar__link.active{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-black))}.neeto-molecules-sidebar__link.active .neeto-molecules-sidebar__link-label{font-weight:var(--neeto-ui-font-medium)}.neeto-molecules-sidebar__link.active .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link:focus .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link:focus-visible .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link:hover .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link[aria-expanded=true] .neeto-molecules-sidebar__link-icon--caret{opacity:1}.neeto-molecules-sidebar__link--button:focus{background-color:transparent}.neeto-molecules-sidebar__link--button:focus-visible{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-sidebar__link--change-log{outline:none!important}.neeto-molecules-sidebar__sublink-wrapper{background-color:rgb(var(--neeto-ui-white));padding:4px 0}.neeto-molecules-sidebar__sublink{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-gray-700));cursor:pointer;gap:8px;padding:8px 24px 8px 58px;text-decoration:none;transition:all .3s}.neeto-molecules-sidebar__sublink:not(:last-child){margin-bottom:4px}.neeto-molecules-sidebar__sublink .neeto-molecules-sidebar__link-sub-count{opacity:.75}.neeto-molecules-sidebar__sublink:hover{color:rgb(var(--neeto-ui-gray-800));text-decoration:none}.neeto-molecules-sidebar__sublink:hover .neeto-molecules-sidebar__link-sub-count{opacity:1}.neeto-molecules-sidebar__sublink:focus,.neeto-molecules-sidebar__sublink:focus-visible{color:rgb(var(--neeto-ui-gray-800));outline:none;text-decoration:none}.neeto-molecules-sidebar__sublink:focus .neeto-molecules-sidebar__link-sub-count,.neeto-molecules-sidebar__sublink:focus-visible .neeto-molecules-sidebar__link-sub-count{opacity:1}.neeto-molecules-sidebar__sublink.active,.neeto-molecules-sidebar__sublink:active{color:rgb(var(--neeto-ui-black));font-weight:var(--neeto-ui-font-medium);text-decoration:none}.neeto-molecules-sidebar__sublink.active .neeto-molecules-sidebar__link-sub-count,.neeto-molecules-sidebar__sublink:active .neeto-molecules-sidebar__link-sub-count{opacity:1}.neeto-molecules-sidebar__footer{margin-top:auto}.sidebar-featured-tooltip__content{border-radius:8px!important;box-shadow:var(--neeto-ui-shadow-sm)!important}.sidebar-featured-tooltip__content .tippy-content{padding:0}.sidebar-featured-tooltip{padding:12px;width:150px}.sidebar-featured-tooltip__icon-wrap{background-color:rgb(var(--neeto-ui-gray-100));border-radius:8px;height:40px;margin-bottom:8px;margin-left:auto;margin-right:auto;width:40px}.sidebar-featured-tooltip__title{margin-bottom:4px}.neeto-molecules-app-switcher-popup-wrapper,.neeto-molecules-help-popup-wrapper,.neeto-molecules-profile-popup-wrapper{border:1px solid rgb(var(--neeto-ui-gray-400));border-radius:var(--neeto-ui-rounded)!important;box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2)!important;min-width:240px}.neeto-molecules-app-switcher-popup-wrapper .tippy-content,.neeto-molecules-help-popup-wrapper .tippy-content,.neeto-molecules-profile-popup-wrapper .tippy-content{padding:0}.neeto-molecules-app-switcher-popup-wrapper .tippy-svg-arrow,.neeto-molecules-help-popup-wrapper .tippy-svg-arrow,.neeto-molecules-profile-popup-wrapper .tippy-svg-arrow{display:none!important}.neeto-molecules-profile-popup__top-section{border-top-left-radius:var(--neeto-ui-rounded);border-top-right-radius:var(--neeto-ui-rounded)}.neeto-molecules-profile-sublist{border-top:1px solid rgb(var(--neeto-ui-gray-400))}.neeto-molecules-help-sublist,.neeto-molecules-profile-sublist{list-style:none;margin:0;padding:4px 0}.neeto-molecules-help-sublist__item,.neeto-molecules-profile-sublist__item{width:100%}.neeto-molecules-help-sublist__item-btn,.neeto-molecules-profile-sublist__item-btn{border-radius:0;justify-content:flex-end!important;min-height:40px;text-align:left}.neeto-molecules-help-sublist__item-btn.active,.neeto-molecules-profile-sublist__item-btn.active{background-color:rgb(var(--neeto-ui-gray-800));color:rgb(var(--neeto-ui-white))}.neeto-molecules-help-sublist__item-btn-icon svg path,.neeto-molecules-profile-sublist__item-btn-icon svg path{vector-effect:non-scaling-stroke}.neeto-molecules-help-sublist__item-btn span,.neeto-molecules-profile-sublist__item-btn span{align-items:center;display:flex;gap:8px}.neeto-molecules-sidebar__link-icon{position:relative}.neeto-molecules-sidebar__notif-count{position:absolute;right:-6px;top:-6px;z-index:1}.neeto-molecules-help-sublist__item-btn-count,.neeto-molecules-sidebar__notif-count{align-items:center;background-color:rgb(var(--neeto-ui-primary-500));border-radius:var(--neeto-ui-rounded-full);color:rgb(var(--neeto-ui-white));display:inline-flex;flex-shrink:0;font-size:var(--neeto-ui-text-xxs);height:16px;justify-content:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:16px}.neeto-molecules-app-switcher-popup-wrapper{height:calc(100vh - 16px);margin-bottom:8px;min-width:calc(100vw - 176px);overflow-y:auto}";
-n(css,{});
-
-var AppSwitcherButton = function AppSwitcherButton() {
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasHovered = _useState2[0],
-    setHasHovered = _useState2[1];
-  var _useFetchNeetoApps = useFetchNeetoApps(),
-    data = _useFetchNeetoApps.data,
-    refetchNeetoApps = _useFetchNeetoApps.refetch,
-    isStale = _useFetchNeetoApps.isStale;
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    interactive: true,
-    className: "neeto-molecules-app-switcher-popup-wrapper",
-    content: /*#__PURE__*/React.createElement(AppSwitcher, null),
-    disabled: !data,
-    hideOnClick: false,
-    interactiveDebounce: 20,
-    offset: [0, -70],
-    position: "right",
-    theme: "light"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "neeto-molecules-sidebar__link neeto-molecules-sidebar__link--app-switcher neeto-molecules-sidebar__link--button neeto-ui-flex neeto-ui-w-full neeto-ui-select-none neeto-ui-items-center neeto-ui-justify-start neeto-ui-shadow-none",
-    "data-cy": "app-switcher-button",
-    "data-testid": "app-switcher-button",
-    onMouseEnter: function onMouseEnter() {
-      if (hasHovered || !isStale) return;
-      refetchNeetoApps();
-      setHasHovered(true);
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "neeto-molecules-sidebar__link-icon neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center h-6 w-6"
-  }, !data && hasHovered ? /*#__PURE__*/React.createElement("span", {
-    "data-testid": "app-switcher-button-loader"
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(AppSwitcher$1, {
-    size: 24
-  })), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-molecules-sidebar__link-label",
-    component: "span",
-    style: "body2",
-    weight: "normal"
-  }, t("neetoMolecules.sidebar.productSwitcher"))));
-};
-
-var MY_PROFILE_URL = "/auth/profile/edit";
-var MY_ORGANIZATION_URL = "/auth/organization/edit";
-var CHANGELOG_WIDGET_TRIGGER_ID = "neetochangelog-trigger";
-var DEFAULT_HELP_LINK_PROPS = {
-  liveChatProps: {
-    label: t$1("neetoMolecules.sidebar.helpLinks.liveChat"),
-    icon: ChatEmpty,
-    "data-cy": "help-link-live-chat-button",
-    onClick: function onClick() {
-      var _window$NeetoChat, _window$NeetoChat$con, _window$NeetoChat2, _window$NeetoChat2$co;
-      (_window$NeetoChat = window.NeetoChat) === null || _window$NeetoChat === void 0 ? void 0 : (_window$NeetoChat$con = _window$NeetoChat.contextualHelp) === null || _window$NeetoChat$con === void 0 ? void 0 : _window$NeetoChat$con.maximizeWidget();
-      (_window$NeetoChat2 = window.NeetoChat) === null || _window$NeetoChat2 === void 0 ? void 0 : (_window$NeetoChat2$co = _window$NeetoChat2.contextualHelp) === null || _window$NeetoChat2$co === void 0 ? void 0 : _window$NeetoChat2$co.openWidget();
-    }
-  },
-  helpCenterProps: {
-    label: t$1("neetoMolecules.sidebar.helpLinks.helpArticles"),
-    icon: Book,
-    "data-cy": "help-link-help-center-button",
-    href: "https://help.".concat(toLower(globalProps.appName), ".com/"),
-    target: "_blank"
-  },
-  changelogProps: {
-    id: CHANGELOG_WIDGET_TRIGGER_ID,
-    label: t$1("neetoMolecules.sidebar.helpLinks.whatsNew"),
-    icon: Gift,
-    "data-cy": "help-link-changelog-button"
-  },
-  keyboardShortcutProps: {
-    label: t$1("neetoMolecules.sidebar.helpLinks.keyboardShortcuts"),
-    icon: Keyboard,
-    "data-cy": "help-link-keyboard-shortcut-button"
-  }
-};
-
-var isSubRouteActive = function isSubRouteActive(subRoute, location) {
-  var currentBrowserUrl = new URL(location.pathname + location.search, window.location.origin);
-  var targetUrl = new URL(subRoute, window.location.origin);
-  if (!currentBrowserUrl.pathname.startsWith(targetUrl.pathname)) {
-    return false;
-  }
-  var targetSearchParams = targetUrl.searchParams;
-  var targetSearchKeys = Array.from(targetSearchParams.keys());
-  return all(function (key) {
-    return currentBrowserUrl.searchParams.get(key) === targetSearchParams.get(key);
-  }, targetSearchKeys);
-};
-var getSidebarStateLocalStorageKey = function getSidebarStateLocalStorageKey() {
-  var _globalProps$user, _globalProps$user2;
-  var user = ((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.email) || ((_globalProps$user2 = globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.phoneNumber);
-  return "sidebarState-".concat(user);
-};
-
-var getProfileInfo = function getProfileInfo(isOwner, profileInfoOverrides) {
-  var _globalProps$user, _globalProps$user2, _globalProps$user3, _globalProps$user4, _globalProps$user5;
-  return mergeDeepLeft(profileInfoOverrides, {
-    name: "".concat((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.firstName, " ").concat((_globalProps$user2 = globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.lastName),
-    imageUrl: (_globalProps$user3 = globalProps.user) === null || _globalProps$user3 === void 0 ? void 0 : _globalProps$user3.profileImageUrl,
-    email: ((_globalProps$user4 = globalProps.user) === null || _globalProps$user4 === void 0 ? void 0 : _globalProps$user4.email) || ((_globalProps$user5 = globalProps.user) === null || _globalProps$user5 === void 0 ? void 0 : _globalProps$user5.phoneNumber),
-    topLinks: [{
-      label: t$1("neetoMolecules.sidebar.myProfile"),
-      icon: User,
-      onClick: function onClick() {
-        return window.open(MY_PROFILE_URL, "_blank");
-      },
-      "data-cy": "my-profile-button"
-    }, isOwner && {
-      label: t$1("neetoMolecules.sidebar.myOrganization"),
-      icon: Settings,
-      onClick: function onClick() {
-        return window.open(MY_ORGANIZATION_URL, "_blank");
-      },
-      "data-cy": "profile-organization-settings-button"
-    }].filter(Boolean),
-    bottomLinks: [{
-      icon: LeftArrow,
-      label: t$1("neetoMolecules.sidebar.logout"),
-      onClick: function onClick() {
-        resetAuthTokens();
-        localStorage.removeItem(getSidebarStateLocalStorageKey());
-        window.location.href = "/logout";
-      },
-      "data-cy": "profile-logout-button"
-    }]
-  });
-};
-
-var ProfileSection = function ProfileSection(_ref, ref) {
-  var profileInfo = _ref.profileInfo;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasHovered = _useState2[0],
-    setHasHovered = _useState2[1];
-  var _useFetchNeetoApps = useFetchNeetoApps(),
-    data = _useFetchNeetoApps.data,
-    refetchNeetoApps = _useFetchNeetoApps.refetch,
-    isStale = _useFetchNeetoApps.isStale;
-  return /*#__PURE__*/React.createElement("button", {
-    className: "neeto-molecules-sidebar__link neeto-molecules-sidebar__link--button neeto-ui-shadow-none neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none",
-    "data-cy": "profile-section",
-    "data-testid": "profile-section",
-    ref: ref,
-    onMouseEnter: function onMouseEnter() {
-      if (!hasHovered && isStale) {
-        refetchNeetoApps();
-        setHasHovered(true);
-      }
-    }
-  }, !data && hasHovered ? /*#__PURE__*/React.createElement("span", {
-    "data-testid": "profile-avatar-loader"
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Avatar, {
-    className: "neeto-ui-flex-shrink-0 neeto-molecules-sidebar__profile-avatar",
-    "data-testid": "profile-avatar",
-    size: "small",
-    user: profileInfo
-  }), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-molecules-sidebar__link-label",
-    component: "span",
-    style: "body2",
-    weight: "normal"
-  }, truncate(profileInfo.name, 18))));
-};
-var ProfileSection$1 = /*#__PURE__*/forwardRef(ProfileSection);
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-var _excluded$2 = ["onClick", "label", "icon"];
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var LinkSection = function LinkSection(_ref) {
-  var links = _ref.links;
-  return /*#__PURE__*/React.createElement("ul", {
-    className: "neeto-molecules-profile-sublist"
-  }, links.map(function (_ref2, idx) {
-    var onClick = _ref2.onClick,
-      label = _ref2.label,
-      _ref2$icon = _ref2.icon,
-      icon = _ref2$icon === void 0 ? null : _ref2$icon,
-      otherProps = _objectWithoutProperties(_ref2, _excluded$2);
-    return /*#__PURE__*/React.createElement("li", {
-      className: "neeto-molecules-profile-sublist__item",
-      key: idx
-    }, /*#__PURE__*/React.createElement(Button, _extends({
-      fullWidth: true,
-      className: "neeto-molecules-profile-sublist__item-btn",
-      iconPosition: "left",
-      iconSize: 18,
-      style: "text"
-    }, _objectSpread$2({
-      icon: icon,
-      label: label,
-      onClick: onClick
-    }, otherProps))));
-  }));
-};
-
-var ProfileMenu = function ProfileMenu(_ref) {
-  var profileInfo = _ref.profileInfo,
-    extraTopLinks = _ref.extraTopLinks;
-  var name = profileInfo.name,
-    email = profileInfo.email,
-    topLinks = profileInfo.topLinks,
-    bottomLinks = profileInfo.bottomLinks,
-    customContent = profileInfo.customContent;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-flex neeto-ui-flex-col neeto-molecules-profile-popup",
-    "data-cy": "profile-popup",
-    "data-testid": "profile-popup"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classnames("neeto-ui-relative neeto-ui-flex neeto-ui-items-center neeto-ui-p-3 neeto-ui-bg-primary-100 neeto-molecules-profile-popup__top-section")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "top-0 left-0"
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    size: "large",
-    user: profileInfo
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-grow neeto-ui-min-w-0 neeto-ui-pl-3"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-m-0",
-    component: "h2",
-    lineHeight: "tight",
-    style: "h5",
-    title: name,
-    weight: "semibold"
-  }, truncate(name, 18)), email && /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-w-full neeto-ui-truncate neeto-ui-text-gray-700",
-    lineHeight: "tight",
-    style: "body3"
-  }, email))), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-sidebar__profile-wrapper-custom-content"
-  }, customContent), topLinks && /*#__PURE__*/React.createElement(LinkSection, {
-    links: [].concat(_toConsumableArray(extraTopLinks), _toConsumableArray(topLinks))
-  }), bottomLinks && /*#__PURE__*/React.createElement(LinkSection, {
-    links: bottomLinks
-  }));
-};
-
-var ProfileButton = function ProfileButton(_ref) {
-  var extraTopLinks = _ref.extraTopLinks,
-    profileInfoOverrides = _ref.profileInfoOverrides;
-  var _useFetchNeetoApps = useFetchNeetoApps(),
-    data = _useFetchNeetoApps.data;
-  var profileInfo = getProfileInfo(data === null || data === void 0 ? void 0 : data.isOwner, profileInfoOverrides);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    interactive: true,
-    className: "neeto-molecules-profile-popup-wrapper",
-    content: /*#__PURE__*/React.createElement(ProfileMenu, {
-      extraTopLinks: extraTopLinks,
-      profileInfo: profileInfo
-    }),
-    disabled: !data,
-    hideOnClick: false,
-    interactiveDebounce: 20,
-    offset: [0, -70],
-    position: "right",
-    theme: "light"
-  }, /*#__PURE__*/React.createElement(ProfileSection$1, {
-    profileInfo: profileInfo
-  }));
-};
-
-// Rule can be enabled once the ticket - https://github.com/bigbinary/neeto-commons-frontend/issues/905 is closed.
-// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
-var HelpSection = function HelpSection(_ref, ref) {
-  var changesCount = _ref.changesCount;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement("button", {
-    className: "neeto-molecules-sidebar__link neeto-molecules-sidebar__link--button neeto-ui-shadow-none neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none",
-    "data-cy": "help-button",
-    ref: ref
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "neeto-molecules-sidebar__link-icon neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center"
-  }, /*#__PURE__*/React.createElement(Help, {
-    size: 24
-  }), isPresent(changesCount) && /*#__PURE__*/React.createElement("span", {
-    className: "neeto-molecules-sidebar__notif-count",
-    "data-testid": "help-icon-changes-count"
-  }, changesCount)), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-molecules-sidebar__link-label",
-    component: "span",
-    style: "body2",
-    weight: "normal"
-  }, t("neetoMolecules.sidebar.helpLinks.helpCenter")));
-};
-var HelpSection$1 = /*#__PURE__*/forwardRef(HelpSection);
-
-var _excluded$1 = ["label"];
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var HelpSectionMenu = function HelpSectionMenu(_ref) {
-  var helpLinkOverrides = _ref.helpLinkOverrides,
-    changesCount = _ref.changesCount;
-  var _KeyboardShortcuts$us = KeyboardShortcuts.usePaneState(),
-    _KeyboardShortcuts$us2 = _slicedToArray(_KeyboardShortcuts$us, 2),
-    setIsOpen = _KeyboardShortcuts$us2[1];
-  var helpLinks = Object.keys(DEFAULT_HELP_LINK_PROPS).map(function (key) {
-    return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, DEFAULT_HELP_LINK_PROPS[key]), helpLinkOverrides[key]), key === "keyboardShortcutProps" && {
-      onClick: function onClick() {
-        return setIsOpen(true);
-      }
-    }), key === "changelogProps" && changesCount && {
-      changesCount: changesCount
-    });
-  }).filter(function (_ref2) {
-    var hide = _ref2.hide;
-    return !hide;
-  });
-  return /*#__PURE__*/React.createElement("ul", {
-    className: "neeto-molecules-help-sublist"
-  }, helpLinks.map(function (_ref3, idx) {
-    var label = _ref3.label,
-      buttonProps = _objectWithoutProperties(_ref3, _excluded$1);
-    return /*#__PURE__*/React.createElement("li", {
-      className: "neeto-molecules-help-sublist__item",
-      key: idx
-    }, /*#__PURE__*/React.createElement(Button, _extends({
-      fullWidth: true,
-      className: "neeto-molecules-help-sublist__item-btn",
-      iconPosition: "left",
-      iconSize: 18,
-      style: "text"
-    }, buttonProps), label, isPresent(buttonProps.changesCount) && /*#__PURE__*/React.createElement("span", {
-      className: "neeto-molecules-help-sublist__item-btn-count",
-      "data-testid": "help-section-menu-changes-count"
-    }, buttonProps.changesCount)));
-  }));
-};
-
-var Footer = function Footer(_ref) {
-  var extraTopLinks = _ref.extraTopLinks,
-    helpLinkOverrides = _ref.helpLinkOverrides,
-    profileInfoOverrides = _ref.profileInfoOverrides,
-    _ref$showAppSwitcher = _ref.showAppSwitcher,
-    showAppSwitcher = _ref$showAppSwitcher === void 0 ? false : _ref$showAppSwitcher;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    changesCount = _useState2[0],
-    setChangesCount = _useState2[1];
-  useEffect(function () {
-    var Nv = {
-      onReceiveData: function onReceiveData(data) {
-        if (!data.unreadCount) return;
-        setChangesCount(data.unreadCount);
-      },
-      onShow: function onShow() {
-        setChangesCount(null);
-      }
-    };
-    window.Nv = window.Nv ? Object.assign(window.Nv, Nv) : Nv;
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-sidebar__footer neeto-molecules-sidebar__no-shrinkable"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    interactive: true,
-    className: "neeto-molecules-help-popup-wrapper",
-    content: /*#__PURE__*/React.createElement(HelpSectionMenu, {
-      changesCount: changesCount,
-      helpLinkOverrides: helpLinkOverrides
-    }),
-    hideOnClick: false,
-    interactiveDebounce: 20,
-    offset: [0, -70],
-    position: "right",
-    theme: "light"
-  }, /*#__PURE__*/React.createElement(HelpSection$1, {
-    changesCount: changesCount
-  })), showAppSwitcher && /*#__PURE__*/React.createElement(AppSwitcherButton, null), /*#__PURE__*/React.createElement(ProfileButton, {
-    extraTopLinks: extraTopLinks,
-    profileInfoOverrides: profileInfoOverrides
-  }));
-};
+import { _ as _extends } from './extends-093996c9.js';
+import { _ as _defineProperty } from './defineProperty-549061a7.js';
+import { _ as _objectWithoutProperties } from './objectWithoutProperties-a0edb288.js';
+import { Down } from '@bigbinary/neeto-icons';
+import '@bigbinary/neeto-commons-frontend/utils/general';
+import '@bigbinary/neeto-filters-frontend';
+import '@bigbinary/neeto-commons-frontend/react-utils/useRegisterNavigationCheckpoint';
+import './inject-css-c86de496.js';
 
 var Header = function Header(_ref) {
   var _ProductTypefaceLogos;
-  var customLogo = _ref.customLogo;
+  var customLogo = _ref.customLogo,
+    clearSettingsNav = _ref.clearSettingsNav,
+    homePath = _ref.homePath;
   var productName = globalProps.appName.substr(5);
   var logoName = "Neeto".concat(capitalize(productName.toLowerCase()));
   var ProductTypefaceLogo = (_ProductTypefaceLogos = ProductTypefaceLogos[logoName]) !== null && _ProductTypefaceLogos !== void 0 ? _ProductTypefaceLogos : Neeto;
   var LogoComponent = customLogo !== null && customLogo !== void 0 ? customLogo : ProductTypefaceLogo;
   var _useFetchNeetoApps = useFetchNeetoApps(),
     data = _useFetchNeetoApps.data;
-  var homePath = "/";
+  var appHomePath = homePath;
   if (data !== null && data !== void 0 && data.neetoApps) {
     var thisApp = findBy({
       name: productName
     }, data.neetoApps);
     if (thisApp !== null && thisApp !== void 0 && thisApp.url) {
-      homePath = new URL(thisApp === null || thisApp === void 0 ? void 0 : thisApp.url).pathname;
+      appHomePath = new URL(thisApp === null || thisApp === void 0 ? void 0 : thisApp.url).pathname;
     }
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-sidebar__header neeto-molecules-sidebar__no-shrinkable",
     "data-cy": "sidebar-info"
-  }, /*#__PURE__*/React.createElement(Link, {
+  }, /*#__PURE__*/React__default.createElement(Link, {
     className: "neeto-molecules-sidebar__logo neeto-ui-w-full",
-    to: homePath
-  }, /*#__PURE__*/React.createElement(LogoComponent, null)));
+    to: appHomePath,
+    onClick: clearSettingsNav
+  }, /*#__PURE__*/React__default.createElement(LogoComponent, null)));
 };
-var Header$1 = /*#__PURE__*/React.memo(Header);
+var Header$1 = /*#__PURE__*/React__default.memo(Header);
 
-var _excluded = ["label", "to", "icon", "items"],
-  _excluded2 = ["label", "to", "count", "dataCy"];
+var _excluded = ["label", "to", "icon", "items", "isConfigureNavLink", "isCountsLoading"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Links = function Links(_ref) {
-  var navLinks = _ref.navLinks;
+  var navLinks = _ref.navLinks,
+    isCountsLoadingDeprecated = _ref.isCountsLoading,
+    setSelectedNavLinkRoute = _ref.setSelectedNavLinkRoute;
   var location = useLocation();
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     isActiveLinkExpanded = _useState2[0],
     setIsActiveLinkExpanded = _useState2[1];
-  var filterByPermissions = curry(function (_ref2) {
-    var permissions = _ref2.permissions;
-    if (permissions) {
-      return is(Array, permissions) ? permissions.some(includes(__, globalProps$1.permissions)) : globalProps$1.permissions.includes(permissions);
-    }
-    return true;
-  });
-  var handleNavLinkClick = function handleNavLinkClick(event, isActive, items) {
+  var handleNavLinkClick = function handleNavLinkClick(_ref2) {
+    var event = _ref2.event,
+      isActive = _ref2.isActive,
+      items = _ref2.items,
+      navLink = _ref2.navLink;
     if (isNotPresent(items)) return;
+    if (navLink.isConfigureNavLink && isNotEmpty(navLink.items)) {
+      setSelectedNavLinkRoute(navLink.to);
+    }
     if (isActive()) {
       setIsActiveLinkExpanded(not);
       event.preventDefault();
@@ -715,141 +81,178 @@ var Links = function Links(_ref) {
     }
     setIsActiveLinkExpanded(true);
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-sidebar__links neeto-molecules-sidebar__no-shrinkable"
-  }, navLinks.filter(filterByPermissions).map(function (_ref3, mainIndex) {
-    var label = _ref3.label,
-      to = _ref3.to,
-      icon = _ref3.icon,
-      items = _ref3.items,
-      otherProps = _objectWithoutProperties(_ref3, _excluded);
+  }, navLinks.filter(filterByPermissions).map(function (navLink, index) {
+    var label = navLink.label,
+      to = navLink.to,
+      icon = navLink.icon,
+      items = navLink.items,
+      isConfigureNavLink = navLink.isConfigureNavLink,
+      _navLink$isCountsLoad = navLink.isCountsLoading,
+      isCountsLoading = _navLink$isCountsLoad === void 0 ? false : _navLink$isCountsLoad,
+      otherProps = _objectWithoutProperties(navLink, _excluded);
     var IconSVG = icon;
     var url = new URL(to, window.location.href);
     var isActive = function isActive() {
       return is(Function, otherProps.isActive) ? otherProps.isActive() : location.pathname.startsWith(url.pathname);
     };
-    var isMenuExpanded = isActive() && isActiveLinkExpanded;
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: mainIndex
-    }, /*#__PURE__*/React.createElement(NavLink, _extends({
+    var isMenuExpanded = isActive() && isActiveLinkExpanded && !isCountsLoadingDeprecated;
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: index
+    }, /*#__PURE__*/React__default.createElement(CheckPointNavLinks, _extends({
       activeClassName: "active",
       className: "neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none neeto-molecules-sidebar__link",
+      "data-testid": "navlink-".concat(hyphenate(label)),
       onClick: function onClick(event) {
-        return handleNavLinkClick(event, isActive, items);
+        return handleNavLinkClick({
+          event: event,
+          isActive: isActive,
+          items: items,
+          navLink: navLink
+        });
       }
     }, _objectSpread({
       isActive: isActive,
       to: to
-    }, otherProps)), icon && /*#__PURE__*/React.createElement("span", {
+    }, otherProps)), icon && /*#__PURE__*/React__default.createElement("span", {
       className: "neeto-molecules-sidebar__link-icon",
       "data-testid": label
-    }, /*#__PURE__*/React.createElement(IconSVG, null)), /*#__PURE__*/React.createElement(Typography, {
+    }, /*#__PURE__*/React__default.createElement(IconSVG, null)), /*#__PURE__*/React__default.createElement(Typography, {
       className: "neeto-molecules-sidebar__link-label",
       component: "span",
-      style: "body2",
-      weight: "normal"
-    }, label), items && /*#__PURE__*/React.createElement("span", {
+      style: "body2"
+    }, label), items && !isConfigureNavLink && /*#__PURE__*/React__default.createElement("span", {
       className: classnames("neeto-molecules-sidebar__link-icon neeto-molecules-sidebar__link-icon--caret", {
         "neeto-molecules-sidebar__link-icon--rotate": isMenuExpanded
       })
-    }, /*#__PURE__*/React.createElement(Down, {
+    }, /*#__PURE__*/React__default.createElement(Down, {
       size: 16
-    }))), items && isMenuExpanded && /*#__PURE__*/React.createElement("div", {
-      className: "neeto-molecules-sidebar__sublink-wrapper",
-      "data-cy": "sidebar-sub-link-wrapper"
-    }, items.filter(filterByPermissions).map(function (_ref4, subIndex) {
-      var subLabel = _ref4.label,
-        subRoute = _ref4.to,
-        count = _ref4.count,
-        dataCy = _ref4.dataCy,
-        otherProps = _objectWithoutProperties(_ref4, _excluded2);
-      return /*#__PURE__*/React.createElement(NavLink, _extends({
-        activeClassName: "active",
-        className: "neeto-molecules-sidebar__sublink neeto-ui-flex neeto-ui-items-center neeto-ui-select-none",
-        "data-cy": "".concat(dataCy, "-sub-link"),
-        isActive: function isActive() {
-          return isSubRouteActive(subRoute, location);
-        },
-        key: subIndex,
-        to: subRoute
-      }, otherProps), /*#__PURE__*/React.createElement(Typography, {
-        className: "neeto-molecules-sidebar__link-sub-label neeto-ui-flex-grow",
-        component: "span",
-        "data-cy": "".concat(dataCy, "-sub-link-label"),
-        style: "body2"
-      }, subLabel), /*#__PURE__*/React.createElement(Typography, {
-        className: "neeto-molecules-sidebar__link-sub-count neeto-ui-flex-shrink-0",
-        component: "span",
-        "data-cy": "".concat(dataCy, "-sub-link-count"),
-        style: "body2"
-      }, count > 999 ? "999+" : count));
-    })));
+    }))), items && !isConfigureNavLink && isMenuExpanded && /*#__PURE__*/React__default.createElement(Items, _objectSpread({
+      isCountsLoading: isCountsLoading,
+      items: items
+    }, otherProps)));
   }));
 };
 
 var Sidebar = function Sidebar(_ref) {
   var navLinks = _ref.navLinks,
     customLogo = _ref.customLogo,
-    _ref$profileInfoOverr = _ref.profileInfoOverrides,
-    profileInfoOverrides = _ref$profileInfoOverr === void 0 ? {} : _ref$profileInfoOverr,
-    _ref$helpLinkOverride = _ref.helpLinkOverrides,
-    helpLinkOverrides = _ref$helpLinkOverride === void 0 ? {} : _ref$helpLinkOverride,
-    _ref$extraTopLinks = _ref.extraTopLinks,
-    extraTopLinks = _ref$extraTopLinks === void 0 ? [] : _ref$extraTopLinks,
-    _ref$showAppSwitcher = _ref.showAppSwitcher,
-    showAppSwitcher = _ref$showAppSwitcher === void 0 ? true : _ref$showAppSwitcher;
+    _ref$isCountsLoading = _ref.isCountsLoading,
+    isCountsLoading = _ref$isCountsLoading === void 0 ? false : _ref$isCountsLoading,
+    _ref$homePath = _ref.homePath,
+    homePath = _ref$homePath === void 0 ? "/" : _ref$homePath;
+  var productName = globalProps$1.appName.substr(5).toLowerCase();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isAppSwitcherOpen = _useState2[0],
-    setIsAppSwitcherOpen = _useState2[1];
-  var _useLocalStorage = useLocalStorage(getSidebarStateLocalStorageKey(), false),
+    isSidebarPaneOpen = _useState2[0],
+    setIsSidebarPaneOpen = _useState2[1];
+  var _useLocalStorage = useLocalStorage(SELECTED_NAV_LINK_ROUTE_STORAGE_KEY, null),
     _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
-    isSidebarCollapsed = _useLocalStorage2[0],
-    setIsSidebarCollapsed = _useLocalStorage2[1];
+    selectedNavLinkRoute = _useLocalStorage2[0],
+    setSelectedNavLinkRoute = _useLocalStorage2[1];
+  var _useLocalStorage3 = useLocalStorage(getSidebarStateLocalStorageKey(), false),
+    _useLocalStorage4 = _slicedToArray(_useLocalStorage3, 2),
+    isSidebarCollapsed = _useLocalStorage4[0],
+    setIsSidebarCollapsed = _useLocalStorage4[1];
   var location = useLocation();
+  var history = useHistory();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var isLargerScreen = function isLargerScreen() {
+    return window.innerWidth > 768;
+  };
+  var isSidebarClosed = isLargerScreen() ? isSidebarCollapsed : not(isSidebarPaneOpen);
   useEffect(function () {
-    isAppSwitcherOpen && setIsAppSwitcherOpen(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location]);
-  var productName = globalProps$1.appName.substr(5).toLowerCase();
-  return /*#__PURE__*/React.createElement("div", {
+    if (!isPresent(navLinks)) return;
+    var currentLink = findLast(function (_ref2) {
+      var to = _ref2.to,
+        isActive = _ref2.isActive;
+      var url = new URL(to, window.location.href);
+      return is(Function, isActive) ? isActive() : location.pathname.includes(url.pathname);
+    })(navLinks);
+    if (isPresent(currentLink)) {
+      setSelectedNavLinkRoute(currentLink.isConfigureNavLink ? currentLink.to : null);
+    }
+  }, []);
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      if (isLargerScreen()) return;
+      setIsSidebarPaneOpen(false);
+      setIsSidebarCollapsed(true);
+    };
+    window.addEventListener("resize", handleResize);
+    return function () {
+      return window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  var handleGoBack = function handleGoBack(event) {
+    event.preventDefault();
+    setSelectedNavLinkRoute(null);
+    var settingsNavLink = navLinks.find(function (link) {
+      return isPresent(link.isConfigureNavLink) && link.isConfigureNavLink;
+    });
+    if (settingsNavLink.to) {
+      history.push(buildUrl(settingsNavLink.to));
+    }
+  };
+  var activeLink = useMemo(function () {
+    return navLinks.find(function (link) {
+      if (is(Function, link.isActive)) return link.isActive();
+      var url = new URL(link.to, window.location.href);
+      return location.pathname.startsWith(url.pathname);
+    });
+  }, [location.pathname, navLinks]);
+  var isSelectedNavLinkVisible = selectedNavLinkRoute && (activeLink === null || activeLink === void 0 ? void 0 : activeLink.to) === selectedNavLinkRoute && isNotEmpty(navLinks);
+  return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "sidebar-container",
     className: classnames("neeto-molecules-sidebar__wrapper", {
-      "neeto-molecules-sidebar__wrapper--collapsed": isSidebarCollapsed
+      "neeto-molecules-sidebar__wrapper--collapsed": isLargerScreen() ? isSidebarCollapsed : not(isSidebarPaneOpen)
     })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-sidebar neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-shrink-0 neeto-ui-overflow-y-auto neeto-ui-overflow-x-hidden",
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-molecules-sidebar__backdrop",
+    onClick: function onClick() {
+      setIsSidebarPaneOpen(false);
+      setSelectedNavLinkRoute(null);
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
     "data-cy": "sidebar-wrapper",
-    "data-testid": "sidebar"
-  }, /*#__PURE__*/React.createElement(Header$1, {
-    customLogo: customLogo
-  }), /*#__PURE__*/React.createElement(Links, {
-    navLinks: navLinks
-  }), /*#__PURE__*/React.createElement(Footer, {
-    extraTopLinks: extraTopLinks,
-    helpLinkOverrides: helpLinkOverrides,
-    profileInfoOverrides: profileInfoOverrides,
-    showAppSwitcher: showAppSwitcher
-  })), /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "sidebar",
+    className: classnames("neeto-molecules-sidebar neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-shrink-0 neeto-ui-overflow-y-auto neeto-ui-overflow-x-hidden", {
+      "neeto-molecules-sidebar--focus-mode": isPresent(selectedNavLinkRoute)
+    })
+  }, /*#__PURE__*/React__default.createElement(Header$1, {
+    customLogo: customLogo,
+    homePath: homePath,
+    clearSettingsNav: function clearSettingsNav() {
+      return setSelectedNavLinkRoute(null);
+    }
+  }), isSelectedNavLinkVisible ? /*#__PURE__*/React__default.createElement(SelectedLink, {
+    handleGoBack: handleGoBack,
+    navLink: activeLink
+  }) : /*#__PURE__*/React__default.createElement(Links, {
+    isCountsLoading: isCountsLoading,
+    navLinks: navLinks,
+    setSelectedNavLinkRoute: setSelectedNavLinkRoute
+  })), /*#__PURE__*/React__default.createElement(Button, {
     className: "neeto-molecules-sidebar__toggler",
     "data-cy": "neeto-molecules-sidebar-toggler",
     "data-testid": "sidebar-toggleButton",
-    style: "text",
+    style: isLargerScreen() ? "text" : "secondary",
     icon: function icon() {
-      return /*#__PURE__*/React.createElement(Chevron, {
+      return /*#__PURE__*/React__default.createElement(Chevron, {
         style: {
           color: "rgb(var(--neeto-".concat(productName, "-primary))")
         }
       });
     },
     tooltipProps: {
-      content: isSidebarCollapsed ? t("neetoMolecules.sidebar.showMenu") : t("neetoMolecules.sidebar.hideMenu"),
+      content: isSidebarClosed ? t("neetoMolecules.sidebar.showMenu") : t("neetoMolecules.sidebar.hideMenu"),
       position: "bottom"
     },
     onClick: function onClick() {
       setIsSidebarCollapsed(!isSidebarCollapsed);
+      setIsSidebarPaneOpen(not);
     }
   }));
 };