Two Sidebars

[shezankazi]

Is it possible to use 2 sidebars?

[brianespinosa]

Yes. There is not a limit to the number of components you can use. If you want to use multiple sidebars on the same side this would likely require some extra markup and CSS depending on what you are trying to do. This would be beyond the scope, and independent of this project.

[kwayebopp]

I have been trying to implement a view with two vertical sidebars on either side of a div element, but I cannot get the div to fit properly between the two sidebars. I have tried something like this:

<Sidebar.Pushable as={'div'}>
  <Sidebar
   as={Menu}
   animation='push'
   width='wide'
   direction='left'
   visible={this.state.leftSidebar}
   vertical
  >
   {
     // left sidebar contents 
   }
  </Sidebar>
  <Sidebar.Pusher>
    <div>
      {  
         // center content 
      }
     </div>
  </Sidebar.Pusher>
  <Sidebar
   as={Menu}
   animation='push'
   direction='right'
   visible={this.state.rightSidebar}
   vertical
  >
    {
      // right sidebar contents 
    }
  </Sidebar>
</Sidebar.Pushable>

The result was that the right side of center content was covered by the right sidebar, instead of the center being "squeezed" between the sidebars. Is there something wrong with the structure of my JSX or will this require some CSS wrangling?

[brianespinosa]

@kwayebopp please do not comment on old, closed reports asking for help. If there is a bug you are experiencing, open a new report instead. For usage questions like this one, you should use Stack Overflow.