frontend: Sidebar: Resize sidebar when overflowing

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
headlamp-k8s · Dec 23, 2024 · 8e9c095 · 8e9c095
1 parent 675c4d4
commit 8e9c095
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git 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
@@ -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/...end/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot b/...end/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"