@bigbinary/neeto-molecules 1.1.69 → 1.1.71-beta

package/dist/Sidebar.js

@@ -1,18 +1,16 @@
-import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import React, { useState, forwardRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/initializers';
-import { useFetchNeetoApps, useHotKeys, useLocalStorage } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Typography, Button, Input, Spinner, Avatar, Tooltip } from '@bigbinary/neetoui';
-import { toLower, all, mergeDeepLeft, curry, is, includes, __, not } from 'ramda';
+import { useFetchNeetoApps, useLocalStorage } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { Typography, Input, Tooltip, Spinner, Avatar, Button } from '@bigbinary/neetoui';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation, NavLink } from 'react-router-dom';
-import { CSSTransition } from 'react-transition-group';
-import { NeetoIcon, Close, Search, AppSwitcher as AppSwitcher$1, ChatEmpty, Book, Gift, Keyboard, User, Settings, LeftArrow, Help, Down } from '@bigbinary/neeto-icons';
+import { Link, NavLink, useLocation } 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 { createPortal } from 'react-dom';
 import { t as t$1 } from 'i18next';
 import { resetAuthTokens } from '@bigbinary/neeto-commons-frontend/utils';
+import { toLower, curry, is, includes, __, all, repeat, mergeDeepLeft, omit, inc, not } from 'ramda';
 import KeyboardShortcuts from '@bigbinary/neeto-molecules/KeyboardShortcuts';
 import * as ProductTypefaceLogos from '@bigbinary/neeto-icons/typeface-logos';
 import { Neeto } from '@bigbinary/neeto-icons/typeface-logos';
