@bigbinary/neeto-molecules 1.0.114 → 1.1.0

package/dist/Sidebar.js

@@ -1,18 +1,18 @@
 import React, { Children, isValidElement, cloneElement, forwardRef, useState, useRef, useEffect } from 'react';
-import { toLower, mergeDeepLeft, curry, is, includes, __, not } from 'ramda';
-import { Link, useLocation, NavLink } from 'react-router-dom';
-import { useFetchNeetoApps, useHotKeys } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { NeetoIcon, Close, Search, AppSwitcher as AppSwitcher$1, ChatEmpty, Book, Gift, Keyboard, User, Settings, LeftArrow, Help } from '@bigbinary/neeto-icons';
-import { Typography, Button, Input, Tooltip, Spinner, Avatar } from '@bigbinary/neetoui';
+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 { useTranslation } from 'react-i18next';
-import { capitalize, truncate, isPresent, findBy } from '@bigbinary/neeto-commons-frontend/pure';
+import { Link, useLocation, NavLink } from 'react-router-dom';
+import { NeetoIcon, Close, 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-commons-frontend/pure';
 import * as AppIcons from '@bigbinary/neeto-icons/app-icons';
 import { t as t$1 } from 'i18next';
 import { resetAuthTokens } from '@bigbinary/neeto-commons-frontend/utils';
 import KeyboardShortcuts from '@bigbinary/neeto-molecules/KeyboardShortcuts';
-import * as ProductLogos from '@bigbinary/neeto-icons/logos';
-import { Neeto } from '@bigbinary/neeto-icons/logos';
-import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/initializers';
+import * as ProductTypefaceLogos from '@bigbinary/neeto-icons/typeface-logos';
+import { Neeto } from '@bigbinary/neeto-icons/typeface-logos';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -34061,7 +34061,7 @@ SwitchTransition.defaultProps = {
 
 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:var(--neeto-ui-sidebar-width);overflow:hidden;position:fixed;top:0;width:100vw;z-index:99996}.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}.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:72px;position:relative;width:calc(100vw - var(--neeto-ui-sidebar-width))}.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__close-btn{position:absolute;right:24px;top:24px}.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__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}";
 n(css$1,{});
 
 function _extends() {
@@ -34189,7 +34189,7 @@ var Body = function Body(_ref) {
     className: "neeto-molecules-app-switcher__header",
     "data-cy": "app-switcher-body-wrapper"
   }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
+    style: "h1"
   }, t("neetoMolecules.appSwitcher.chooseNeetoProduct")), /*#__PURE__*/React.createElement("div", {
     className: "neeto-molecules-app-switcher__search-wrapper"
   }, /*#__PURE__*/React.createElement(Input, {
@@ -34266,7 +34266,8 @@ var useOnClickOutside = function useOnClickOutside(insideRef, outsideRef, handle
 
 var AppSwitcher = function AppSwitcher(_ref) {
   var isOpen = _ref.isOpen,
-    onClose = _ref.onClose;
+    onClose = _ref.onClose,
+    isSidebarCollapsed = _ref.isSidebarCollapsed;
   var paneWrapper = useRef(null);
   var backdropRef = useRef(null);
   useOnClickOutside(paneWrapper, backdropRef, onClose);
@@ -34283,56 +34284,38 @@ var AppSwitcher = function AppSwitcher(_ref) {
     "in": isOpen,
     timeout: 300
   }, /*#__PURE__*/React.createElement(Backdrop$1, {
-    className: "neeto-molecules-app-switcher__backdrop",
     key: "switcher-backdrop",
-    ref: backdropRef
+    ref: backdropRef,
+    className: classnames("neeto-molecules-app-switcher__backdrop", {
+      "neeto-molecules-app-switcher__backdrop--collapsed": isSidebarCollapsed
+    })
   }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-app-switcher__wrapper",
     "data-cy": "switcher-wrapper",
     "data-testid": "switcher-wrapper",
     key: "switcher-wrapper",
-    ref: paneWrapper
+    ref: paneWrapper,
+    className: classnames("neeto-molecules-app-switcher__wrapper", {
+      "neeto-molecules-app-switcher__wrapper--collapsed": isSidebarCollapsed
+    })
   }, /*#__PURE__*/React.createElement(Body, {
     onClose: onClose
   })))));
 };
 
