From 76bb7aeda08ad5f9cda1f6d787bb31bc662b01fb Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Tue, 6 Jul 2021 14:01:23 +0200 Subject: [PATCH] Show scroll bar on hover only Signed-off-by: Philipp Hugenroth --- .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', },