From df3b9f0d21474db4720eab6777717630dc806598 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rn-Erik=20Strand?= <bjoern.erik.strand@gmail.com>
Date: Tue, 11 Feb 2025 13:50:22 +0100
Subject: [PATCH] Fix bug for sidebar dropdown button and add changeset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Bjørn-Erik Strand <bjoern.erik.strand@gmail.com>
---
 .changeset/hungry-walls-pump.md               |  5 +++++
 packages/app/src/components/Root/Root.tsx     | 19 +++++++++++++++++++
 .../src/layout/Sidebar/SidebarSubmenuItem.tsx |  4 ++++
 3 files changed, 28 insertions(+)
 create mode 100644 .changeset/hungry-walls-pump.md

diff --git a/.changeset/hungry-walls-pump.md b/.changeset/hungry-walls-pump.md
new file mode 100644
index 0000000000..67e8e27b42
--- /dev/null
+++ b/.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.
diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index b74c6459d8..818dd100a5 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/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
diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx
index 0ed8aedcaf..647c4b22fe 100644
--- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx
+++ b/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