Merge pull request #6257 from tudi2d/6239-responsive-sidebar

Improve Sidebar UX for smaller screens

plugins/shortcuts/src/Shortcuts.tsx

@@ -16,24 +16,19 @@
 
 import React, { useMemo } from 'react';
 import { useObservable } from 'react-use';
-import { makeStyles } from '@material-ui/core';
 import PlayListAddIcon from '@material-ui/icons/PlaylistAdd';
 import { ShortcutItem } from './ShortcutItem';
 import { AddShortcut } from './AddShortcut';
 import { shortcutsApiRef } from './api';
 
-import { Progress, SidebarItem } from '@backstage/core-components';
+import {
+  Progress,
+  SidebarItem,
+  SidebarScrollWrapper,
+} from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-const useStyles = makeStyles({
-  root: {
-    flex: '1 1 auto',
-    overflowY: 'scroll',
-  },
-});
-
 export const Shortcuts = () => {
-  const classes = useStyles();
   const shortcutApi = useApi(shortcutsApiRef);
   const shortcuts = useObservable(
     useMemo(() => shortcutApi.shortcut$(), [shortcutApi]),
@@ -50,7 +45,7 @@ export const Shortcuts = () => {
   };
 
   return (
-    <div className={classes.root}>
+    <SidebarScrollWrapper>
       <SidebarItem
         icon={PlayListAddIcon}
         text="Add Shortcuts"
@@ -72,6 +67,6 @@ export const Shortcuts = () => {
           />
         ))
       )}
-    </div>
+    </SidebarScrollWrapper>
   );
 };