Fix bug for sidebar dropdown button and add changeset

Signed-off-by: Bjørn-Erik Strand <bjoern.erik.strand@gmail.com>

.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/app/src/components/Root/Root.tsx

@@ -132,6 +132,25 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
               to="catalog?filters[kind]=user"
               icon={useApp().getSystemIcon('kind:user')}
             />
+            <SidebarDivider />
+            <SidebarSubmenuItem
+              title="Templates"
+              icon={useApp().getSystemIcon('kind:template')}
+              dropdownItems={[
+                {
+                  title: 'Documentation',
+                  to: 'catalog?filters[kind]=template&filters[type]=documentation',
+                },
+                {
+                  title: 'Service',
+                  to: 'catalog?filters[kind]=template&filters[type]=service',
+                },
+                {
+                  title: 'Website',
+                  to: 'catalog?filters[kind]=template&filters[type]=website',
+                },
+              ]}
+            />
           </SidebarSubmenu>
         </SidebarItem>
         <MyGroupsSidebarItem

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

@@ -185,6 +185,10 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
               classes.item,
               isActive ? classes.selected : undefined,
             )}
+            style={{
+              textTransform: 'none',
+              justifyContent: 'flex-start',
+            }}
           >
             {Icon && <Icon fontSize="small" />}
             <Typography