From 8e9c095e6f8daebfeb8911fb3d0b2d842d9d09d7 Mon Sep 17 00:00:00 2001 From: Evangelos Skopelitis <eskopelitis@microsoft.com> Date: Fri, 20 Dec 2024 16:12:10 -0500 Subject: [PATCH] frontend: Sidebar: Resize sidebar when overflowing Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com> --- frontend/src/components/Sidebar/Sidebar.tsx | 32 +++++++++++++------ ...idebar.HomeSidebarClosed.stories.storyshot | 2 +- ...r.InClusterSidebarClosed.stories.storyshot | 2 +- 3 files changed, 24 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx index 532721eb2e..ec9e2bb0f0 100644 --- a/frontend/src/components/Sidebar/Sidebar.tsx +++ b/frontend/src/components/Sidebar/Sidebar.tsx @@ -248,6 +248,9 @@ export const PureSidebar = memo( linkArea, }: PureSidebarProps) => { const { t } = useTranslation(); + const listContainerRef = React.useRef<HTMLDivElement | null>(null); + const [isOverflowing, setIsOverflowing] = React.useState(false); + const adjustedDrawerWidthClosed = isOverflowing ? 84 : 72; const temporarySideBarOpen = open === true && isTemporaryDrawer && openUserSelected === true; // The large sidebar does not open in medium view (600-960px). @@ -276,6 +279,7 @@ export const PureSidebar = memo( })} /> <Grid + ref={listContainerRef} sx={{ height: '100%', overflowY: 'auto', @@ -337,6 +341,23 @@ export const PureSidebar = memo( } : {}; + React.useEffect(() => { + const el = listContainerRef.current; + if (!el) { + return; + } + + const observer = new ResizeObserver(() => { + setIsOverflowing(el.scrollHeight > el.clientHeight); + }); + + observer.observe(el); + + setIsOverflowing(el.scrollHeight > el.clientHeight); + + return () => observer.disconnect(); + }, [items]); + return ( <Box component="nav" aria-label={t('translation|Navigation')}> <Drawer @@ -363,16 +384,7 @@ export const PureSidebar = memo( duration: theme.transitions.duration.leavingScreen, }), overflowX: 'hidden', - width: '56px', - [theme.breakpoints.down('xs')]: { - background: 'initial', - }, - [theme.breakpoints.down('sm')]: { - width: theme.spacing(0), - }, - [theme.breakpoints.up('sm')]: { - width: '72px', - }, + width: `${adjustedDrawerWidthClosed}px`, background: theme.palette.sidebarBg, }; diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot index 6d838025cb..d3783e5e4c 100644 --- a/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot +++ b/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot @@ -5,7 +5,7 @@ class="MuiBox-root css-0" > <div - class="MuiDrawer-root MuiDrawer-docked css-1p9jtjb-MuiDrawer-docked" + class="MuiDrawer-root MuiDrawer-docked css-1g0cdoa-MuiDrawer-docked" > <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper" diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot index d4f85fbe49..65c17dc087 100644 --- a/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot +++ b/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot @@ -5,7 +5,7 @@ class="MuiBox-root css-0" > <div - class="MuiDrawer-root MuiDrawer-docked css-1p9jtjb-MuiDrawer-docked" + class="MuiDrawer-root MuiDrawer-docked css-1g0cdoa-MuiDrawer-docked" > <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper"