@bigbinary/neeto-molecules 1.1.78 → 1.2.1-beta

package/dist/Sidebar.js

@@ -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, mergeDeepLeft, omit, inc, equals, 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,6 +83,42 @@ 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}";
@@ -244,40 +280,6 @@ 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 currentBrowserUrl = new URL(location.pathname + location.search, window.location.origin);
   var targetUrl = new URL(subRoute, window.location.origin);
@@ -295,6 +297,13 @@ 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 getProfileInfo = function getProfileInfo(isOwner, profileInfoOverrides) {
   var _globalProps$user, _globalProps$user2, _globalProps$user3, _globalProps$user4, _globalProps$user5;
@@ -453,9 +462,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 +474,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 +484,7 @@ var LinkSection = function LinkSection(_ref) {
       iconPosition: "left",
       iconSize: 18,
       style: "text"
-    }, _objectSpread$2({
+    }, _objectSpread$3({
       icon: icon,
       label: label,
       onClick: onClick
@@ -574,9 +583,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 +593,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 +608,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
@@ -688,26 +697,67 @@ var Header = function Header(_ref) {
 };
 var Header$1 = /*#__PURE__*/React.memo(Header);
 
-var _excluded = ["label", "to", "icon", "items"],
-  _excluded2 = ["label", "to", "count", "dataCy"];
-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;
+  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"),
+      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(Items, {
+      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 +767,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 +780,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 +803,61 @@ 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.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 && 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__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
   }));
 };
 
@@ -802,6 +876,10 @@ 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 _useLocalStorage = useLocalStorage(getSidebarStateLocalStorageKey(), false),
     _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
     isSidebarCollapsed = _useLocalStorage2[0],
@@ -814,6 +892,17 @@ var Sidebar = function Sidebar(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location]);
   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", {
@@ -825,8 +914,12 @@ var Sidebar = function Sidebar(_ref) {
     "data-testid": "sidebar"
   }, /*#__PURE__*/React.createElement(Header$1, {
     customLogo: customLogo
-  }), /*#__PURE__*/React.createElement(Links, {
-    navLinks: navLinks
+  }), isPresent(selectedNavLink) ? /*#__PURE__*/React.createElement(SelectedLink, {
+    setSelectedNavLink: setSelectedNavLink,
+    navLink: selectedNavLink
+  }) : /*#__PURE__*/React.createElement(Links, {
+    navLinks: navLinks,
+    setSelectedNavLink: setSelectedNavLink
   }), /*#__PURE__*/React.createElement(Footer, {
     extraTopLinks: extraTopLinks,
     helpLinkOverrides: helpLinkOverrides,