-var FeaturedTooltip = function FeaturedTooltip(_ref) {
-  var label = _ref.label,
-    description = _ref.description;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-flex neeto-ui-flex-col sidebar-featured-tooltip"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-center sidebar-featured-tooltip__title",
-    lineHeight: "tight",
-    style: "h5",
-    weight: "semibold"
-  }, label), description && /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-center neeto-ui-text-gray-400 sidebar-featured-tooltip__description",
-    lineHeight: "normal",
-    style: "body3"
-  }, description));
-};
-var FeaturedTooltip$1 = /*#__PURE__*/React.memo(FeaturedTooltip);
-
-var NavIconWrapper = function NavIconWrapper(_ref) {
-  var description = _ref.description,
-    label = _ref.label,
-    children = _ref.children;
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    className: "sidebar-featured-tooltip__content",
-    content: /*#__PURE__*/React.createElement(FeaturedTooltip$1, {
-      description: description,
-      label: label
-    }),
-    delay: [400, 40],
-    distance: "20rem",
-    duration: [200, 200],
-    position: "right"
-  }, children);
+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 = ".neeto-molecules-sidebar{background-color:rgb(var(--neeto-ui-white));border-right:1px solid rgb(var(--neeto-ui-gray-200));height:100vh;max-width:300px;padding:40px 0;transition:all .3s;width:300px;z-index:99997}.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\"}@media (min-width:1440px){.neeto-molecules-sidebar{max-width:320px;width:320px}}.neeto-molecules-sidebar.neeto-molecules-sidebar--collapsed{max-width:var(--neeto-ui-sidebar-width);width:var(--neeto-ui-sidebar-width)}.neeto-molecules-sidebar__header{margin-bottom:40px;padding:0 20px;width:100%}.neeto-molecules-sidebar__logo,.neeto-molecules-sidebar__logo svg{height:40px;width:40px}.neeto-molecules-sidebar__info{padding-left:10px;width:calc(100% - 40px)}.neeto-molecules-sidebar__info .neeto-molecules-typography{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.neeto-molecules-sidebar__links{margin-bottom:20px;padding-left:12px;padding-right:12px;width:100%}.neeto-molecules-sidebar__link{border-radius:var(--neeto-ui-rounded);color:rgb(var(--neeto-ui-gray-600));cursor:pointer;margin:8px 0;padding:8px;position:relative;text-decoration:none;transition:all .3s}.neeto-molecules-sidebar__link.mb-0{margin-bottom:0}.neeto-molecules-sidebar__link-icon{flex-shrink:0;width:40px}.neeto-molecules-sidebar__link-label{overflow:hidden;padding-left:10px;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 40px)}.neeto-molecules-sidebar__link-sub-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 56px)}.neeto-molecules-sidebar__link:hover{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-gray-800));text-decoration:none}.neeto-molecules-sidebar__link:focus,.neeto-molecules-sidebar__link:focus-visible{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-gray-800));outline:none;text-decoration:none}.neeto-molecules-sidebar__link.active{background-color:rgb(var(--neeto-ui-primary-100));color:rgb(var(--neeto-ui-primary-600));text-decoration:none}.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{border-radius:var(--neeto-ui-rounded);color:rgb(var(--neeto-ui-gray-600));cursor:pointer;margin:4px 0;padding:8px 8px 8px 58px;text-decoration:none;transition:all .3s}.neeto-molecules-sidebar__sublink:hover{color:rgb(var(--neeto-ui-gray-700));text-decoration:none}.neeto-molecules-sidebar__sublink:focus,.neeto-molecules-sidebar__sublink:focus-visible{background-color:rgb(var(--neeto-ui-gray-300));color:rgb(var(--neeto-ui-gray-700));outline:none;text-decoration:none}.neeto-molecules-sidebar__sublink.active,.neeto-molecules-sidebar__sublink:active{color:rgb(var(--neeto-ui-gray-800));text-decoration:none}.neeto-molecules-sidebar__footer{margin-top:auto;padding:0 12px;width:100%}.neeto-molecules-sidebar__footer .neeto-molecules-sidebar__profile-wrapper{outline:none!important}.neeto-molecules-sidebar__footer .neeto-molecules-sidebar__profile{background-color:rgb(var(--neeto-ui-white));border-radius:var(--neeto-ui-rounded);box-shadow:var(--neeto-ui-shadow-sm);cursor:pointer;padding:8px;transition:var(--neeto-ui-transition);width:100%}.neeto-molecules-sidebar__footer .neeto-molecules-sidebar__profile-content{padding-left:10px;padding-right:30px;position:relative;width:calc(100% - 40px)}.neeto-molecules-sidebar__footer .neeto-molecules-sidebar__profile-content .neeto-molecules-typography{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.neeto-molecules-sidebar__footer .neeto-molecules-sidebar__profile-drop-icon{color:rgb(var(--neeto-ui-gray-500));position:absolute;right:8px;top:50%;transform:translateY(-50%)}.neeto-molecules-sidebar.neeto-molecules-sidebar--collapsed{padding:24px 0}.neeto-molecules-sidebar.neeto-molecules-sidebar--collapsed .neeto-molecules-sidebar__profile{background-color:transparent;box-shadow:none;padding:0}.neeto-molecules-sidebar.neeto-molecules-sidebar--collapsed .neeto-molecules-sidebar__header,.neeto-molecules-sidebar.neeto-molecules-sidebar--collapsed .neeto-molecules-sidebar__links{padding-left:16px;padding-right:16px}.neeto-molecules-sidebar.neeto-molecules-sidebar--collapsed .neeto-molecules-sidebar__link-icon{width:24px}.neeto-molecules-sidebar.neeto-molecules-sidebar--collapsed .neeto-molecules-sidebar__footer{padding-left:16px;padding-right:16px}.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:var(--neeto-ui-shadow-xs)!important}.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-sublist{border-top:1px solid rgb(var(--neeto-ui-gray-400));list-style:none;margin:0;padding:4px 0}.neeto-molecules-help-sublist__item,.neeto-molecules-profile-sublist__item{width:100%}.neeto-molecules-profile-sublist__item-btn{align-items:center;border-radius:0;color:rgb(var(--neeto-ui-gray-800));cursor:pointer;display:flex;font-size:var(--neeto-ui-text-sm);font-weight:var(--neeto-ui-font-normal);gap:8px;line-height:1.143;min-height:32px;outline-color:transparent;padding:6px 40px 6px 12px;position:relative;text-decoration:none;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.neeto-molecules-profile-sublist__item-btn.disabled{color:rgb(var(--neeto-ui-gray-500));cursor:not-allowed}.neeto-molecules-profile-sublist__item-btn:focus,.neeto-molecules-profile-sublist__item-btn:hover{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-profile-sublist__item-btn.active{background-color:rgb(var(--neeto-ui-gray-800));color:rgb(var(--neeto-ui-white))}.neeto-molecules-profile-sublist__item-btn--style-danger{color:rgb(var(--neeto-ui-error-800))}.neeto-molecules-profile-sublist__item-btn-icon{color:rgb(var(--neeto-ui-gray-600))}.neeto-molecules-profile-sublist__item-btn-icon svg{height:20px;width:20px}.neeto-molecules-help-sublist__item-btn{border-radius:0;color:rgb(var(--neeto-ui-gray-800));cursor:pointer;display:flex;font-size:var(--neeto-ui-text-sm);font-weight:var(--neeto-ui-font-normal);gap:8px;justify-content:flex-end;line-height:1.143;min-height:32px;outline-color:transparent;padding:6px 40px 6px 12px;position:relative;text-decoration:none;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.neeto-molecules-help-sublist__item-btn.disabled{color:rgb(var(--neeto-ui-gray-500));cursor:not-allowed}.neeto-molecules-help-sublist__item-btn:focus,.neeto-molecules-help-sublist__item-btn:hover{background-color:rgb(var(--neeto-ui-gray-200));box-shadow:none}.neeto-molecules-help-sublist__item-btn.active{background-color:rgb(var(--neeto-ui-gray-800));color:rgb(var(--neeto-ui-white))}.neeto-molecules-help-sublist__item-btn--style-danger{color:rgb(var(--neeto-ui-error-800))}.neeto-molecules-help-sublist__item-btn-icon{color:rgb(var(--neeto-ui-gray-600))}.neeto-molecules-help-sublist__item-btn-icon svg{height:20px;width:20px}.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;font-size:10px;justify-content:center;min-height:16px;min-width:16px;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.neeto-molecules-help-sublist__item-btn-count{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.neeto-molecules-sidebar__notif-count{position:absolute;right:-2px;top:-2px}";
+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__wrapper:hover .neeto-molecules-sidebar__toggler{opacity: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-hover-area{bottom:0;left:100%;position:absolute;top:0;width:40px;z-index:99998;z-index:var(--neeto-molecules-sidebar-z-index)}.neeto-molecules-sidebar__toggler{opacity:0;position:absolute;right:8px;top:8px;transition:opacity .3s ease-in-out;z-index:99999;z-index:calc(var(--neeto-molecules-sidebar-z-index) + 1)}.neeto-molecules-sidebar__toggler:focus{opacity: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-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}";
 n(css,{});
 
 var AppSwitcherButton = function AppSwitcherButton(_ref) {
@@ -34351,9 +34334,7 @@ var AppSwitcherButton = function AppSwitcherButton(_ref) {
   var handleAppSwitcherToggle = function handleAppSwitcherToggle(event) {
     if (!data) event.stopPropagation();else onAppSwitcherToggle();
   };
-  return /*#__PURE__*/React.createElement(NavIconWrapper, {
-    label: t("neetoMolecules.sidebar.productSwitcher")
-  }, /*#__PURE__*/React.createElement("button", {
+  return /*#__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",
@@ -34370,7 +34351,12 @@ var AppSwitcherButton = function AppSwitcherButton(_ref) {
     "data-testid": "app-switcher-button-loader"
   }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(AppSwitcher$1, {
     size: 24
-  }))));
+  })), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-label",
+    component: "span",
+    style: "body2",
+    weight: "normal"
+  }, t("neetoMolecules.sidebar.productSwitcher")));
 };
 
 var MY_PROFILE_URL = "/auth/profile/edit";
@@ -34388,7 +34374,7 @@ var DEFAULT_HELP_LINK_PROPS = {
     }
   },
   helpCenterProps: {
-    label: t$1("neetoMolecules.sidebar.helpLinks.helpCenter"),
+    label: t$1("neetoMolecules.sidebar.helpLinks.helpArticles"),
     icon: Book,
     "data-cy": "help-link-help-center-button",
     href: "https://help.".concat(toLower(globalProps.appName), ".com/"),
@@ -34407,6 +34393,24 @@ var DEFAULT_HELP_LINK_PROPS = {
   }
 };
 
+var isSubRouteActive = function isSubRouteActive(subRoute, location) {
+  var currentBrowserUrl = new URL(location.pathname + location.search, window.location.origin);
+  var targetUrl = new URL(subRoute, window.location.origin);
+  if (!currentBrowserUrl.pathname.startsWith(targetUrl.pathname)) {
+    return false;
+  }
+  var targetSearchParams = targetUrl.searchParams;
+  var targetSearchKeys = Array.from(targetSearchParams.keys());
+  return all(function (key) {
+    return currentBrowserUrl.searchParams.get(key) === targetSearchParams.get(key);
+  }, targetSearchKeys);
+};
+var getSidebarStateLocalStorageKey = function getSidebarStateLocalStorageKey() {
+  var _globalProps$user, _globalProps$user2;
+  var user = ((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.email) || ((_globalProps$user2 = globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.phoneNumber);
+  return "sidebarState-".concat(user);
+};
+
 var getProfileInfo = function getProfileInfo(isOwner, profileInfoOverrides) {
   var _globalProps$user, _globalProps$user2, _globalProps$user3, _globalProps$user4, _globalProps$user5;
   return mergeDeepLeft(profileInfoOverrides, {
@@ -34433,6 +34437,7 @@ var getProfileInfo = function getProfileInfo(isOwner, profileInfoOverrides) {
       label: t$1("neetoMolecules.sidebar.logout"),
       onClick: function onClick() {
         resetAuthTokens();
+        localStorage.removeItem(getSidebarStateLocalStorageKey());
         window.location.href = "/logout";
       },
       "data-cy": "profile-logout-button"
@@ -34451,7 +34456,7 @@ var ProfileSection = function ProfileSection(_ref, ref) {
     isLoading = _useFetchNeetoApps.isLoading,
     isStale = _useFetchNeetoApps.isStale;
   return /*#__PURE__*/React.createElement("button", {
-    className: "neeto-molecules-sidebar__profile-wrapper neeto-ui-w-full neeto-ui-text-left",
+    className: "neeto-molecules-sidebar__link neeto-molecules-sidebar__link--button neeto-ui-shadow-none neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none",
     "data-cy": "profile-section",
     "data-testid": "profile-section",
     ref: ref,
@@ -34461,17 +34466,19 @@ var ProfileSection = function ProfileSection(_ref, ref) {
         setHasHovered(true);
       }
     }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "neeto-molecules-sidebar__profile neeto-ui-flex neeto-ui-w-full neeto-ui-flex-shrink-0 neeto-ui-items-center"
   }, isLoading && hasHovered ? /*#__PURE__*/React.createElement("span", {
-    className: "flex h-10 w-10 items-center justify-center",
     "data-testid": "profile-avatar-loader"
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(Avatar, {
-    className: "neeto-ui-flex-shrink-0",
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Avatar, {
+    className: "neeto-ui-flex-shrink-0 neeto-molecules-sidebar__profile-avatar",
     "data-testid": "profile-avatar",
-    size: "large",
+    size: "small",
     user: profileInfo
-  })));
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-label",
+    component: "span",
+    style: "body2",
+    weight: "normal"
+  }, truncate(profileInfo.name, 18))));
 };
 var ProfileSection$1 = /*#__PURE__*/forwardRef(ProfileSection);
 
@@ -34491,7 +34498,50 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
 var _excluded$2 = ["onClick", "label", "icon"];
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var LinkSection = function LinkSection(_ref) {
   var links = _ref.links;
   return /*#__PURE__*/React.createElement("ul", {
@@ -34502,22 +34552,20 @@ var LinkSection = function LinkSection(_ref) {
       _ref2$icon = _ref2.icon,
       icon = _ref2$icon === void 0 ? null : _ref2$icon,
       otherProps = _objectWithoutProperties(_ref2, _excluded$2);
-    var IconSVG = icon;
     return /*#__PURE__*/React.createElement("li", {
       className: "neeto-molecules-profile-sublist__item",
       key: idx
-    }, /*#__PURE__*/React.createElement("button", _extends({
+    }, /*#__PURE__*/React.createElement(Button, _extends({
+      fullWidth: true,
+      className: "neeto-molecules-profile-sublist__item-btn",
+      iconPosition: "left",
+      iconSize: 18,
+      style: "text"
+    }, _objectSpread$2({
+      icon: icon,
+      label: label,
       onClick: onClick
-    }, otherProps, {
-      className: "neeto-molecules-profile-sublist__item-btn"
-    }), icon && /*#__PURE__*/React.createElement("span", {
-      className: "neeto-molecules-profile-sublist__item-btn-icon"
-    }, /*#__PURE__*/React.createElement(IconSVG, null)), /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-molecules-profile-sublist__item-btn-label",
-      component: "span",
-      style: "body2",
-      weight: "normal"
-    }, label)));
+    }, otherProps))));
   }));
 };
 
