diff options
Update old docs to new Pug templates
1 files changed, 45 insertions, 0 deletions
| -rw-r--r-- | docs/src/contents/off-canvas.pug | 45 |
diff --git a/docs/src/contents/off-canvas.pug b/docs/src/contents/off-canvas.pug new file mode 100644 index 0000000..7e45132 --- /dev/null +++ b/docs/src/contents/off-canvas.pug @@ -0,0 +1,45 @@ +p + | The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. +p + | By default, the off-canvas menu is collapsed whenever the window width is. + | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px]. + +.columns + .column + .off-canvas.off-canvas-sidebar-show + a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo") + i.icon.icon-menu + #sidebar-demo.off-canvas-sidebar.flex-centered + span Sidebar + a.off-canvas-overlay(href="#close") + .off-canvas-content + .content + h4 Lorem ipsum + p + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. + p + | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs. + +p + | You can open the sidebar by adding the class #[code active] to #[code off-canvas-sidebar]. + | And remove the #[code active] to close it. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="off-canvas"> + <!-- off-screen toggle button --> + <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id"> + <i class="icon icon-menu"></i> + </a> + + <div id="sidebar-id" class="off-canvas-sidebar"> + <!-- off-screen sidebar --> + </div> + + <a class="off-canvas-overlay" href="#close"></a> + + <div class="off-canvas-content"> + <!-- off-screen content --> + </div> + </div>
\ No newline at end of file |