@@ -72,9 +70,22 @@ 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__backdrop{align-items:center;background-color:rgba(27,31,35,.867);flex-direction:row;left:0;overflow:hidden;position:fixed;top:0;z-index:99998}.neeto-molecules-app-switcher__backdrop,.neeto-molecules-app-switcher__wrapper{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;height:100vh;justify-content:flex-start;transition:all .3s;width:100vw}.neeto-molecules-app-switcher__wrapper{align-items:flex-start;animation:nuifadeIn .3s ease-in;background-color:rgb(var(--neeto-ui-white));flex-direction:column;max-width:100%;overflow-y:auto;padding:40px;position:relative}.neeto-molecules-app-switcher__wrapper--collapsed{width:100vw}.neeto-molecules-app-switcher__grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}.neeto-molecules-app-switcher__header{align-items:center;display:flex;gap:16px;justify-content:space-between;margin-bottom:32px;position:relative;width:100%}.neeto-molecules-app-switcher__header h1{font-size:40px;line-height:var(--neeto-ui-leading-tight);margin-top:-16px}.neeto-molecules-app-switcher__close-btn{position:absolute;right:12px;top:12px}.neeto-molecules-app-switcher__search-wrapper{width:316px}.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}.neeto-molecules-app-switcher-enter.neeto-molecules-app-switcher__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0}.neeto-molecules-app-switcher-enter-active.neeto-molecules-app-switcher__backdrop,.neeto-molecules-app-switcher-enter-done.neeto-molecules-app-switcher__backdrop,.neeto-molecules-app-switcher-exit.neeto-molecules-app-switcher__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:1}.neeto-molecules-app-switcher-exit-active.neeto-molecules-app-switcher__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0}";
+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() {
@@ -92,46 +103,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-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$3 = ["children"];
-var Backdrop = function Backdrop(_ref, ref) {
-  var children = _ref.children,
-    otherProps = _objectWithoutProperties(_ref, _excluded$3);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-testid": "neeto-backdrop",
-    ref: ref
-  }, otherProps), children);
-};
-var Backdrop$1 = /*#__PURE__*/forwardRef(Backdrop);
-
 var AppLink = function AppLink(_ref) {
   var name = _ref.name,
     description = _ref.description,
@@ -171,8 +142,7 @@ var AppLink = function AppLink(_ref) {
 };
 var AppLink$1 = /*#__PURE__*/React.memo(AppLink);
 
-var Body = function Body(_ref) {
-  var onClose = _ref.onClose;
+var Body = function Body() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(""),
@@ -182,23 +152,14 @@ var Body = function Body(_ref) {
   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 (_ref2) {
-    var name = _ref2.name;
+  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(Button, {
-    className: "neeto-molecules-app-switcher__close-btn",
-    "data-cy": "app-switcher-back-button",
-    "data-testid": "app-switcher-back-button",
-    icon: Close,
-    iconPosition: "left",
-    size: "small",
-    style: "text",
-    onClick: onClose
-  }), /*#__PURE__*/React.createElement("div", {
+  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, {
@@ -227,112 +188,19 @@ var Body = function Body(_ref) {
   }, t("neetoMolecules.appSwitcher.noApps"))));
 };
 
-var Portal = function Portal(_ref) {
-  var rootId = _ref.rootId,
-    children = _ref.children;
-  var target = useRef(null);
-  useEffect(function () {
-    var container = document.getElementById(rootId);
-    if (!container) {
-      container = document.createElement("div");
-      container.setAttribute("id", rootId);
-      document.body.appendChild(container);
-    }
-    container.appendChild(target.current);
-    return function () {
-      target.current.remove();
-      if (container.childNodes.length === 0) {
-        container.remove();
-      }
-    };
-  }, [rootId]);
-  if (!target.current) {
-    target.current = document.createElement("div");
-  }
-  return /*#__PURE__*/createPortal(children, target.current);
-};
-
-var useOnClickOutside = function useOnClickOutside(insideRef, outsideRef, handler) {
-  useEffect(function () {
-    var listener = function listener(event) {
-      // Do nothing if clicking ref's element or descendent elements
-      if (!insideRef.current || insideRef.current.contains(event.target)) {
-        return;
-      }
-      if (outsideRef.current) {
-        // If Outside ref exists, trigger the handler if it contains the event target.
-        if (outsideRef.current.contains(event.target)) {
-          handler(event);
-        }
-        return;
-      }
-      handler(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return function () {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [insideRef, outsideRef, handler]);
-};
-
-var AppSwitcher = function AppSwitcher(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    isSidebarCollapsed = _ref.isSidebarCollapsed;
-  var paneWrapper = useRef(null);
-  var backdropRef = useRef(null);
-  useOnClickOutside(paneWrapper, backdropRef, onClose);
-  useHotKeys("esc", onClose, {
-    enabled: isOpen,
-    mode: "global"
-  });
-  return /*#__PURE__*/React.createElement(Portal, {
-    rootId: "neeto-ui-portal"
-  }, /*#__PURE__*/React.createElement(CSSTransition, {
-    appear: true,
-    unmountOnExit: true,
-    classNames: "neeto-molecules-app-switcher",
-    "in": isOpen,
-    timeout: 300
-  }, /*#__PURE__*/React.createElement(Backdrop$1, {
-    key: "switcher-backdrop",
-    ref: backdropRef,
-    className: classnames("neeto-molecules-app-switcher__backdrop", {
-      "neeto-molecules-app-switcher__backdrop--collapsed": isSidebarCollapsed
-    })
-  }, /*#__PURE__*/React.createElement("div", {
+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",
-    ref: paneWrapper,
-    className: classnames("neeto-molecules-app-switcher__wrapper", {
-      "neeto-molecules-app-switcher__wrapper--collapsed": isSidebarCollapsed
-    })
-  }, /*#__PURE__*/React.createElement(Body, {
-    onClose: onClose
-  })))));
+    key: "switcher-wrapper"
+  }, /*#__PURE__*/React.createElement(Body, null));
 };
 
-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 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-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-help-popup-wrapper .tippy-content,.neeto-molecules-profile-popup-wrapper .tippy-content{padding:0}.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}";
+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:var(--neeto-molecules-sidebar-z-index-1)}.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(_ref) {
-  var onAppSwitcherToggle = _ref.onAppSwitcherToggle;
+var AppSwitcherButton = function AppSwitcherButton() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(false),
@@ -343,19 +211,24 @@ var AppSwitcherButton = function AppSwitcherButton(_ref) {
     data = _useFetchNeetoApps.data,
     refetchNeetoApps = _useFetchNeetoApps.refetch,
     isStale = _useFetchNeetoApps.isStale;
-  var handleAppSwitcherToggle = function handleAppSwitcherToggle(event) {
-    if (!data) event.stopPropagation();else onAppSwitcherToggle();
-  };
-  return /*#__PURE__*/React.createElement("button", {
+  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",
-    onClick: handleAppSwitcherToggle,
     onMouseEnter: function onMouseEnter() {
-      if (!hasHovered && isStale) {
-        refetchNeetoApps();
-        setHasHovered(true);
-      }
+      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"
@@ -368,7 +241,7 @@ var AppSwitcherButton = function AppSwitcherButton(_ref) {
     component: "span",
     style: "body2",
     weight: "normal"
-  }, t("neetoMolecules.sidebar.productSwitcher")));
+  }, t("neetoMolecules.sidebar.productSwitcher"))));
 };
 
 var MY_PROFILE_URL = "/auth/profile/edit";
@@ -404,6 +277,7 @@ var DEFAULT_HELP_LINK_PROPS = {
     "data-cy": "help-link-keyboard-shortcut-button"
   }
 };
