npm - @bigbinary/neeto-molecules - Versions diffs - 1.2.3 → 1.2.5-beta - Mend

@bigbinary/neeto-molecules 1.2.3 → 1.2.5-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/CustomDomainDashboard.js +1 -1
package/dist/Header.js +1 -1
package/dist/PhoneNumber.js +87 -37
package/dist/PhoneNumber.js.map +1 -1
package/dist/Security.js +1 -1
package/dist/Sidebar.js +264 -116
package/dist/Sidebar.js.map +1 -1
package/dist/Taxonomy.js +1 -1
package/package.json +1 -1
package/src/translations/en.json +2 -1
package/types/PhoneNumber.d.ts +3 -2

package/dist/Sidebar.js CHANGED Viewed

@@ -1,16 +1,16 @@
 import React, { useState, forwardRef, useEffect } from 'react';
 import classnames from 'classnames';
+import { capitalize, truncate, isPresent, findBy, notEquals, isNotPresent } 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 { toLower, curry, is, includes, __, all, equals, mergeDeepLeft, omit, inc, not } 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 { Link, NavLink, useLocation } from 'react-router-dom';
 import { t as t$1 } from 'i18next';
+import { ChatEmpty, Book, Gift, Keyboard, NeetoIcon, Search, AppSwitcher as AppSwitcher$1, User, Settings, LeftArrow, Help, Down, Left } from '@bigbinary/neeto-icons';
+import * as AppIcons from '@bigbinary/neeto-icons/app-icons';
 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 * as ProductTypefaceLogos from '@bigbinary/neeto-icons/typeface-logos';
 import { Neeto } from '@bigbinary/neeto-icons/typeface-logos';
@@ -83,9 +83,45 @@ var Chevron = function Chevron(_ref) {
   }));
 };
+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 NAVLINK_KEYS_TO_OMIT = ["Component", "component"];
+var SETTINGS = "Settings";
 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}";
