Add the following css classes to <div class="app">
to get different layouts
.layout-small-menu
- collapses sidebar panel..layout-chat-open
- chat panel is open by default on page reload..layout-fixed-header
- main panel header is fixed on top..layout-boxed
- activates boxed layout..layout-static-sidebar
- static sidebar panel that scrolls with the rest of the page..layout-right-sidebar
- sidebar panel on the right..layout-fixed-footer
- main panel footer fixed at the bottom.For angular you can change your default layout options from app.main.js
Use data-toggle="layout-small-menu"
to toggle small sidebar state on click e.g:
<a href="javascript:;" data-toggle="layout-small-menu"></a>
Use data-toggle="layout-chat-open"
to toggle chat panel.
<a href="javascript:;" data-toggle="layout-chat-open"></a>
Use data-toggle="offscreen"
to toggle the offscreen navigation. If you want to reveal the right sidebar navigation then use with data-move="rtl"
.
Note: Offscreen layout should be wrapped in either .offscreen-left
for left positioned sidebar or .offscreen-right
for right positioned.