Merge pull request #28799 from bestrand/fix-sidebar-dropdown-button

fix(core-components): Fix misalignment and uppercase text for sidebar dropdown button

.changeset/hungry-walls-pump.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fixed a bug in the SidebarSubmenuItem within the core-components package that caused the dropdown button to be misaligned in the sidebar and the button text to appear in uppercase due to the default <Button> behavior. Also added an example dropdown menu to the app for reference.

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

@@ -100,6 +100,10 @@ const useStyles = makeStyles(
         color: theme.palette.navigation.selectedColor,
       },
     },
+    dropdownButton: {
+      textTransform: 'none',
+      justifyContent: 'flex-start',
+    },
     textContent: {
       color: theme.palette.navigation.color,
       paddingLeft: theme.spacing(4),
@@ -183,6 +187,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
             onTouchStart={e => e.stopPropagation()}
             className={classnames(
               classes.item,
+              classes.dropdownButton,
               isActive ? classes.selected : undefined,
             )}
           >