extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'off-canvas'
  - var parent = 'experimentals'
  - var title = 'Off-canvas - Experimentals - Spectre.css CSS Framework'
  - var description = 'The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('off-canvas', 'Off-canvas')
    p
      small.label.label-secondary CSS ONLY

    include ../_layout/_ad-g.pug

    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>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug