labsense-ui-kit 1.3.75 → 1.3.77

package/dist/hooks/breakpoints.d.ts

@@ -0,0 +1,13 @@
+export declare const breakpoints: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const getResponsiveFlags: (width: number) => {
+    isXS: boolean;
+    isSM: boolean;
+    isMD: boolean;
+    isLG: boolean;
+    isXL: boolean;
+};

package/dist/hooks/index.d.ts

@@ -3,4 +3,6 @@ import useCopyToClipboard from './useCopyToClipboard';
 import useCustomModal from './useCustomModal';
 import useNotification from './useNotification';
 import useTheme from './useTheme';
-export { useClickOutside, useCopyToClipboard, useCustomModal, useNotification, useTheme };
+import useWindowSize from './useWindowSize';
+import { getResponsiveFlags } from './breakpoints';
+export { useClickOutside, useCopyToClipboard, useCustomModal, useNotification, useTheme, getResponsiveFlags, useWindowSize };

package/dist/hooks/useWindowSize.d.ts

@@ -0,0 +1,2 @@
+declare const useWindowSize: () => number[];
+export default useWindowSize;

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { ButtonCarousel } from './Carousel';
 import { Container, Span } from './Container&Span/StyledComponents';
 import { DatePicker } from './Date-Time';
 import { ButtonDropdown, MultiSelectDropdown, OptionComponent, SelectedOption, SelectOption, DropdownMenu, Options } from './Dropdown';
-import { useClickOutside, useCopyToClipboard, useCustomModal, useNotification, useTheme } from './hooks';
+import { useClickOutside, useCopyToClipboard, useCustomModal, useNotification, useTheme, getResponsiveFlags, useWindowSize } from './hooks';
 import { Icon, IconProps, IconNames } from './Icons';
 import { SearchBox, TextArea, TextField, TextFieldWithDropdown, CheckBox } from './Inputs';
 import { CircularLoader, Loader } from './Loader';
@@ -24,7 +24,7 @@ export { ButtonCarousel };
 export { Container, Span };
 export { DatePicker };
 export { ButtonDropdown, MultiSelectDropdown, OptionComponent, SelectedOption, SelectOption, DropdownMenu, Options };
-export { useClickOutside, useCopyToClipboard, useCustomModal, useNotification, useTheme };
+export { useClickOutside, useCopyToClipboard, useCustomModal, useNotification, useTheme, getResponsiveFlags, useWindowSize };
 export { Icon, IconProps, IconNames };
 export { SearchBox, TextArea, TextField, TextFieldWithDropdown, CheckBox };
 export { CircularLoader, Loader };

package/dist/index.js

@@ -6890,6 +6890,39 @@ var useNotification = function useNotification() {
   };
 };
 
+var useWindowSize = function useWindowSize() {
+  var _useState = React.useState([window.innerWidth, window.innerHeight]),
+    size = _useState[0],
+    setSize = _useState[1];
+  React.useLayoutEffect(function () {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener('resize', updateSize);
+    updateSize();
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
+  return size;
+};
+
+var breakpoints = {
+  xs: 576,
+  sm: 768,
+  md: 992,
+  lg: 1280
+};
+var getResponsiveFlags = function getResponsiveFlags(width) {
+  return {
+    isXS: width < breakpoints.xs,
+    isSM: width < breakpoints.sm && width >= breakpoints.xs,
+    isMD: width < breakpoints.md && width >= breakpoints.sm,
+    isLG: width < breakpoints.lg && width >= breakpoints.md,
+    isXL: width >= breakpoints.lg
+  };
+};
+
 var _templateObject$3, _templateObject2$3;
 var TooltipWrapper = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
 var TooltipText = styled__default.span(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transition: opacity 0.2s ease-in-out;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: 8px;\n  padding: 8px 16px;\n  font-size: ", ";\n  font-weight: ", ";\n  max-width: 300px;\n  width: max-content;\n  position: fixed;\n  z-index: 999;\n  pointer-events: none;\n"])), function (_ref) {
@@ -10768,48 +10801,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 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 $isMobileOpen = _ref8.$isMobileOpen;
+  return $isMobileOpen ? 'visible' : 'hidden';
 });
-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 +10852,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 +10925,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 +10982,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 +10991,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 +11030,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 +11102,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 +11135,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 +11151,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 +11172,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 +11218,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;
@@ -12347,6 +12450,7 @@ exports.formatDate = formatDate;
 exports.formatEpochToIST = formatEpochToIST;
 exports.formatTimestamp = formatTimestamp;
 exports.getCurrentTheme = getCurrentTheme;
+exports.getResponsiveFlags = getResponsiveFlags;
 exports.getSystemTimezoneAbbreviation = getSystemTimezoneAbbreviation;
 exports.themes = themes;
 exports.timeAgo = timeAgo;
@@ -12356,4 +12460,5 @@ exports.useCopyToClipboard = useCopyToClipboard;
 exports.useCustomModal = UseCustomModal;
 exports.useNotification = useNotification;
 exports.useTheme = useTheme;
+exports.useWindowSize = useWindowSize;
 //# sourceMappingURL=index.js.map