Feature request: open drawers from the left

[DanielLu91]

I would like to know if I can set the direction of drawer on the page. I would like to make drawer appear on the left of web page. I set left:0 for drawer component. It appears on the left. However, it still transform from right to left. This is not result I would like. How can I solve this problem?

[Ackos95]

👍 for request

[Abhijith126]

Hello just wanted to confirm if the new prop 'reverse' is deployed... If not is there any other ways to make the transition of the drawer to go from left to right? Below is the code I have used. Any help is appreciated.

<Drawer style={{ left: '0', transition: 'all 0.1s' }} isOpen={isDrawerOpen} size={'250px'} usePortal={true} hasBackdrop={true} canOutsideClickClose={true} onClose={() => toggleDrawer(false)} >

Please help

[Ackos95]

@Darkness126 It's not released yet, I've submitted a PR few days back, I'm waiting for approval/merge.

As for quick fix, you can use CSS "hack" like this:

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-enter, 
.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-appear {
  transform: translateX(-100%);
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-enter-active, 
.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-appear-active {
  transform: translateX(0);
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
  transition-delay: 0;
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-exit {
  transform: translateX(0);
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-exit-active {
  transform: translateX(-100%);
  transition-property: transform;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
  transition-delay: 0;
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical) {
  left: 0;
}

And simply replace .your-custom-class-for-drawer with some class name for your left opening drawer, if you don't want any custom class you can write it all without it, but then all drawers will show left to right, this way you can simulate reverse behavior with simple class name.

Update: In hack provided at the top, I forgot to add .your-custom-class-for-drawer on parts which are separated with a comma, snippet is updated now.

[Abhijith126]

@Darkness126 It's not released yet, I've submitted a PR few days back, I'm waiting for approval/merge.

As for quick fix, you can use CSS "hack" like this:

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-enter, .bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-appear {
  transform: translateX(-100%);
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-enter-active, .bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-appear-active {
  transform: translateX(0);
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
  transition-delay: 0;
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-exit {
  transform: translateX(0);
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-exit-active {
  transform: translateX(-100%);
  transition-property: transform;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
  transition-delay: 0;
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical) {
  left: 0;
}

And simply replace .your-custom-class-for-drawer with some class name for your left opening drawer, if you don't want any custom class you can write it all without it, but then all drawers will show left to right, this way you can simulate reverse behavior with simple class name.

Thank you very much, I'm able to get the expected behavior, 👍