From 24b4b01cd73a1f5338074dba76c242193974ebf5 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 5 Jul 2021 17:31:03 +0200 Subject: [PATCH] ACustomize scrollbar for sidebar items wrapper Signed-off-by: Philipp Hugenroth --- .../src/layout/Sidebar/Items.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index dbaa50b76e..e53cdfaa57 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -291,10 +291,21 @@ export const SidebarDivider = styled('hr')({ margin: '12px 0px', }); -export const SidebarScrollWrapper = styled('div')({ +export const SidebarScrollWrapper = styled('div')(({ theme }) => ({ flex: '0 1 auto', - overflowY: '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', -}); + '&::-webkit-scrollbar': { + backgroundColor: theme.palette.background.default, + width: '5px', + borderRadius: '5px', + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: theme.palette.text.hint, + borderRadius: '5px', + }, +}));