@@ -34534,7 +34582,7 @@ var ProfileMenu = function ProfileMenu(_ref) {
     "data-cy": "profile-popup",
     "data-testid": "profile-popup"
   }, /*#__PURE__*/React.createElement("div", {
-    className: classnames("neeto-ui-relative neeto-ui-flex neeto-ui-items-center neeto-ui-p-3")
+    className: classnames("neeto-ui-relative neeto-ui-flex neeto-ui-items-center neeto-ui-p-3 neeto-ui-bg-primary-100 neeto-molecules-profile-popup__top-section")
   }, /*#__PURE__*/React.createElement("div", {
     className: "top-0 left-0"
   }, /*#__PURE__*/React.createElement(Avatar, {
@@ -34550,7 +34598,7 @@ var ProfileMenu = function ProfileMenu(_ref) {
     title: name,
     weight: "semibold"
   }, truncate(name, 18)), email && /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-w-full neeto-ui-truncate neeto-ui-text-gray-600",
+    className: "neeto-ui-w-full neeto-ui-truncate neeto-ui-text-gray-700",
     lineHeight: "tight",
     style: "body3"
   }, email))), /*#__PURE__*/React.createElement("div", {
@@ -34577,6 +34625,8 @@ var ProfileButton = function ProfileButton(_ref) {
     }),
     disabled: !data,
     hideOnClick: false,
+    interactiveDebounce: 20,
+    offset: [0, -70],
     position: "right",
     theme: "light"
   }, /*#__PURE__*/React.createElement(ProfileSection$1, {
@@ -34584,10 +34634,14 @@ var ProfileButton = function ProfileButton(_ref) {
   }));
 };
 