+var NAVLINK_KEYS_TO_OMIT = ["Component", "component"];
 
 var isSubRouteActive = function isSubRouteActive(subRoute, location) {
   var currentBrowserUrl = new URL(location.pathname + location.search, window.location.origin);
@@ -422,6 +296,16 @@ var getSidebarStateLocalStorageKey = function getSidebarStateLocalStorageKey() {
   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 filterByPermissions = curry(function (_ref) {
+  var permissions = _ref.permissions;
+  if (permissions) {
+    return is(Array, permissions) ? permissions.some(includes(__, globalProps.permissions)) : globalProps.permissions.includes(permissions);
+  }
+  return true;
+});
+var getInitialExpandedState = function getInitialExpandedState(items) {
+  return repeat(true, items.length);
+};
 
 var getProfileInfo = function getProfileInfo(isOwner, profileInfoOverrides) {
   var _globalProps$user, _globalProps$user2, _globalProps$user3, _globalProps$user4, _globalProps$user5;
@@ -551,7 +435,36 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var _excluded$2 = ["onClick", "label", "icon"];
+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$3 = ["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) {
@@ -563,7 +476,7 @@ var LinkSection = function LinkSection(_ref) {
       label = _ref2.label,
       _ref2$icon = _ref2.icon,
       icon = _ref2$icon === void 0 ? null : _ref2$icon,
-      otherProps = _objectWithoutProperties(_ref2, _excluded$2);
+      otherProps = _objectWithoutProperties(_ref2, _excluded$3);
     return /*#__PURE__*/React.createElement("li", {
       className: "neeto-molecules-profile-sublist__item",
       key: idx
@@ -672,7 +585,7 @@ var HelpSection = function HelpSection(_ref, ref) {
 };
 var HelpSection$1 = /*#__PURE__*/forwardRef(HelpSection);
 
-var _excluded$1 = ["label"];
+var _excluded$2 = ["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) {
@@ -697,7 +610,7 @@ var HelpSectionMenu = function HelpSectionMenu(_ref) {
     className: "neeto-molecules-help-sublist"
   }, helpLinks.map(function (_ref3, idx) {
     var label = _ref3.label,
-      buttonProps = _objectWithoutProperties(_ref3, _excluded$1);
+      buttonProps = _objectWithoutProperties(_ref3, _excluded$2);
     return /*#__PURE__*/React.createElement("li", {
       className: "neeto-molecules-help-sublist__item",
       key: idx
@@ -719,8 +632,7 @@ var Footer = function Footer(_ref) {
     helpLinkOverrides = _ref.helpLinkOverrides,
     profileInfoOverrides = _ref.profileInfoOverrides,
     _ref$showAppSwitcher = _ref.showAppSwitcher,
-    showAppSwitcher = _ref$showAppSwitcher === void 0 ? false : _ref$showAppSwitcher,
-    onAppSwitcherToggle = _ref.onAppSwitcherToggle;
+    showAppSwitcher = _ref$showAppSwitcher === void 0 ? false : _ref$showAppSwitcher;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     changesCount = _useState2[0],
@@ -728,9 +640,8 @@ var Footer = function Footer(_ref) {
   useEffect(function () {
     var Nv = {
       onReceiveData: function onReceiveData(data) {
-        if (data.unreadCount) {
-          setChangesCount(data.unreadCount);
-        }
+        if (!data.unreadCount) return;
+        setChangesCount(data.unreadCount);
       },
       onShow: function onShow() {
         setChangesCount(null);
@@ -754,9 +665,7 @@ var Footer = function Footer(_ref) {
     theme: "light"
   }, /*#__PURE__*/React.createElement(HelpSection$1, {
     changesCount: changesCount
-  })), showAppSwitcher && /*#__PURE__*/React.createElement(AppSwitcherButton, {
-    onAppSwitcherToggle: onAppSwitcherToggle
-  }), /*#__PURE__*/React.createElement(ProfileButton, {
+  })), showAppSwitcher && /*#__PURE__*/React.createElement(AppSwitcherButton, null), /*#__PURE__*/React.createElement(ProfileButton, {
     extraTopLinks: extraTopLinks,
     profileInfoOverrides: profileInfoOverrides
   }));
@@ -790,23 +699,94 @@ var Header = function Header(_ref) {
 };
 var Header$1 = /*#__PURE__*/React.memo(Header);
 
-var _excluded = ["label", "to", "icon", "items"],
-  _excluded2 = ["label", "to", "count", "dataCy"];
+var _excluded$1 = ["label", "to", "count", "dataCy", "items"];
+var Items = function Items(_ref) {
+  var items = _ref.items,
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 0 : _ref$level;
+  var _useState = useState(getInitialExpandedState(items)),
+    _useState2 = _slicedToArray(_useState, 2),
+    areItemsExpanded = _useState2[0],
+    setAreItemsExpanded = _useState2[1];
+  var handleNavLinkClick = function handleNavLinkClick(_ref2) {
+    var event = _ref2.event,
+      index = _ref2.index;
+    event.preventDefault();
+    setAreItemsExpanded(function (previousExpandedState) {
+      var newExpandedState = _toConsumableArray(previousExpandedState);
+      var oldIsExpandedOfCurrentIndex = newExpandedState[index];
+      newExpandedState[index] = not(oldIsExpandedOfCurrentIndex);
+      return newExpandedState;
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-sidebar__sublink-wrapper ml-".concat(level * 2),
+    "data-cy": "sidebar-sub-link-wrapper"
+  }, items.filter(filterByPermissions).map(function (_ref3, index) {
+    var label = _ref3.label,
+      to = _ref3.to,
+      count = _ref3.count,
+      dataCy = _ref3.dataCy,
+      subItems = _ref3.items,
+      otherProps = _objectWithoutProperties(_ref3, _excluded$1);
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement(NavLink, _extends({
+      to: to,
+      activeClassName: "active",
+      className: "neeto-ui-flex neeto-ui-items-center neeto-ui-select-none neeto-molecules-sidebar__sublink",
+      "data-cy": "".concat(dataCy, "-sub-link"),
+      isActive: function isActive() {
+        return isSubRouteActive(to, location);
+      },
+      key: index
+    }, omit(NAVLINK_KEYS_TO_OMIT, 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"
+    }, label), /*#__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), isPresent(subItems) && /*#__PURE__*/React.createElement("span", {
+      className: classnames("neeto-molecules-sidebar__link-icon", {
+        "neeto-molecules-sidebar__link-icon--rotate": areItemsExpanded[index]
+      }),
+      onClick: function onClick(event) {
+        return handleNavLinkClick({
+          event: event,
+          index: index
+        });
+      }
+    }, /*#__PURE__*/React.createElement(Down, {
+      size: 16
+    }))), isPresent(subItems) && areItemsExpanded[index] && /*#__PURE__*/React.createElement(Items, {
+      items: subItems,
+      level: inc(level)
+    }));
+  }));
+};
+
+var _excluded = ["label", "to", "icon", "items"];
 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 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 location = useLocation();
+  var sortedNavLinks = navLinks.filter(filterByPermissions).sort(function (_ref2, _ref3) {
+    var toA = _ref2.to;
+    var toB = _ref3.to;
+    var urlA = new URL(toA, window.location.href);
+    var urlB = new URL(toB, window.location.href);
+    var isActiveA = location.pathname.startsWith(urlA.pathname);
+    var isActiveB = location.pathname.startsWith(urlB.pathname);
+    return isActiveB - isActiveA;
   });
   var handleNavLinkClick = function handleNavLinkClick(event, isActive, items) {
     if (isNotPresent(items)) return;
@@ -819,12 +799,12 @@ var Links = function Links(_ref) {
   };
   return /*#__PURE__*/React.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);
+  }, sortedNavLinks.map(function (_ref4, index) {
+    var label = _ref4.label,
+      to = _ref4.to,
+      icon = _ref4.icon,
+      items = _ref4.items,
+      otherProps = _objectWithoutProperties(_ref4, _excluded);
     var IconSVG = icon;
     var url = new URL(to, window.location.href);
     var isActive = function isActive() {
@@ -832,7 +812,7 @@ var Links = function Links(_ref) {
     };
     var isMenuExpanded = isActive() && isActiveLinkExpanded;
     return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: mainIndex
+      key: index
     }, /*#__PURE__*/React.createElement(NavLink, _extends({
       activeClassName: "active",
       className: "neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none neeto-molecules-sidebar__link",
@@ -856,36 +836,9 @@ var Links = function Links(_ref) {
       })
     }, /*#__PURE__*/React.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 && isMenuExpanded && /*#__PURE__*/React.createElement(Items, {
+      items: items
+    }));
   }));
 };
 
@@ -916,7 +869,7 @@ var Sidebar = function Sidebar(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location]);
   var productName = globalProps$1.appName.substr(5).toLowerCase();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": "sidebar-container",
     className: classnames("neeto-molecules-sidebar__wrapper", {
       "neeto-molecules-sidebar__wrapper--collapsed": isSidebarCollapsed
@@ -933,10 +886,7 @@ var Sidebar = function Sidebar(_ref) {
     extraTopLinks: extraTopLinks,
     helpLinkOverrides: helpLinkOverrides,
     profileInfoOverrides: profileInfoOverrides,
-    showAppSwitcher: showAppSwitcher,
-    onAppSwitcherToggle: function onAppSwitcherToggle() {
-      return setIsAppSwitcherOpen(not);
-    }
+    showAppSwitcher: showAppSwitcher
   })), /*#__PURE__*/React.createElement(Button, {
     className: "neeto-molecules-sidebar__toggler",
     "data-cy": "neeto-molecules-sidebar-toggler",
@@ -956,12 +906,6 @@ var Sidebar = function Sidebar(_ref) {
     onClick: function onClick() {
       setIsSidebarCollapsed(!isSidebarCollapsed);
     }
-  })), showAppSwitcher && /*#__PURE__*/React.createElement(AppSwitcher, {
-    isSidebarCollapsed: isSidebarCollapsed,
-    isOpen: isAppSwitcherOpen,
-    onClose: function onClose() {
-      return setIsAppSwitcherOpen(false);
-    }
   }));
 };