labsense-ui-kit 1.1.40 → 1.1.41

package/dist/Sidebar/Sidebar.d.ts

@@ -5,7 +5,8 @@ export interface SidebarItems {
     label: string;
     icon: IconNames;
     iconWeight?: string;
-    url: string;
+    url?: string;
+    children?: SidebarItems[];
 }
 export interface logoDetails {
     icon: IconNames;

package/dist/index.js

@@ -6093,33 +6093,32 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var _templateObject$l, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$6;
-var SidebarContainer = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+var _templateObject$l, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$7;
+var SidebarContainer = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: 100vh;\n  background: ", ";\n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? '225px' : '68px';
 }, function (_ref2) {
   var $background = _ref2.$background;
-  return $background ? $background : colorVariables.accent.softBlue;
+  return $background || colorVariables.accent.softBlue;
 });
-var SidebarItem = styled__default(reactRouterDom.NavLink)(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables.text.medium, colorVariables["default"].primary);
-var ContentWrapper = styled__default.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
-var IconWrapper$2 = styled__default.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  text-decoration: none;\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables.text.medium, colorVariables["default"].primary);
+var IconWrapper$2 = styled__default.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? colorVariables["default"].primary : colorVariables["default"].tertiary;
 });
-var Logo = styled__default.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
-var TextContainer = styled__default.span(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+var Logo = styled__default.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
+var TextContainer = styled__default.span(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
   var $fontSize = _ref5.$fontSize;
-  return $fontSize ? $fontSize : '20px';
+  return $fontSize || '20px';
 }, function (_ref6) {
   var $fontWeight = _ref6.$fontWeight;
-  return $fontWeight ? $fontWeight : '500';
+  return $fontWeight || '500';
 }, function (_ref7) {
   var $color = _ref7.$color;
-  return $color ? $color : colorVariables["default"].primary;
+  return $color || colorVariables["default"].primary;
 }, function (_ref8) {
   var $isExpanded = _ref8.$isExpanded;
   return $isExpanded ? 1 : 0;
@@ -6136,15 +6135,49 @@ var Sidebar = function Sidebar(_ref10) {
     isExpanded = _ref10$isExpanded === void 0 ? false : _ref10$isExpanded,
     setIsExpanded = _ref10.setIsExpanded;
   var location = reactRouterDom.useLocation();
-  var getTopLevelPathWithSlash = function getTopLevelPathWithSlash(pathname) {
-    var parts = pathname.split('/').filter(String);
-    return parts.length > 0 ? '/' + parts[0] : '/';
+  var _useState = React.useState({}),
+    openMenus = _useState[0],
+    setOpenMenus = _useState[1];
+  React.useEffect(function () {
+    if (!isExpanded) setOpenMenus({});
+  }, [isExpanded]);
+  var toggleMenu = function toggleMenu(id) {
+    setOpenMenus(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[id] = !prev[id], _extends2));
+    });
   };
-  var getTopLevelPath = function getTopLevelPath(pathname) {
-    var parts = pathname.split('/').filter(String);
-    return parts.length > 0 ? "/" + parts[0] + "/" : '/';
+  var isRouteActive = function isRouteActive(item) {
+    var _item$children;
+    return (item.url ? location.pathname.startsWith(item.url) : false) || ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.some(function (child) {
+      return child.url && location.pathname.startsWith(child.url);
+    }));
+  };
+  var renderChildLinks = function renderChildLinks(children) {
+    return React__default.createElement(Container, {
+      "$padding": '0px 0px 0px 16px',
+      "$flexDirection": 'column',
+      "$gap": '10px'
+    }, children.map(function (child) {
+      var active = location.pathname.startsWith(child.url || '');
+      return React__default.createElement(SidebarLink, {
+        to: child.url || '#',
+        key: child.id
+      }, React__default.createElement(IconWrapper$2, {
+        "$selected": active
+      }, React__default.createElement(Icon, {
+        icon: child.icon,
+        size: 18,
+        weight: child.iconWeight,
+        color: active ? colorVariables.text.white : colorVariables.text.medium
+      })), React__default.createElement(TextContainer, {
+        "$isExpanded": isExpanded,
+        "$fontSize": '12px',
+        "$padding": '0px 10px 0px 0px',
+        "$color": colorVariables.text.medium
+      }, child.label));
+    }));
   };
-  var topLevelPath = getTopLevelPathWithSlash(location.pathname) || getTopLevelPath(location.pathname);
   return React__default.createElement(SidebarContainer, {
     "$background": background,
     "$isExpanded": isExpanded,
@@ -6154,30 +6187,62 @@ var Sidebar = function Sidebar(_ref10) {
     onMouseLeave: function onMouseLeave() {
       return setIsExpanded(false);
     }
+  }, React__default.createElement(Container, {
+    "$flexDirection": 'column',
+    "$gap": '28px',
+    "$width": '100%'
   }, logo && React__default.createElement(Logo, null, React__default.createElement(Icon, {
     icon: logo.icon
   }), React__default.createElement(TextContainer, {
     "$isExpanded": isExpanded,
-    "$fontWeight": "700"
-  }, logo.name)), React__default.createElement(ContentWrapper, null, content.map(function (item) {
-    var isActive = item.url.includes(topLevelPath);
-    return React__default.createElement(SidebarItem, {
-      to: item.url,
-      key: item.id
+    "$fontWeight": '700'
+  }, logo.name)), React__default.createElement(Container, {
+    "$flexDirection": 'column',
+    "$gap": '16px',
+    "$width": '100%'
+  }, content.map(function (item) {
+    var _item$children2;
+    var active = isRouteActive(item);
+    var hasChildren = !!((_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length);
+    var isOpen = openMenus[item.id];
+    var ContentLayout = React__default.createElement(Container, {
+      "$alignItems": 'center',
+      "$gap": '8px',
+      "$width": '100%',
+      "$cursor": 'pointer',
+      "$borderRadius": '4px',
+      "$hoverBackground": colorVariables["default"].primary,
+      onClick: function onClick() {
+        return hasChildren && toggleMenu(item.id);
+      }
     }, React__default.createElement(IconWrapper$2, {
-      "$selected": isActive
+      "$selected": !!active
     }, React__default.createElement(Icon, {
       icon: item.icon,
       size: 20,
       weight: item.iconWeight,
-      color: isActive ? colorVariables.text.white : colorVariables.text.medium
+      color: active ? colorVariables.text.white : colorVariables.text.medium
     })), React__default.createElement(TextContainer, {
       "$isExpanded": isExpanded,
-      "$fontSize": "14px",
+      "$fontSize": '14px',
       "$padding": '0px 10px 0px 0px',
       "$color": colorVariables.text.medium
-    }, item.label));
-  })), ProfileContent);
+    }, item.label), hasChildren && React__default.createElement(Icon, {
+      icon: isOpen ? 'UpArrow' : 'DownArrow',
+      size: 10,
+      color: colorVariables.border.extraBold,
+      onClick: function onClick() {}
+    }));
+    return item.url ? React__default.createElement(SidebarLink, {
+      key: item.id,
+      to: item.url
+    }, ContentLayout) : React__default.createElement(Container, {
+      key: item.id,
+      "$flexDirection": 'column',
+      "$alignItems": 'start',
+      "$gap": '8px'
+    }, ContentLayout, hasChildren && isExpanded && isOpen && renderChildLinks(item.children));
+  }))), ProfileContent);
 };
 
 var _templateObject$m, _templateObject2$i, _templateObject3$c, _templateObject4$9;