Merge pull request #6320 from tudi2d/6239-apply-create-app

Apply sidebar changes to create-app

.changeset/shy-garlics-tap.md

@@ -0,0 +1,5 @@
+---
+'@backstage/create-app': patch
+---
+
+Use SidebarScrollWrapper to improve responsiveness of the current sidebar. Change: Wrap a section of SidebarItems with this component to enable scroll for smaller screens. It can also be used in sidebar plugins (see shortcuts plugin for an example).

packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx

@@ -34,6 +34,7 @@ import {
   SidebarItem,
   SidebarDivider,
   SidebarSpace,
+  SidebarScrollWrapper,
 } from '@backstage/core-components';
 
 const useSidebarLogoStyles = makeStyles({
@@ -82,7 +83,9 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
       <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
       {/* End global nav */}
       <SidebarDivider />
-      <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
+      <SidebarScrollWrapper>
+        <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
+      </SidebarScrollWrapper>
       <SidebarSpace />
       <SidebarDivider />
       <SidebarSettings />