+// Rule can be enabled once the ticket - https://github.com/bigbinary/neeto-commons-frontend/issues/905 is closed.
+// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
 var HelpSection = function HelpSection(_ref, ref) {
   var changesCount = _ref.changesCount;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   return /*#__PURE__*/React.createElement("button", {
-    className: "neeto-molecules-sidebar__link neeto-molecules-sidebar__link--button neeto-ui-shadow-none",
+    className: "neeto-molecules-sidebar__link neeto-molecules-sidebar__link--button neeto-ui-shadow-none neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none",
     "data-cy": "help-button",
     ref: ref
   }, /*#__PURE__*/React.createElement("span", {
@@ -34597,51 +34651,15 @@ var HelpSection = function HelpSection(_ref, ref) {
   }), isPresent(changesCount) && /*#__PURE__*/React.createElement("span", {
     className: "neeto-molecules-sidebar__notif-count",
     "data-testid": "help-icon-changes-count"
-  }, changesCount)));
+  }, changesCount)), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-label",
+    component: "span",
+    style: "body2",
+    weight: "normal"
+  }, t("neetoMolecules.sidebar.helpLinks.helpCenter")));
 };
 var HelpSection$1 = /*#__PURE__*/forwardRef(HelpSection);
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
 var _excluded$1 = ["label"];
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -34663,13 +34681,16 @@ var HelpSectionMenu = function HelpSectionMenu(_ref) {
     var hide = _ref2.hide;
     return !hide;
   });
