Convert euiSideNavItem__items

+ remove unnecessary CSS and replace let with inline conditional JSX

src/components/side_nav/_side_nav_item.scss

@@ -1,58 +1,3 @@
-.euiSideNavItem--root {
-  &.euiSideNavItem--rootIcon > .euiSideNavItem__items {
-    margin-left: $euiSizeL;
-  }
-
-  & > .euiSideNavItem__items {
-    position: static;
-    margin-left: 0;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  & + & {
-    margin-top: $euiSizeXL;
-  }
-}
-
-.euiSideNavItem--trunk {
-  color: $euiSideNavRootTextcolor; /* 2 */
-
-  & > .euiSideNavItem__items {
-    margin-left: $euiSizeS;
-    width: 100%;
-  }
-}
-
-.euiSideNavItem--branch {
-  /**
-  * 1. Draw the vertical line to group an expanded item's child items together.
-  */
-  position: relative;
-  color: $euiSideNavBranchTextcolor; /* 2 */
-
-  &::after { /* 1 */
-    position: absolute;
-    content: '';
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background: $euiBorderColor;
-    left: 0;
-  }
-
-  // If this is actually the last item, we don't want the vertical line to stretch all the way down
-  &:last-of-type::after {
-    height: $euiSizeM;
-  }
-
-  & > .euiSideNavItem__items {
-    margin-left: $euiSize;
-  }
-}
-
 .euiSideNavItem--emphasized {
   background: $euiSideNavEmphasizedBackgroundColor;
   color: $euiSideNavRootTextcolor;

src/components/side_nav/side_nav_item.styles.ts

@@ -49,6 +49,19 @@ export const euiSideNavItemStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('height', euiTheme.size.m)}
       }
     `,
+
+    items: {
+      euiSideNavItem__items: css``,
+      rootWithIcon: css`
+        ${logicalCSS('margin-left', euiTheme.size.l)}
+      `,
+      trunk: css`
+        ${logicalCSS('margin-left', euiTheme.size.s)}
+      `,
+      branch: css`
+        ${logicalCSS('margin-left', euiTheme.size.base)}
+      `,
+    },
   };
 };
 

src/components/side_nav/side_nav_item.tsx

@@ -186,10 +186,7 @@ export const EuiSideNavItem = <
     setItemIsOpen((isOpen) => !isOpen);
   };
 
-  let childItems;
-  if (items && itemIsOpen) {
-    childItems = <div className="euiSideNavItem__items">{items}</div>;
-  }
+  const hasChildItems = items && itemIsOpen;
 
   let buttonIcon;
   if (icon) {
@@ -205,7 +202,7 @@ export const EuiSideNavItem = <
       'euiSideNavItem--rootIcon': depth === 0 && icon,
       'euiSideNavItem--trunk': depth === 1,
       'euiSideNavItem--branch': depth > 1,
-      'euiSideNavItem--hasChildItems': !!childItems,
+      'euiSideNavItem--hasChildItems': hasChildItems,
       'euiSideNavItem--emphasized': emphasize,
     },
     className
@@ -217,6 +214,12 @@ export const EuiSideNavItem = <
     depth === 1 && styles.trunk,
     depth > 1 && styles.branch,
   ];
+  const itemsStyles = hasChildItems && [
+    styles.items.euiSideNavItem__items,
+    depth === 0 && icon && styles.items.rootWithIcon,
+    depth === 1 && styles.items.trunk,
+    depth > 1 && styles.items.branch,
+  ];
 
   const buttonClasses = classNames(
     'euiSideNavItemButton',
@@ -277,7 +280,11 @@ export const EuiSideNavItem = <
         {caret}
       </RenderItem>
 
-      {childItems}
+      {hasChildItems && (
+        <div css={itemsStyles} className="euiSideNavItem__items">
+          {items}
+        </div>
+      )}
     </div>
   );
 };