Shadow is visible when sidebar is closed

[timbset]

Sidebar is moved to the border of view on close, no more. That's why the box shadow is visible. Isn't it better to move it some pixels more to hide it?

[andreyluiz]

I tried to conditionally deactivate the shadow:

<Sidebar
  sidebar={<MenuContent onMenuItemSelected={this.menuItemSelected} />}
  open={open}
  docked={docked}
  onSetOpen={onSetSidebarOpen}
  styles={{
    overlay: {
      zIndex: !docked && open ? 3001 : 2000,
    },
    sidebar: {
      width: 256,
      zIndex: 4000,
      boxShadow: (docked || !open) ? 'none' : 'rgba(0, 0, 0, 0.15) 2px 2px 4px;',
    },
    content: {
      top: 64,
    },
  }}
>
  {children}
</Sidebar>

But the shadow is not overrided.

Looking at the code, it is totally non-sense regarding the shadow prop:

if (this.props.pullRight) {
  // ...
} else {
  // ...
  if (this.props.shadow) {
    sidebarStyle.boxShadow = '2px 2px 4px rgba(0, 0, 0, 0.15)';
  }
}

I created a PR #136 to fix this weird code. While it is not done I am using the commit from my fork and it works great.

[aelor]

The overwrite with styles doesn't seem to work but if you add a custom class to the sidebar using sidebarClassName, it works.

Here is how the prop is added

<Sidebar
        sidebar={sidebarContent}
        open={this.state.sidebarOpen}
        onSetOpen={this.onSetSidebarOpen}
        sidebarClassName="customSidebar"
      >
  <b>My content</b>
</Sidebar>

and the css

.customSidebar {
    left: -5px !important;
}