labsense-ui-kit 1.2.97 → 1.2.98

package/dist/index.modern.js

@@ -3,6 +3,7 @@ import styled, { useTheme as useTheme$1, css, keyframes, styled as styled$1 } fr
 import { toast } from 'react-hot-toast';
 import { useNavigate, NavLink, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { createPortal } from 'react-dom';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -9323,7 +9324,7 @@ var TextContainer = styled.span(_templateObject6$7 || (_templateObject6$7 = _tag
   var $fontWeight = _ref15.$fontWeight;
   return $fontWeight || '500';
 }, SidebarContainer);
-var NotificationBadge = styled.div(_templateObject7$5 || (_templateObject7$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"])), function (_ref16) {
+var NotificationBadge = styled.div(_templateObject7$5 || (_templateObject7$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 (_ref16) {
   var $position = _ref16.$position;
   return $position || 'absolute';
 });
@@ -9339,7 +9340,17 @@ var Sidebar = function Sidebar(_ref17) {
   var _useState = useState({}),
     openMenus = _useState[0],
     setOpenMenus = _useState[1];
-  var isExpandedRef = React.useRef(isExpanded);
+  var isExpandedRef = useRef(isExpanded);
+  var _useState2 = useState(function () {
+      var container = document.getElementById('badge-portal-container');
+      if (!container) {
+        container = document.createElement('div');
+        container.id = 'badge-portal-container';
+        document.body.appendChild(container);
+      }
+      return container;
+    }),
+    badgePortalContainer = _useState2[0];
   useEffect(function () {
     isExpandedRef.current = isExpanded;
     if (!isExpanded) setOpenMenus({});
@@ -9451,7 +9462,18 @@ var Sidebar = function Sidebar(_ref17) {
       "$cursor": 'pointer',
       "$borderRadius": '4px'
     }, React.createElement(Container, {
-      "$position": 'relative'
+      "$position": 'relative',
+      id: "icon-container-" + item.id,
+      ref: function ref(el) {
+        if (el && _getTotalNotifications(item) > 0) {
+          var rect = el.getBoundingClientRect();
+          var badge = document.getElementById("badge-" + item.id);
+          if (badge) {
+            badge.style.top = rect.top - 4 + "px";
+            badge.style.left = rect.right - 14 + "px";
+          }
+        }
+      }
     }, React.createElement(IconWrapper$2, {
       "$selected": !!isActive
     }, React.createElement(Icon, {
@@ -9460,7 +9482,12 @@ var Sidebar = function Sidebar(_ref17) {
       size: 20,
       weight: item.iconWeight,
       color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
-    })), _getTotalNotifications(item) > 0 && React.createElement(NotificationBadge, null, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item))), React.createElement(TextContainer, {
+    })), _getTotalNotifications(item) > 0 && createPortal(React.createElement(NotificationBadge, {
+      id: "badge-" + item.id,
+      style: {
+        position: 'fixed'
+      }
+    }, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item)), badgePortalContainer)), React.createElement(TextContainer, {
       "$fontSize": '14px'
     }, item.label)), hasChildren && React.createElement(Container, {
       "$padding": '9px',
@@ -9502,6 +9529,26 @@ var Sidebar = function Sidebar(_ref17) {
       setIsExpanded(expanded);
     }
   }, [setIsExpanded]);
+  useEffect(function () {
+    var updateBadgePositions = function updateBadgePositions() {
+      content.forEach(function (item) {
+        if (_getTotalNotifications(item) > 0) {
+          var iconContainer = document.getElementById("icon-container-" + item.id);
+          var badge = document.getElementById("badge-" + item.id);
+          if (iconContainer && badge) {
+            var rect = iconContainer.getBoundingClientRect();
+            badge.style.top = rect.top - 4 + "px";
+            badge.style.left = rect.right - 14 + "px";
+          }
+        }
+      });
+    };
+    updateBadgePositions();
+    window.addEventListener('resize', updateBadgePositions);
+    return function () {
+      window.removeEventListener('resize', updateBadgePositions);
+    };
+  }, [content, isExpanded, _getTotalNotifications]);
   return React.createElement(SidebarContainer, {
     "$background": background,
     onMouseEnter: function onMouseEnter() {