labsense-ui-kit 1.3.75 → 1.3.76

package/dist/index.js

@@ -10768,48 +10768,49 @@ var ProgressBar = function ProgressBar(_ref3) {
   }));
 };
 
-var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$8, _templateObject7$6;
-var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: 68px;\n  max-width: 68px;\n  height: 100vh;\n  background: ", ";\n  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\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: 998;\n  justify-content: space-between;\n  gap: 24px;\n\n  /* Expand on hover */\n  &:hover {\n    width: max-content;\n    max-width: 400px;\n\n    /* You can also add a class for children */\n    span, .expandable {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n  }\n"])), function (_ref) {
-  var $background = _ref.$background,
-    theme = _ref.theme;
+var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$8, _templateObject7$6, _templateObject8$5, _templateObject9$5;
+var MOBILE_BREAKPOINT = '768px';
+var Overlay = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  display: none;\n  \n  @media (max-width: ", ") {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.5);\n    z-index: 997;\n    opacity: ", ";\n    visibility: ", ";\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n  }\n"])), MOBILE_BREAKPOINT, function (_ref) {
+  var $isOpen = _ref.$isOpen;
+  return $isOpen ? 1 : 0;
+}, function (_ref2) {
+  var $isOpen = _ref2.$isOpen;
+  return $isOpen ? 'visible' : 'hidden';
+});
+var HamburgerButton = styled__default.button(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  display: none;\n  \n  @media (max-width: ", ") {\n    display: flex;\n    position: fixed;\n    top: 20px;\n    left: 20px;\n    z-index: 999;\n    background: ", ";\n    border: none;\n    border-radius: 8px;\n    padding: 12px;\n    cursor: pointer;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    transition: transform 0.2s ease;\n\n    &:active {\n      transform: scale(0.95);\n    }\n  }\n"])), MOBILE_BREAKPOINT, function (_ref3) {
+  var $background = _ref3.$background,
+    theme = _ref3.theme;
   return $background || theme.vms.accent.softBlue;
 });
-var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$j || (_templateObject2$j = _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  text-decoration: none;\n  transition: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white when active */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref2) {
-  var $padding = _ref2.$padding;
-  return $padding;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.vms.text.medium;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.vms.text.white;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.vms["default"].primary;
+var SidebarContainer = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  width: 68px;\n  max-width: 68px;\n  height: 100vh;\n  background: ", ";\n  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\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: 998;\n  justify-content: space-between;\n  gap: 24px;\n\n  /* Expand on hover */\n  &:hover {\n    width: max-content;\n    max-width: 400px;\n\n    /* You can also add a class for children */\n    span, .expandable {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n  }\n\n  /* Mobile styles */\n  @media (max-width: ", ") {\n    transform: translateX(", ");\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    width: 280px;\n    max-width: 280px;\n    box-shadow: ", ";\n\n    /* Always show text on mobile when open */\n    span, .expandable {\n      opacity: ", ";\n      visibility: ", ";\n      transform: translateX(0);\n    }\n\n    /* Disable hover expansion on mobile */\n    &:hover {\n      width: 280px;\n      max-width: 280px;\n    }\n  }\n"])), function (_ref4) {
+  var $background = _ref4.$background,
+    theme = _ref4.theme;
+  return $background || theme.vms.accent.softBlue;
+}, MOBILE_BREAKPOINT, function (_ref5) {
+  var $isMobileOpen = _ref5.$isMobileOpen;
+  return $isMobileOpen ? '0' : '-100%';
 }, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.vms.text.white;
+  var $isMobileOpen = _ref6.$isMobileOpen;
+  return $isMobileOpen ? '2px 0 8px rgba(0, 0, 0, 0.15)' : 'none';
 }, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.vms.text.white;
+  var $isMobileOpen = _ref7.$isMobileOpen;
+  return $isMobileOpen ? 1 : 0;
 }, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.vms["default"].primary;
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.vms.text.white;
+  var $isMobileOpen = _ref8.$isMobileOpen;
+  return $isMobileOpen ? 'visible' : 'hidden';
 });