+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}}@media screen and (max-width:768px){.neeto-molecules-app-switcher__wrapper{padding:16px}}.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))}}@media only screen and (max-width:640px){.neeto-molecules-app-switcher__grid{grid-template-columns:repeat(auto-fill,minmax(100%,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:24px}}.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() {
@@ -197,7 +233,7 @@ var AppSwitcher = function AppSwitcher() {
   }, /*#__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}";
+var css = ":root{--neeto-molecules-sidebar-width:240px;--neeto-molecules-sidebar-wrapper-z-index:99997;--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}@media screen and (min-width:1024px){:root{--neeto-molecules-sidebar-width:240px}}.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)}@media screen and (max-width:768px){.neeto-molecules-sidebar__wrapper{height:100%;left:0;max-width:100%;position:fixed;top:0;transition:none;width:100%;z-index:99997;z-index:var(--neeto-molecules-sidebar-wrapper-z-index)}.neeto-molecules-sidebar__wrapper .neeto-molecules-sidebar{left:0;max-width:240px;max-width:var(--neeto-molecules-sidebar-width);position:fixed;top:0;transition:none;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)}@media screen and (max-width:768px){.neeto-molecules-sidebar__wrapper--collapsed .neeto-molecules-sidebar__toggler{left:8px;right:auto}.neeto-molecules-sidebar__wrapper--collapsed .neeto-molecules-sidebar{left:-240px;left:calc(var(--neeto-molecules-sidebar-width)*-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)}@media screen and (max-width:768px){.neeto-molecules-sidebar__toggler{left:202px;left:calc(var(--neeto-molecules-sidebar-width) - 38px);right:auto;transition:none}}.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}@media screen and (max-width:768px){.neeto-molecules-app-switcher-popup-wrapper{width:calc(100vw - 185px)!important}}.neeto-molecules-sidebar__backdrop{background-color:rgba(var(--neeto-ui-black),.4);height:100%;left:0;position:absolute;top:0;width:100%}@media screen and (min-width:769px){.neeto-molecules-sidebar__backdrop{display:none;visibility:hidden}}.neeto-molecules-sidebar.neeto-molecules-sidebar--focus-mode{padding-top:0}.neeto-molecules-sidebar.neeto-molecules-sidebar--focus-mode .neeto-molecules-sidebar__header{padding-top:24px}.neeto-molecules-sidebar.neeto-molecules-sidebar--focus-mode .neeto-molecules-sidebar__links{margin-bottom:0}.neeto-molecules-sidebar__links--focus-mode .neeto-molecules-sidebar__sublink-wrapper{margin:0!important;padding:0!important}.neeto-molecules-sidebar__links--focus-mode .neeto-molecules-sidebar__link{--neeto-ui-text-body2:16px;gap:4px;padding:12px 4px;position:sticky;top:0;z-index:1}.neeto-molecules-sidebar__links--focus-mode>.neeto-molecules-sidebar__sublink-wrapper>.neeto-molecules-sidebar__sublink{--neeto-ui-text-body2:15px;border-top:1px solid rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-black));font-weight:var(--neeto-ui-font-medium);margin-bottom:0!important;padding-bottom:8px!important;padding-top:8px!important}.neeto-molecules-sidebar__links--focus-mode>.neeto-molecules-sidebar__sublink-wrapper>.neeto-molecules-sidebar__sublink-wrapper>.neeto-molecules-sidebar__sublink-wrapper .neeto-molecules-sidebar__sublink{--neeto-ui-text-body2:13px;padding-left:40px!important}.neeto-molecules-sidebar__links--focus-mode .neeto-molecules-sidebar__sublink{margin-bottom:4px;padding:4px 4px 4px 30px!important;position:relative}.neeto-molecules-sidebar__links--focus-mode .neeto-molecules-sidebar__sublink:hover{background-color:rgb(var(--neeto-ui-gray-100))}.neeto-molecules-sidebar__links--focus-mode .neeto-molecules-sidebar__sublink.active{background-color:rgb(var(--neeto-ui-primary-100))!important}.neeto-molecules-sidebar__links--focus-mode .neeto-molecules-sidebar__sublink.active:before{background-color:rgb(var(--neeto-ui-primary-500));border-radius:var(--neeto-ui-rounded);content:\"\";height:100%;left:-1px;position:absolute;top:0;width:3px}";
 n(css,{});
 var AppSwitcherButton = function AppSwitcherButton() {
@@ -213,13 +249,17 @@ var AppSwitcherButton = function AppSwitcherButton() {
     isStale = _useFetchNeetoApps.isStale;
   return /*#__PURE__*/React.createElement(Tooltip, {
     interactive: true,
+    appendTo: function appendTo() {
+      return document.body;
+    },
     className: "neeto-molecules-app-switcher-popup-wrapper",
     content: /*#__PURE__*/React.createElement(AppSwitcher, null),
+    delay: [300, null],
     disabled: !data,
     hideOnClick: false,
-    interactiveDebounce: 20,
     offset: [0, -70],
     position: "right",
+    strategy: "fixed",
     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",
@@ -244,41 +284,10 @@ var AppSwitcherButton = function AppSwitcherButton() {
   }, 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 isSubRouteActive = function isSubRouteActive(_ref) {
+  var subRoute = _ref.subRoute,
+    location = _ref.location,
+    isSettingsItems = _ref.isSettingsItems;
   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)) {
@@ -286,15 +295,28 @@ var isSubRouteActive = function isSubRouteActive(subRoute, location) {
   }
   var targetSearchParams = targetUrl.searchParams;
   var targetSearchKeys = Array.from(targetSearchParams.keys());
-  return all(function (key) {
+  var targetUrlWithSearch = targetUrl.pathname + targetUrl.search;
+  var currentUrlWithSearch = currentBrowserUrl.pathname + currentBrowserUrl.search;
+  var isLinkActive = all(function (key) {
     return currentBrowserUrl.searchParams.get(key) === targetSearchParams.get(key);
   }, targetSearchKeys);
+  if (isSettingsItems) {
+    return isLinkActive && equals(currentUrlWithSearch, targetUrlWithSearch);
+  }
+  return isLinkActive;
 };
 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 filterByPermissions = curry(function (_ref2) {
+  var permissions = _ref2.permissions;
+  if (permissions) {
+    return is(Array, permissions) ? permissions.some(includes(__, globalProps.permissions)) : globalProps.permissions.includes(permissions);
+  }
+  return true;
+});
 var getProfileInfo = function getProfileInfo(isOwner, profileInfoOverrides) {
   var _globalProps$user, _globalProps$user2, _globalProps$user3, _globalProps$user4, _globalProps$user5;
@@ -453,9 +475,9 @@ function _objectWithoutProperties(source, excluded) {
   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 _excluded$4 = ["onClick", "label", "icon"];
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(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", {
@@ -465,7 +487,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$4);
     return /*#__PURE__*/React.createElement("li", {
       className: "neeto-molecules-profile-sublist__item",
       key: idx
@@ -475,7 +497,7 @@ var LinkSection = function LinkSection(_ref) {
       iconPosition: "left",
       iconSize: 18,
       style: "text"
-    }, _objectSpread$2({
+    }, _objectSpread$3({
       icon: icon,
       label: label,
       onClick: onClick
@@ -532,6 +554,9 @@ var ProfileButton = function ProfileButton(_ref) {
   var profileInfo = getProfileInfo(data === null || data === void 0 ? void 0 : data.isOwner, profileInfoOverrides);
   return /*#__PURE__*/React.createElement(Tooltip, {
     interactive: true,
+    appendTo: function appendTo() {
+      return document.body;
+    },
     className: "neeto-molecules-profile-popup-wrapper",
     content: /*#__PURE__*/React.createElement(ProfileMenu, {
       extraTopLinks: extraTopLinks,
@@ -542,6 +567,7 @@ var ProfileButton = function ProfileButton(_ref) {
     interactiveDebounce: 20,
     offset: [0, -70],
     position: "right",
+    strategy: "fixed",
     theme: "light"
   }, /*#__PURE__*/React.createElement(ProfileSection$1, {
     profileInfo: profileInfo
@@ -574,9 +600,9 @@ var HelpSection = function HelpSection(_ref, ref) {
 };
 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 _excluded$3 = ["label"];
+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 HelpSectionMenu = function HelpSectionMenu(_ref) {
   var helpLinkOverrides = _ref.helpLinkOverrides,
     changesCount = _ref.changesCount;
@@ -584,7 +610,7 @@ var HelpSectionMenu = function HelpSectionMenu(_ref) {
     _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" && {
+    return _objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, DEFAULT_HELP_LINK_PROPS[key]), helpLinkOverrides[key]), key === "keyboardShortcutProps" && {
       onClick: function onClick() {
         return setIsOpen(true);
       }
@@ -599,7 +625,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$3);
     return /*#__PURE__*/React.createElement("li", {
       className: "neeto-molecules-help-sublist__item",
       key: idx
@@ -642,6 +668,9 @@ var Footer = function Footer(_ref) {
     className: "neeto-molecules-sidebar__footer neeto-molecules-sidebar__no-shrinkable"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     interactive: true,
+    appendTo: function appendTo() {
+      return document.body;
+    },
     className: "neeto-molecules-help-popup-wrapper",
     content: /*#__PURE__*/React.createElement(HelpSectionMenu, {
       changesCount: changesCount,
@@ -688,26 +717,74 @@ var Header = function Header(_ref) {
 };
 var Header$1 = /*#__PURE__*/React.memo(Header);
-var _excluded = ["label", "to", "icon", "items"],
-  _excluded2 = ["label", "to", "count", "data-cy"];
-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 _excluded$2 = ["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,
+    _ref$isSettingsItems = _ref.isSettingsItems,
+    isSettingsItems = _ref$isSettingsItems === void 0 ? false : _ref$isSettingsItems;
+  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 (_ref2, index) {
+    var label = _ref2.label,
+      to = _ref2.to,
+      count = _ref2.count,
+      dataCy = _ref2.dataCy,
+      subItems = _ref2.items,
+      otherProps = _objectWithoutProperties(_ref2, _excluded$2);
+    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"),
+      key: index,
+      isActive: function isActive() {
+        return isSubRouteActive({
+          subRoute: to,
+          location: location,
+          isSettingsItems: isSettingsItems
+        });
+      }
+    }, 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(Items, {
+      isSettingsItems: isSettingsItems,
+      items: subItems,
+      level: inc(level)
+    }));
+  }));
+};
+var _excluded$1 = ["label", "to", "icon", "items"];
+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 Links = function Links(_ref) {
-  var navLinks = _ref.navLinks;
-  var location = useLocation();
+  var navLinks = _ref.navLinks,
+    setSelectedNavLink = _ref.setSelectedNavLink;
   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 location = useLocation();
+  var handleNavLinkClick = function handleNavLinkClick(_ref2) {
+    var event = _ref2.event,
+      isActive = _ref2.isActive,
+      items = _ref2.items,
+      navLink = _ref2.navLink;
     if (isNotPresent(items)) return;
+    equals(navLink.label, SETTINGS) && setSelectedNavLink(navLink);
     if (isActive()) {
       setIsActiveLinkExpanded(not);
       event.preventDefault();
@@ -717,12 +794,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);
+  }, navLinks.filter(filterByPermissions).map(function (navLink, index) {
+    var label = navLink.label,
+      to = navLink.to,
+      icon = navLink.icon,
+      items = navLink.items,
+      otherProps = _objectWithoutProperties(navLink, _excluded$1);
     var IconSVG = icon;
     var url = new URL(to, window.location.href);
     var isActive = function isActive() {
@@ -730,14 +807,19 @@ 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",
       onClick: function onClick(event) {
-        return handleNavLinkClick(event, isActive, items);
+        return handleNavLinkClick({
+          event: event,
+          isActive: isActive,
+          items: items,
+          navLink: navLink
+        });
       }
-    }, _objectSpread({
+    }, _objectSpread$1({
       isActive: isActive,
       to: to
     }, otherProps)), icon && /*#__PURE__*/React.createElement("span", {
@@ -748,42 +830,62 @@ var Links = function Links(_ref) {
       component: "span",
       style: "body2",
       weight: "normal"
-    }, label), items && /*#__PURE__*/React.createElement("span", {
+    }, label), items && notEquals(label, SETTINGS) && /*#__PURE__*/React.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, {
       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["data-cy"],
-        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 && notEquals(label, SETTINGS) && isMenuExpanded && /*#__PURE__*/React.createElement(Items, {
+      items: items
+    }));
+  }));
+};
+var _excluded = ["label", "to", "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 SelectedLink = function SelectedLink(_ref) {
+  var navLink = _ref.navLink,
+    setSelectedNavLink = _ref.setSelectedNavLink;
+  var location = useLocation();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var label = navLink.label,
+    to = navLink.to,
+    items = navLink.items,
+    otherProps = _objectWithoutProperties(navLink, _excluded);
+  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 handleGoBack = function handleGoBack(event) {
+    event.preventDefault();
+    setSelectedNavLink({});
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-sidebar__links neeto-molecules-sidebar__links--focus-mode neeto-molecules-sidebar__no-shrinkable"
+  }, /*#__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"
+  }, _objectSpread({
+    isActive: isActive,
+    to: to
+  }, otherProps)), /*#__PURE__*/React.createElement(Tooltip, {
+    content: t("neetoMolecules.sidebar.goBack"),
+    position: "top"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "neeto-molecules-sidebar__link-icon",
+    "data-testid": "".concat(label, "-go-back-button"),
+    onClick: handleGoBack
+  }, /*#__PURE__*/React.createElement(Left, null))), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-label",
+    component: "span",
+    style: "body2",
+    weight: "normal"
+  }, label)), items && /*#__PURE__*/React.createElement(Items, {
+    items: items,
+    isSettingsItems: true
   }));
 };
@@ -802,6 +904,14 @@ var Sidebar = function Sidebar(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isAppSwitcherOpen = _useState2[0],
     setIsAppSwitcherOpen = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedNavLink = _useState4[0],
+    setSelectedNavLink = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isSidebarPaneOpen = _useState6[0],
+    setIsSidebarPaneOpen = _useState6[1];
   var _useLocalStorage = useLocalStorage(getSidebarStateLocalStorageKey(), false),
     _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
     isSidebarCollapsed = _useLocalStorage2[0],
@@ -809,25 +919,62 @@ var Sidebar = function Sidebar(_ref) {
   var location = useLocation();
   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]);
+  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 productName = globalProps$1.appName.substr(5).toLowerCase();
+  useEffect(function () {
+    var currentLink = navLinks.find(function (_ref2) {
+      var to = _ref2.to,
+        isActive = _ref2.isActive;
+      var url = new URL(to, window.location.href);
+      return is(Function, isActive) ? isActive() : location.pathname.startsWith(url.pathname);
+    });
+    if (isPresent(currentLink) && equals(currentLink.label, SETTINGS)) {
+      setSelectedNavLink(currentLink);
+    }
+  }, []);
   return /*#__PURE__*/React.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",
+    className: "neeto-molecules-sidebar__backdrop",
+    onClick: function onClick() {
+      setIsSidebarPaneOpen(false);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     "data-cy": "sidebar-wrapper",
-    "data-testid": "sidebar"
+    "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(selectedNavLink)
+    })
   }, /*#__PURE__*/React.createElement(Header$1, {
     customLogo: customLogo
-  }), /*#__PURE__*/React.createElement(Links, {
-    navLinks: navLinks
-  }), /*#__PURE__*/React.createElement(Footer, {
+  }), isPresent(selectedNavLink) ? /*#__PURE__*/React.createElement(SelectedLink, {
+    setSelectedNavLink: setSelectedNavLink,
+    navLink: selectedNavLink
+  }) : /*#__PURE__*/React.createElement(Links, {
+    navLinks: navLinks,
+    setSelectedNavLink: setSelectedNavLink
+  }), isNotPresent(selectedNavLink) && /*#__PURE__*/React.createElement(Footer, {
     extraTopLinks: extraTopLinks,
     helpLinkOverrides: helpLinkOverrides,
     profileInfoOverrides: profileInfoOverrides,
@@ -836,7 +983,7 @@ var Sidebar = function Sidebar(_ref) {
     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, {
         style: {
@@ -845,11 +992,12 @@ var Sidebar = function Sidebar(_ref) {
       });
     },
     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);
     }
   }));
 };