PanelBar inside Drawer

[David]

Hi,

I have a PanelBar left side menu with content to the right. I am happy with the functionality but would like to be able to collapse the entire side to allow more horizontal space for content. Drawer seems to have this functionality but then I would lose the PanelBar menu functionality. I have tried to put the PanelBar into a splitter but this doesn't seem to work with bootstrap and the doesn't render properly.

Do you have any suggestions for the best way to implement a hideable PanelBar side menu?

Kind regards,

David

[Preslav]

Hi David,

A possible solution to achieve the desired outcome is to hide the PanelBar by animating a negative margin.

The code could look like:

      #panelbar-wrap {
        transition: margin 500ms;
      }
      .hide-nav-panelbar {
        margin-left: -200px;
      }
...
        $("#hide-nav").on("click", function(e){
          $("#panelbar-wrap").toggleClass("hide-nav-panelbar")
        });

For a runnable example, check this test page - https://dojo.telerik.com/OluwoJaR

I hope this helps.

 

Regards,
Preslav
Progress Telerik