-var IconWrapper$2 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref10) {
-  var $selected = _ref10.$selected,
-    theme = _ref10.theme;
-  return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
-});
-var StyledContainer = styled__default(Container)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  transition: none;\n\n  svg {\n    transition: none;\n  }\n\n  /* Parent hover / active */\n  &:hover,\n  &.active {\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* 2nd child reacts ONLY when parent is hovered */\n  &:hover > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  /* Default state for 2nd child */\n  > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n"])), function (_ref11) {
+var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject4$9 || (_templateObject4$9 = _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  text-decoration: none;\n  transition: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white when active */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref9) {
+  var $padding = _ref9.$padding;
+  return $padding;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.vms.text.medium;
+}, function (_ref11) {
   var theme = _ref11.theme;
   return theme.vms.text.white;
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.vms.text.white;
+  return theme.vms["default"].primary;
 }, function (_ref13) {
   var theme = _ref13.theme;
   return theme.vms.text.white;
@@ -10818,38 +10819,68 @@ var StyledContainer = styled__default(Container)(_templateObject4$9 || (_templat
   return theme.vms.text.white;
 }, function (_ref15) {
   var theme = _ref15.theme;
+  return theme.vms["default"].primary;
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.vms.text.white;
+});
+var IconWrapper$2 = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref17) {
+  var $selected = _ref17.$selected,
+    theme = _ref17.theme;
+  return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
+});
+var StyledContainer = styled__default(Container)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n\n  svg {\n    transition: none;\n  }\n\n  /* Parent hover / active */\n  &:hover,\n  &.active {\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* 2nd child reacts ONLY when parent is hovered */\n  &:hover > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  /* Default state for 2nd child */\n  > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n"])), function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.vms.text.white;
+}, function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.vms.text.white;
+}, function (_ref20) {
+  var theme = _ref20.theme;
+  return theme.vms.text.white;
+}, function (_ref21) {
+  var theme = _ref21.theme;
+  return theme.vms.text.white;
+}, function (_ref22) {
+  var theme = _ref22.theme;
   return theme.vms.text.medium;
 });
-var Logo = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n"])));
-var TextContainer = styled__default.span(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateX(-10px);\n  transition: all 0.3s ease;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ":hover & {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref16) {
-  var $padding = _ref16.$padding;
+var Logo = styled__default.div(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n"])));
+var TextContainer = styled__default.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateX(-10px);\n  transition: all 0.3s ease;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ":hover & {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n\n  /* Mobile: Always visible when sidebar is open */\n  @media (max-width: ", ") {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref23) {
+  var $padding = _ref23.$padding;
   return $padding;
-}, function (_ref17) {
-  var $fontSize = _ref17.$fontSize;
+}, function (_ref24) {
+  var $fontSize = _ref24.$fontSize;
   return $fontSize || '20px';
-}, function (_ref18) {
-  var $fontWeight = _ref18.$fontWeight;
+}, function (_ref25) {
+  var $fontWeight = _ref25.$fontWeight;
   return $fontWeight || '500';
-}, SidebarContainer);
-var NotificationBadge = styled__default.div(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  // top: -4px;\n  // right: 4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  width: max-content;\n"])), function (_ref19) {
-  var $position = _ref19.$position;
+}, SidebarContainer, MOBILE_BREAKPOINT);
+var NotificationBadge = styled__default.div(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  // top: -4px;\n  // right: 4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  width: max-content;\n"])), function (_ref26) {
+  var $position = _ref26.$position;
   return $position || 'absolute';
 });
