diff --git a/.changeset/tough-queens-hope.md b/.changeset/tough-queens-hope.md new file mode 100644 index 0000000000..6816893611 --- /dev/null +++ b/.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 diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 4a0376946a..c004f6904c 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -369,6 +369,16 @@ const SidebarItemBase = forwardRef((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 = ( +
+ + {!isOpen && children ? : <>} +
+ ); + const itemIcon = ( ((props, ref) => { invisible={!hasNotifications} className={classnames({ [classes.closedItemIcon]: !isOpen })} > - + {displayItemIcon} );