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].

.docs-demo.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>