Search code examples
cssreactjsblueprintblueprintjs

how to use Blueprint 3.0 Drawer to use as left sidenav?


I was able to get the drawer to left by setting style left:0 but the animation of closing and opening is happening towards the right. Below is the piece of code. Please help in resolving the animation issue.

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

Solution

  • If someone is still looking for a solution then, As a quick fix untill this prop is released, 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 a simple class name.