dash-bootstrap-components icon indicating copy to clipboard operation
dash-bootstrap-components copied to clipboard

Published 20 hours ago • verified publisher icon facultyai

Example with collapsible sidebar and navbar

Open harisbal opened this issue 4 years ago • 6 comments

Thank you very much for this awesome library. I would like to suggest including an example (for multi-page apps) where both a collapsible sidebar and a navbar are present in the layout. What I have in mind is something similar to what we see in many bootstrap templates nowadays such as this.

In this PR I have created the barebones of the example but since I'm very weak at the css part I cannot make it look right. image

Any help to finish this example would be much appreciated

harisbal avatar Aug 31 '21 22:08 harisbal

Hi @harisbal

Thanks so much for this!

We're currently working on dash-bootstrap-components v1.0.0, which will add support for Bootstrap 5. Bootstrap 5 has a neat new component called "Offcanvas" (you can see a demo in their documentation here) which is basically a collapsible sidebar. I think that component will make it much easier to build this example with less custom CSS needed.

We should have a beta version ready to go in the next couple weeks, so I'm thinking it might be worth holding off on this right now then updating it to use Offcanvas when that's ready. What do you think?

tcbegley avatar Sep 01 '21 06:09 tcbegley

This is great news. Of course we should wait for the new functionality in Bootstrap 5. Cheers!

harisbal avatar Sep 01 '21 07:09 harisbal

I'm trying to have a go with Offcanvas but I I'm not sure it can help us achieve what I have in mind, since Offcanvas disappears completely from the view.

What I would likeis to place a collapsible sidebar (with icons and a toggle button) alongside a navbar like this

Happy to further work on this but some help with the css would be much appreciated

harisbal avatar Oct 03 '21 15:10 harisbal

Sorry for the slow response on this. Have you checked out this example. Does that do what you want?

tcbegley avatar Oct 09 '21 07:10 tcbegley

It is close but not exactly what I'm looking for. The main issues are two:

  1. Use of a toggle button instead of onhover
  2. Resize the content of the page depending on the state of the sidebar (collapsed or not)

I understand that the solution is to mix the responsive-collapsible-sidebar and collapsible-sidebar-with-icons but I haven't managed to make this work.

harisbal avatar Oct 09 '21 09:10 harisbal

hello, I would also be interested to do the same things as @harisbal Did you make any progress on this ? Do you have any example ? Thank you

tlallema avatar Dec 14 '21 09:12 tlallema