This is a migrated thread and some comments may be shown as answers.

PanelBar inside Drawer

1 Answer 51 Views
Drawer
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
Veteran
David asked on 16 Dec 2019, 03:50 AM

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

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 17 Dec 2019, 01:28 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Drawer
Asked by
David
Top achievements
Rank 1
Iron
Veteran
Answers by
Preslav
Telerik team
Share this question
or