mixin BasicExample()
  a.btn.btn-primary.me-1(data-bs-toggle='offcanvas' href='#offcanvasExample' role='button' aria-controls='offcanvasExample')
    | Link with href
  button.btn.btn-primary(type='button', data-bs-toggle='offcanvas', data-bs-target='#offcanvasExample', aria-controls='offcanvasExample')
    | Button with data-bs-target
  #offcanvasExample.offcanvas.offcanvas-start(tabindex='-1' aria-labelledby='offcanvasExampleLabel')
    .offcanvas-header
      h5#offcanvasExampleLabel.offcanvas-title Offcanvas
      button.btn-close.text-reset(type='button' data-bs-dismiss='offcanvas' aria-label='Close')
    .offcanvas-body
      div
        | Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
      .dropdown.mt-3
        button#dropdownMenuButton.btn.btn-secondary.dropdown-toggle(type='button' data-bs-toggle='dropdown')
          | Dropdown button
        ul.dropdown-menu(aria-labelledby='dropdownMenuButton')
          li
            a.dropdown-item(href='#') Action
          li
            a.dropdown-item(href='#') Another action
          li
            a.dropdown-item(href='#') Something else here

mixin OffcanvasPlacement
  // Top Offcanvas
  ='\n'
  button.btn.btn-primary.mb-1(type='button', data-bs-toggle='offcanvas', data-bs-target='#offcanvasTop', aria-controls='offcanvasTop') Top Offcanvas
  #offcanvasTop.offcanvas.offcanvas-top(tabindex='-1', aria-labelledby='offcanvasTopLabel')
    .offcanvas-header
      h5#offcanvasTopLabel Offcanvas top
      button.btn-close.text-reset(type='button', data-bs-dismiss='offcanvas', aria-label='Close')
    .offcanvas-body
      | ...
  // Right Offcanvas
  ='\n'
  button.btn.btn-primary.mb-1(type='button', data-bs-toggle='offcanvas', data-bs-target='#offcanvasRight', aria-controls='offcanvasRight') Right Offcanvas
  #offcanvasRight.offcanvas.offcanvas-end(tabindex='-1', aria-labelledby='offcanvasRightLabel')
    .offcanvas-header
      h5#offcanvasRightLabel Offcanvas right
      button.btn-close.text-reset(type='button', data-bs-dismiss='offcanvas', aria-label='Close')
    .offcanvas-body
      | ...
  // Left Offcanvas
  ='\n'
  button.btn.btn-primary.mb-1(type='button', data-bs-toggle='offcanvas', data-bs-target='#offcanvasLeft', aria-controls='offcanvasLeft') Left Offcanvas
  #offcanvasLeft.offcanvas.offcanvas-start(tabindex='-1', aria-labelledby='offcanvasLeftLabel')
    .offcanvas-header
      h5#offcanvasLeftLabel Offcanvas left
      button.btn-close.text-reset(type='button', data-bs-dismiss='offcanvas', aria-label='Close')
    .offcanvas-body
      | ...
  // Bottom Offcanvas
  ='\n'
  button.btn.btn-primary.mb-1(type='button', data-bs-toggle='offcanvas', data-bs-target='#offcanvasBottom', aria-controls='offcanvasBottom') Bottom offcanvas
  #offcanvasBottom.offcanvas.offcanvas-bottom(tabindex='-1', aria-labelledby='offcanvasBottomLabel')
    .offcanvas-header
      h5#offcanvasBottomLabel.offcanvas-title Offcanvas bottom
      button.btn-close.text-reset(type='button', data-bs-dismiss='offcanvas', aria-label='Close')
    .offcanvas-body.small
      | ...

mixin OffcanvasBackDrop
  // Enable body scrolling
  ='\n'
  button.btn.btn-primary.mb-1(type='button', data-bs-toggle='offcanvas', data-bs-target='#offcanvasScrolling', aria-controls='offcanvasScrolling') Enable body scrolling
  #offcanvasScrolling.offcanvas.offcanvas-start(data-bs-scroll='true', data-bs-backdrop='false', tabindex='-1', aria-labelledby='offcanvasScrollingLabel')
    .offcanvas-header
      h5#offcanvasScrollingLabel.offcanvas-title Colored with scrolling
      button.btn-close.text-reset(type='button', data-bs-dismiss='offcanvas', aria-label='Close')
    .offcanvas-body
      p Try scrolling the rest of the page to see this option in action.
  // Enable backdrop 
  ='\n'
  button.btn.btn-primary.mb-1(type='button', data-bs-toggle='offcanvas', data-bs-target='#offcanvasWithBackdrop', aria-controls='offcanvasWithBackdrop') Enable backdrop (default)
  #offcanvasWithBackdrop.offcanvas.offcanvas-start(tabindex='-1', aria-labelledby='offcanvasWithBackdropLabel')
    .offcanvas-header
      h5#offcanvasWithBackdropLabel.offcanvas-title Offcanvas with backdrop
      button.btn-close.text-reset(type='button', data-bs-dismiss='offcanvas', aria-label='Close')
    .offcanvas-body
      p .....
  // Enable both scrolling & backdrop
  ='\n'
  button.btn.btn-primary.mb-1(type='button', data-bs-toggle='offcanvas', data-bs-target='#offcanvasWithBothOptions', aria-controls='offcanvasWithBothOptions') Enable both scrolling & backdrop
  #offcanvasWithBothOptions.offcanvas.offcanvas-start(data-bs-scroll='true', tabindex='-1', aria-labelledby='offcanvasWithBothOptionsLabel')
    .offcanvas-header
      h5#offcanvasWithBothOptionsLabel.offcanvas-title Backdroped with scrolling
      button.btn-close.text-reset(type='button', data-bs-dismiss='offcanvas', aria-label='Close')
    .offcanvas-body
      p Try scrolling the rest of the page to see this option in action.