-var Sidebar = function Sidebar(_ref20) {
-  var logo = _ref20.logo,
-    content = _ref20.content,
-    background = _ref20.background,
-    ProfileContent = _ref20.ProfileContent,
-    _ref20$isExpanded = _ref20.isExpanded,
-    isExpanded = _ref20$isExpanded === void 0 ? false : _ref20$isExpanded,
-    setIsExpanded = _ref20.setIsExpanded;
+var Sidebar = function Sidebar(_ref27) {
+  var logo = _ref27.logo,
+    content = _ref27.content,
+    background = _ref27.background,
+    ProfileContent = _ref27.ProfileContent,
+    _ref27$isExpanded = _ref27.isExpanded,
+    isExpanded = _ref27$isExpanded === void 0 ? false : _ref27$isExpanded,
+    setIsExpanded = _ref27.setIsExpanded;
   var location = reactRouterDom.useLocation();
   var _useState = React.useState({}),
     openMenus = _useState[0],
     setOpenMenus = _useState[1];
+  var _useState2 = React.useState(false),
+    isMobileOpen = _useState2[0],
+    setIsMobileOpen = _useState2[1];
+  var _useState3 = React.useState(false),
+    isMobile = _useState3[0],
+    setIsMobile = _useState3[1];
   var isExpandedRef = React.useRef(isExpanded);
   var sidebarRef = React.useRef(null);
-  var _useState2 = React.useState(function () {
+  var _useState4 = React.useState(function () {
       var container = document.getElementById('badge-portal-container');
       if (!container) {
         container = document.createElement('div');
@@ -10861,16 +10892,39 @@ var Sidebar = function Sidebar(_ref20) {
       }
       return container;
     }),
-    badgePortalContainer = _useState2[0];
+    badgePortalContainer = _useState4[0];
+  React.useEffect(function () {
+    var checkMobile = function checkMobile() {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return function () {
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
   React.useEffect(function () {
     isExpandedRef.current = isExpanded;
     if (!isExpanded) setOpenMenus({});
   }, [isExpanded]);
+  var toggleMobileMenu = React.useCallback(function () {
+    setIsMobileOpen(function (prev) {
+      return !prev;
+    });
+  }, []);
+  var closeMobileMenu = React.useCallback(function () {
+    if (isMobile) {
+      setIsMobileOpen(false);
+    }
+  }, [isMobile]);
+  var handleOverlayClick = React.useCallback(function () {
+    setIsMobileOpen(false);
+  }, []);
   var toggleMenu = function toggleMenu(id) {
     setOpenMenus(function (prev) {
-      var _ref21;
+      var _ref28;
       var isCurrentlyOpen = !!prev[id];
-      return isCurrentlyOpen ? {} : (_ref21 = {}, _ref21[id] = true, _ref21);
+      return isCurrentlyOpen ? {} : (_ref28 = {}, _ref28[id] = true, _ref28);
     });
   };
   var getTotalNotifications = React.useCallback(function (item) {
@@ -10895,8 +10949,8 @@ var Sidebar = function Sidebar(_ref20) {
       return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
     }));
   };
-  var ChildLink = function ChildLink(_ref22) {
-    var child = _ref22.child;
+  var ChildLink = function ChildLink(_ref29) {
+    var child = _ref29.child;
     var themeColors = styled.useTheme();
     var location = reactRouterDom.useLocation();
     var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
@@ -10904,6 +10958,7 @@ var Sidebar = function Sidebar(_ref20) {
       if (child.url && child.url === location.pathname) {
         e.preventDefault();
       }
+      closeMobileMenu();
     }, [child.url, location.pathname]);
     return React__default.createElement(SidebarLink, {
       to: child.url || '#',
@@ -10942,14 +10997,14 @@ var Sidebar = function Sidebar(_ref20) {
       });
     }));
   };
-  var SidebarItem = function SidebarItem(_ref23) {
-    var item = _ref23.item,
-      isActive = _ref23.isActive,
-      isOpen = _ref23.isOpen,
-      hasChildren = _ref23.hasChildren,
-      isExpanded = _ref23.isExpanded,
-      onToggle = _ref23.onToggle,
-      renderChildLinks = _ref23.renderChildLinks;
+  var SidebarItem = function SidebarItem(_ref30) {
+    var item = _ref30.item,
+      isActive = _ref30.isActive,
+      isOpen = _ref30.isOpen,
+      hasChildren = _ref30.hasChildren,
+      isExpanded = _ref30.isExpanded,
+      onToggle = _ref30.onToggle,
+      renderChildLinks = _ref30.renderChildLinks;
     var themeColors = styled.useTheme();
     var activeClass = isActive ? 'active' : '';
     var handleClick = React.useCallback(function () {
@@ -11014,6 +11069,7 @@ var Sidebar = function Sidebar(_ref20) {
       if (item.url === location.pathname) {
         e.preventDefault();
       }
+      closeMobileMenu();
     }, [item.url]);
     return item.url ? React__default.createElement(SidebarLink, {
       to: item.url,
@@ -11046,6 +11102,7 @@ var Sidebar = function Sidebar(_ref20) {
     var sidebar = sidebarRef.current;
     if (!sidebar) return;
     if (typeof ResizeObserver === 'undefined') return;
+    if (isMobile) return;
     var resizeObserver = new ResizeObserver(function (entries) {
       for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
         var entry = _step.value;
@@ -11061,7 +11118,7 @@ var Sidebar = function Sidebar(_ref20) {
     return function () {
       resizeObserver.disconnect();
     };
-  }, [handleSidebarExpansion]);
+  }, [handleSidebarExpansion, isMobile]);
   React.useEffect(function () {
     var updateBadgePositions = function updateBadgePositions() {
       content.forEach(function (item) {
@@ -11082,9 +11139,22 @@ var Sidebar = function Sidebar(_ref20) {
       window.removeEventListener('resize', updateBadgePositions);
     };
   }, [content, isExpanded, getTotalNotifications]);
-  return React__default.createElement(SidebarContainer, {
+  var themeColors = styled.useTheme();
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(HamburgerButton, {
+    "$background": background,
+    onClick: toggleMobileMenu,
+    "aria-label": "Toggle menu"
+  }, React__default.createElement(Icon, {
+    icon: isMobileOpen ? 'X' : 'Hamburger',
+    size: 24,
+    color: themeColors.vms.text.white
+  })), React__default.createElement(Overlay, {
+    "$isOpen": isMobileOpen,
+    onClick: handleOverlayClick
+  }), React__default.createElement(SidebarContainer, {
     ref: sidebarRef,
-    "$background": background
+    "$background": background,
+    "$isMobileOpen": isMobileOpen
   }, React__default.createElement(Container, {
     "$flexDirection": 'column',
     "$gap": '28px',
@@ -11115,13 +11185,13 @@ var Sidebar = function Sidebar(_ref20) {
       isActive: active,
       isOpen: isOpen,
       hasChildren: hasChildren,
-      isExpanded: isExpanded,
+      isExpanded: isMobile ? isMobileOpen : isExpanded,
       onToggle: function onToggle() {
         return toggleMenu(item.id);
       },
       renderChildLinks: renderChildLinks
     });
-  }))), ProfileContent);
+  }))), ProfileContent));
 };
 
 var _templateObject$o, _templateObject2$k, _templateObject3$d, _templateObject4$a;