@heliux-org/design-system-core 0.0.469 → 0.0.470

package/src/components/Sidebar/Sidebar.tsx

@@ -123,8 +123,15 @@ export const SidebarMenuItem: React.FC<SidebarMenuItemProps> = ({
   isCollapsed = false,
   style,
 }) => {
+  const getIndent = (level: number, hasIcon: boolean) => {
+    if (level === 0) return 0;
+    if (level === 1) return 0;
+    // Add 8px extra indent for level 2+ items without icons
+    return (level * 12) + (!hasIcon && level >= 2 ? 6 : 0);
+  };
+  
   const indentStyle: React.CSSProperties = {
-    paddingLeft: `${(!iconPath ? 22 : 0) + (indentLevel === 1 ? 8 : indentLevel * 12)}px`,
+    paddingLeft: isCollapsed ? '8px' : `${getIndent(indentLevel, !!iconPath)}px`,
     ...(isCollapsed && {
       display: 'flex',
       justifyContent: 'center',
@@ -134,40 +141,51 @@ export const SidebarMenuItem: React.FC<SidebarMenuItemProps> = ({
   const renderContent = () => (
     <Flex
       align={Flex.align.CENTER}
-      gap={isCollapsed ? Flex.gaps.NONE : 6}
+      gap={Flex.gaps.NONE}
       style={{
-        width: isCollapsed ? 'auto' : '100%'
+        width: isCollapsed ? 'auto' : '100%',
       }}
     >
-      {iconPath && (
-        <Icon
-          iconType={IconType.PATH}
-          icon=""
-          iconPath={iconPath}
-          iconSize={"14px"}
-          className={styles.menuIcon}
-          useCurrentColor
-          style={{
-            display: "block",
-            marginTop: "0px",
-          }}
-        />
-      )}
-      {!isCollapsed && (
-        <>
-          {text}
-          {showCounter && (
-            <Counter
-              count={count}
-              color={Counter.colors.WARNING}
-              className={styles.menuItemCounter}
-              size={Counter.sizes.SMALL}
+      {(indentLevel === 0 || iconPath) && (
+        <div style={{ 
+          width: '32px', 
+          display: 'flex', 
+          justifyContent: 'center',
+          flexShrink: 0 
+        }}>
+          {iconPath && (
+            <Icon
+              iconType={IconType.PATH}
+              icon=""
+              iconPath={iconPath}
+              iconSize={14}
+              className={styles.menuIcon}
+              useCurrentColor
             />
           )}
-          {rightIcon && (
-            <span className={styles.menuItemRightIcon}>{rightIcon}</span>
-          )}
-        </>
+        </div>
+      )}
+      {!isCollapsed && (
+        <Flex
+          align={Flex.align.CENTER}
+          justify={Flex.justify.SPACE_BETWEEN}
+          style={{ width: '100%' }}
+        >
+          <span>{text}</span>
+          <Flex align={Flex.align.CENTER} gap={Flex.gaps.SMALL}>
+            {showCounter && (
+              <Counter
+                count={count}
+                color={Counter.colors.WARNING}
+                className={styles.menuItemCounter}
+                size={Counter.sizes.SMALL}
+              />
+            )}
+            {rightIcon && (
+              <span className={styles.menuItemRightIcon}>{rightIcon}</span>
+            )}
+          </Flex>
+        </Flex>
       )}
     </Flex>
   );
@@ -245,6 +263,13 @@ export const SidebarMenuGroup: React.FC<SidebarMenuGroupProps> = ({
 }) => {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
+  const getIndent = (level: number, hasIcon: boolean) => {
+    if (level === 0) return 0;
+    if (level === 1) return 0;
+    // Add 8px extra indent for level 2+ items without icons
+    return (level * 12) + (!hasIcon && level >= 2 ? 6 : 0);
+  };
+
   const toggleExpand = (event: React.MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
@@ -269,30 +294,35 @@ export const SidebarMenuGroup: React.FC<SidebarMenuGroupProps> = ({
       style={{ 
         paddingLeft: isCollapsed 
           ? '8px' 
-          : `${(!iconPath ? 22 : 0)+ (indentLevel === 1 ? 8 : indentLevel * 12)}px`,
+          : `${getIndent(indentLevel, !!iconPath)}px`,
       }}
       onClick={handleClick}
     >
       <Flex
         align={Flex.align.CENTER}
-        gap={isCollapsed ? Flex.gaps.NONE : 6}
+        gap={isCollapsed ? Flex.gaps.NONE : 0}
         style={{
           width: isCollapsed ? 'auto' : '100%'
         }}
       >
-        {iconPath && (
-          <Icon
-            iconType={IconType.PATH}
-            icon=""
-            iconPath={iconPath}
-            iconSize={16}
-            useCurrentColor
-            className={isCollapsed ? undefined : styles.menuIcon}
-            style={{
-              display: "block",
-              marginTop: "0px",
-            }}
-          />
+        {(indentLevel === 0 || iconPath) && (
+          <div style={{ 
+            width: '32px', 
+            display: 'flex', 
+            justifyContent: 'center',
+            flexShrink: 0 
+          }}>
+            {iconPath && (
+              <Icon
+                iconType={IconType.PATH}
+                icon=""
+                iconPath={iconPath}
+                iconSize={16}
+                useCurrentColor
+                className={isCollapsed ? undefined : styles.menuIcon}
+              />
+            )}
+          </div>
         )}
         <Flex
           gap={isCollapsed ? Flex.gaps.NONE : 0}>

package/src/components/Sidebar/__stories__/Sidebar.stories.tsx

@@ -406,7 +406,6 @@ export const NewSidebar = {
                   <SidebarMenuItem 
                     indentLevel={2} 
                     text="Commercial Items"
-                    iconPath="ic_view_cube_16"
                     isCollapsed={isCollapsed}
                   />
                 </SidebarMenuGroup>