extends ../../layouts/LayoutComponent
include ../../mixins/components/Offcanvas

append variables
  
  -
    var pageHeader = {
      title: 'Offcanvas',
      description: "Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.",
      url: `https://getbootstrap.com/docs/${bootstrapVersion}/components/offcanvas/`,
      linkText: 'Offcanvas on Bootstrap'
    } 

block component

  +PageHeader(pageHeader)

  +ComponentCard({
    title: 'Example',
    anchor: true,
    descriptionEl:`<p class='mb-2'>Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the <code>.show</code> class on an element with the <code>.offcanvas</code> class.</p>
    <ul class='mb-2'>\
      <li><code>.offcanvas</code> hides content (default)</li>
      <li><code>.offcanvas.show</code> shows content</li>
    </ul>
    <p>You can use a link with the <code>href</code> attribute, or a button with the <code>data-bs-target</code> attribute. In both cases, the <code>data-bs-toggle="offcanvas"</code> is required.</p>`
  }).mb-3
    +BasicExample

  +ComponentCard({
    title: 'Placement',
    anchor: true,
    descriptionEl:`<p class='mb-2'>There’s no default placement for offcanvas components, so you must add one of the modifier classes below;</p>
    <ul>
      <li><code>.offcanvas-top</code> places offcanvas on the top of the viewport</li>
      <li><code>.offcanvas-end</code> places offcanvas on the right of the viewport</li>
      <li><code>.offcanvas-start</code> places offcanvas on the left of the viewport (shown above)</li>
      <li><code>.offcanvas-bottom</code> places offcanvas on the bottom of the viewport</li>
    </ul>`
  }).mb-3
    +OffcanvasPlacement

  +ComponentCard({
    title: 'Backdrop',
    anchor: true,
    descriptionEl:`<p class='mb-2'>Scrolling the <code>&lt;body&gt;</code> element is disabled when an offcanvas and its backdrop are visible. Use the <code>data-bs-scroll</code> attribute to toggle <code>&lt;body&gt;</code> scrolling and <code>data-bs-backdrop</code> to toggle the backdrop.</p>`
  })
    +OffcanvasBackDrop