From 76bb7aeda08ad5f9cda1f6d787bb31bc662b01fb Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Tue, 6 Jul 2021 14:01:23 +0200
Subject: [PATCH 1/2] Show scroll bar on hover only

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .changeset/late-pants-itch.md                         | 5 +++++
 packages/core-components/src/layout/Sidebar/Items.tsx | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/late-pants-itch.md

diff --git a/.changeset/late-pants-itch.md b/.changeset/late-pants-itch.md
new file mode 100644
index 0000000000..7bd3087316
--- /dev/null
+++ b/.changeset/late-pants-itch.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Show scroll bar of the sidebar wrapper only on hover
diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index e53cdfaa57..90dae01cd4 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -299,12 +299,17 @@ export const SidebarScrollWrapper = styled('div')(({ theme }) => ({
   // Display at least one item in the container
   // Question: Can this be a config/theme variable - if so, which? :/
   minHeight: '48px',
-  '&::-webkit-scrollbar': {
+  overflowY: 'hidden',
+
+  '&:hover': {
+    overflowY: 'auto',
+  },
+  '&:hover::-webkit-scrollbar': {
     backgroundColor: theme.palette.background.default,
     width: '5px',
     borderRadius: '5px',
   },
-  '&::-webkit-scrollbar-thumb': {
+  '&:hover::-webkit-scrollbar-thumb': {
     backgroundColor: theme.palette.text.hint,
     borderRadius: '5px',
   },

From f1cffe88075c04357712066ef408a3e869bbbb5f Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Tue, 6 Jul 2021 14:41:08 +0200
Subject: [PATCH 2/2] Don't hide scrollbar on touch devices

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../src/layout/Sidebar/Items.tsx              | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index 90dae01cd4..28abbce53c 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -21,8 +21,10 @@ import {
   makeStyles,
   styled,
   TextField,
+  Theme,
   Typography,
 } from '@material-ui/core';
+import { CreateCSSProperties } from '@material-ui/core/styles/withStyles';
 import SearchIcon from '@material-ui/icons/Search';
 import clsx from 'clsx';
 import React, {
@@ -291,26 +293,31 @@ export const SidebarDivider = styled('hr')({
   margin: '12px 0px',
 });
 
-export const SidebarScrollWrapper = styled('div')(({ theme }) => ({
-  flex: '0 1 auto',
-  overflowX: 'hidden',
-  // 5px space to the right of the scrollbar
-  width: 'calc(100% - 5px)',
-  // Display at least one item in the container
-  // Question: Can this be a config/theme variable - if so, which? :/
-  minHeight: '48px',
-  overflowY: 'hidden',
-
-  '&:hover': {
-    overflowY: 'auto',
-  },
-  '&:hover::-webkit-scrollbar': {
+const styledScrollbar = (theme: Theme): CreateCSSProperties => ({
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
     backgroundColor: theme.palette.background.default,
     width: '5px',
     borderRadius: '5px',
   },
-  '&:hover::-webkit-scrollbar-thumb': {
+  '&::-webkit-scrollbar-thumb': {
     backgroundColor: theme.palette.text.hint,
     borderRadius: '5px',
   },
-}));
+});
+
+export const SidebarScrollWrapper = styled('div')(({ theme }) => {
+  const scrollbarStyles = styledScrollbar(theme);
+  return {
+    flex: '0 1 auto',
+    overflowX: 'hidden',
+    // 5px space to the right of the scrollbar
+    width: 'calc(100% - 5px)',
+    // Display at least one item in the container
+    // Question: Can this be a config/theme variable - if so, which? :/
+    minHeight: '48px',
+    overflowY: 'hidden',
+    '@media (hover: none)': scrollbarStyles,
+    '&:hover': scrollbarStyles,
+  };
+});