-  return /*#__PURE__*/React.createElement("ul", null, helpLinks.map(function (_ref3, idx) {
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "neeto-molecules-help-sublist"
+  }, helpLinks.map(function (_ref3, idx) {
     var label = _ref3.label,
       buttonProps = _objectWithoutProperties(_ref3, _excluded$1);
     return /*#__PURE__*/React.createElement("li", {
       className: "neeto-molecules-help-sublist__item",
       key: idx
     }, /*#__PURE__*/React.createElement(Button, _extends({
+      fullWidth: true,
       className: "neeto-molecules-help-sublist__item-btn",
       iconPosition: "left",
       iconSize: 18,
@@ -34706,7 +34727,7 @@ var Footer = function Footer(_ref) {
     window.Nv = window.Nv ? Object.assign(window.Nv, Nv) : Nv;
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-sidebar__footer"
+    className: "neeto-molecules-sidebar__footer neeto-molecules-sidebar__no-shrinkable"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     interactive: true,
     className: "neeto-molecules-help-popup-wrapper",
@@ -34715,6 +34736,8 @@ var Footer = function Footer(_ref) {
       helpLinkOverrides: helpLinkOverrides
     }),
     hideOnClick: false,
+    interactiveDebounce: 20,
+    offset: [0, -70],
     position: "right",
     theme: "light"
   }, /*#__PURE__*/React.createElement(HelpSection$1, {
@@ -34728,12 +34751,12 @@ var Footer = function Footer(_ref) {
 };
 
 var Header = function Header(_ref) {
-  var _ProductLogos$logoNam;
+  var _ProductTypefaceLogos;
   var customLogo = _ref.customLogo;
   var productName = globalProps.appName.substr(5);
   var logoName = "Neeto".concat(capitalize(productName.toLowerCase()));
-  var ProductLogo = (_ProductLogos$logoNam = ProductLogos[logoName]) !== null && _ProductLogos$logoNam !== void 0 ? _ProductLogos$logoNam : Neeto;
-  var LogoComponent = customLogo !== null && customLogo !== void 0 ? customLogo : ProductLogo;
+  var ProductTypefaceLogo = (_ProductTypefaceLogos = ProductTypefaceLogos[logoName]) !== null && _ProductTypefaceLogos !== void 0 ? _ProductTypefaceLogos : Neeto;
+  var LogoComponent = customLogo !== null && customLogo !== void 0 ? customLogo : ProductTypefaceLogo;
   var _useFetchNeetoApps = useFetchNeetoApps(),
     data = _useFetchNeetoApps.data;
   var homePath = "/";
@@ -34746,22 +34769,26 @@ var Header = function Header(_ref) {
     }
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-flex neeto-ui-items-center neeto-molecules-sidebar__header",
+    className: "neeto-molecules-sidebar__header neeto-molecules-sidebar__no-shrinkable",
     "data-cy": "sidebar-info"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-sidebar__logo flex flex-shrink-0 items-center justify-center"
   }, /*#__PURE__*/React.createElement(Link, {
+    className: "neeto-molecules-sidebar__logo neeto-ui-w-full",
     to: homePath
-  }, /*#__PURE__*/React.createElement(LogoComponent, null))));
+  }, /*#__PURE__*/React.createElement(LogoComponent, null)));
 };
 var Header$1 = /*#__PURE__*/React.memo(Header);
 
-var _excluded = ["label", "to", "icon", "description"];
+var _excluded = ["label", "to", "icon", "items"],
+  _excluded2 = ["label", "to", "count", "dataCy"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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) {
@@ -34769,33 +34796,84 @@ var Links = function Links(_ref) {
     }
     return true;
   });
+  var handleNavLinkClick = function handleNavLinkClick(event, isActive, items) {
+    if (isNotPresent(items)) return;
+    if (isActive()) {
+      setIsActiveLinkExpanded(not);
+      event.preventDefault();
+      return;
+    }
+    setIsActiveLinkExpanded(true);
+  };
   return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-sidebar__links"
+    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,
-      description = _ref3.description,
+      items = _ref3.items,
       otherProps = _objectWithoutProperties(_ref3, _excluded);
     var IconSVG = icon;
     var url = new URL(to, window.location.href);
     var isActive = function isActive() {
-      return location.pathname.startsWith(url.pathname);
+      return is(Function, otherProps.isActive) ? otherProps.isActive() : location.pathname.startsWith(url.pathname);
     };
-    return /*#__PURE__*/React.createElement(NavIconWrapper, {
-      description: description,
-      label: label,
+    var isMenuExpanded = isActive() && isActiveLinkExpanded;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
       key: mainIndex
     }, /*#__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"
+      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);
+      }
     }, _objectSpread({
       isActive: isActive,
       to: to
-    }, otherProps)), icon && /*#__PURE__*/React.createElement("div", {
-      className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-molecules-sidebar__link-icon",
+    }, otherProps)), icon && /*#__PURE__*/React.createElement("span", {
+      className: "neeto-molecules-sidebar__link-icon",
       "data-testid": label
-    }, /*#__PURE__*/React.createElement(IconSVG, null))));
+    }, /*#__PURE__*/React.createElement(IconSVG, null)), /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-molecules-sidebar__link-label",
+      component: "span",
+      style: "body2",
+      weight: "normal"
+    }, label), items && /*#__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));
+    })));
   }));
 };
 
@@ -34814,15 +34892,27 @@ var Sidebar = function Sidebar(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isAppSwitcherOpen = _useState2[0],
     setIsAppSwitcherOpen = _useState2[1];
+  var _useLocalStorage = useLocalStorage(getSidebarStateLocalStorageKey(), false),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    isSidebarCollapsed = _useLocalStorage2[0],
+    setIsSidebarCollapsed = _useLocalStorage2[1];
   var location = useLocation();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   useEffect(function () {
     isAppSwitcherOpen && setIsAppSwitcherOpen(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location]);
+  var productName = globalProps$1.appName.substr(5).toLowerCase();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "sidebar-container",
+    className: classnames("neeto-molecules-sidebar__wrapper", {
+      "neeto-molecules-sidebar__wrapper--collapsed": isSidebarCollapsed
+    })
+  }, /*#__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",
     "data-cy": "sidebar-wrapper",
-    "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--collapsed")
+    "data-testid": "sidebar"
   }, /*#__PURE__*/React.createElement(Header$1, {
     customLogo: customLogo
   }), /*#__PURE__*/React.createElement(Links, {
@@ -34835,7 +34925,29 @@ var Sidebar = function Sidebar(_ref) {
     onAppSwitcherToggle: function onAppSwitcherToggle() {
       return setIsAppSwitcherOpen(not);
     }
+  })), isSidebarCollapsed && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-sidebar__toggler-hover-area"
+  }), /*#__PURE__*/React.createElement(Button, {
+    className: "neeto-molecules-sidebar__toggler",
+    "data-cy": "neeto-molecules-sidebar-toggler",
+    "data-testid": "sidebar-toggleButton",
+    style: "text",
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(Chevron, {
+        style: {
+          color: "rgb(var(--neeto-".concat(productName, "-primary))")
+        }
+      });
+    },
+    tooltipProps: {
+      content: isSidebarCollapsed ? t("neetoMolecules.sidebar.showMenu") : t("neetoMolecules.sidebar.hideMenu"),
+      position: "bottom"
+    },
+    onClick: function onClick() {
+      setIsSidebarCollapsed(!isSidebarCollapsed);
+    }
   })), showAppSwitcher && /*#__PURE__*/React.createElement(AppSwitcher, {
+    isSidebarCollapsed: isSidebarCollapsed,
     isOpen: isAppSwitcherOpen,
     onClose: function onClose() {
       return setIsAppSwitcherOpen(false);