Merge pull request #11038 from rthera7/DEA-4744_rthera7

Added a chevron indicator for when the sidebar has submenu items

.changeset/tough-queens-hope.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added a chevron Indicator when the sidebar is collapsed and has a sub-menu

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -369,6 +369,16 @@ const SidebarItemBase = forwardRef<any, SidebarItemProps>((props, ref) => {
   // Still waiting on a Q answered to fine tune the implementation
   const { isOpen } = useContext(SidebarContext);
 
+  const divStyle =
+    !isOpen && children ? { display: 'flex', marginLeft: '24px' } : {};
+
+  const displayItemIcon = (
+    <div style={divStyle}>
+      <Icon fontSize="small" />
+      {!isOpen && children ? <ArrowRightIcon /> : <></>}
+    </div>
+  );
+
   const itemIcon = (
     <Badge
       color="secondary"
@@ -377,7 +387,7 @@ const SidebarItemBase = forwardRef<any, SidebarItemProps>((props, ref) => {
       invisible={!hasNotifications}
       className={classnames({ [classes.closedItemIcon]: !isOpen })}
     >
-      <Icon fontSize="small" />
+      {displayItemIcon}
     </Badge>
   );