Horizontal scrollbar when sidebar is collapsed

[mauro-ni]

@siriwatknp I'm using version 4.4.1 of mui-treasury/layout and I noticed that when the sidebar is collapsed (only icons are visible) then it is scrollable horizontally (in Windows you get the annoying scrollbar). This is due to the overflow property set to auto.

Version 3 of mui-treasury/layout doesn't have this bug, since overflow css property is set differently:

# MuiPaper inside MuiDrawer
overflow-y: auto;

# Second child of MuiPaper
overflow: hidden auto;

Many thanks.

Mauro

[Technologeek]

@siriwatknp Can I pick up this up as my first issue?

[siriwatknp]

@Technologeek thanks, you might want to look at DrawerSidebar.tsx.

[Technologeek]

Cheers! Will create a PR soon!

[RITIKHARIANI]

@siriwatknp and @Technologeek
Has this issue been fixed yet?

[mauro-ni]

@siriwatknp and @Technologeek
Will this bug be fixed in the near future? Many tahnks.

[dimyG]

A quick solution is to make the collapsed width a little bigger. For example using 74px instead of 64 solved the issue.

scheme.configureEdgeSidebar(builder => {
builder
     .create('main_sidebar', { anchor: 'left' })
     .registerTemporaryConfig('xs', {
      anchor: 'left',
      width: 'auto', 
    })
    .registerPermanentConfig('md', {
      width: 256, 
      collapsible: true,
      collapsedWidth: 74,
    });
});

[mauro-ni]

There are 2 horizontal scrollbars, here are my workarounds:

1. As suggested by @dimyG I modified collapsedWidth, setting it to 65 solve the problem
2. I defined a style class and conditionally applied it to the

import clsx from 'clsx';

const useStyles = makeStyles((theme) => ({
  sidebarOverflowFix: {
    overflowX: 'hidden !important',
    overflowY: 'auto !important',
  },
}));

...

{({ state: { sidebar } }) => {
  return (
    ...
    <DrawerSidebar sidebarId="left_sidebar">
      <SidebarContent className={clsx(sidebar.left_sidebar.collapsed && classes.sidebarOverflowFix)}>
        <AppSidebar collapsed={sidebar.left_sidebar.collapsed} />
      </SidebarContent>
      <CollapseBtn>
        {({ collapsed, anchor }) =>
          collapsed ? <ArrowForwardIcon /> : <ArrowBackIcon />
        }
      </CollapseBtn>
    </DrawerSidebar>
    ...
  );
}}

...

[Avni1802]

Can i pick this issue?