off-canvas-extra-drawer

Summary

Right-side off-canvas drawer triggered by #btn-extra in the header. Shows a logo, two columns of practice areas, opening hours/address/email, an About paragraph, and a row of social icons. Doubles as a marketing summary, not just a mobile menu.

HTML structure (minimal)

<div id="extra-wrap" class="dark text-light">
  <div id="btn-close"><span></span><span></span></div>
  <div id="extra-content">
    <img src="images/logo.webp" class="w-150px" alt="">
    <div class="spacer-30-line"></div>
    <h2 class="hs-4 mb-3">Practice Areas</h2>
    <div class="row g-4">
      <div class="col-lg-6">
        <ul class="ul-check id-color-2">
          <li><a href="practice-area-single.html">Personal Injury</a></li>
          <li><a href="practice-area-single.html">Criminal Defense</a></li>
          <li><a href="practice-area-single.html">Family Law</a></li>
          <!-- ... -->
        </ul>
      </div>
      <div class="col-lg-6"><!-- second column --></div>
    </div>
    <div class="spacer-30-line"></div>
    <h2 class="hs-4">Contact Us</h2>
    <div><i class="icofont-clock-time me-2 id-color-2"></i>Monday - Saturday 08.00 - 18.00</div>
    <div><i class="icofont-location-pin me-2 id-color-2"></i>100 S Main St, New York, NY</div>
    <div><i class="icofont-envelope me-2 id-color-2"></i>contact@regalis.com</div>
    <div class="spacer-30-line"></div>
    <h2 class="hs-4">About Us</h2>
    <p>We provide trusted legal representation...</p>
    <div class="social-icons">
      <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
      <!-- ... -->
    </div>
  </div>
</div>

Key SCSS tokens

#extra-wrap {
  position: fixed;
  top: 0; right: 0;
  width: 480px; max-width: 100vw;
  height: 100vh;
  background: var(--bg-dark-1);
  color: #fff;
  transform: translateX(100%);
  transition: transform .4s ease;
  z-index: 1050;
  overflow-y: auto;
}
#extra-wrap.show { transform: translateX(0); }
#extra-content { padding: 4rem 3rem; }
#btn-close { position: absolute; top: 1.5rem; right: 1.5rem; cursor: pointer; }
#btn-close span {
  display: block; width: 24px; height: 2px;
  background: #fff; margin: 5px 0;
}
#btn-close span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
#btn-close span:nth-child(2) { transform: rotate(-45deg) translate(4px, -4px); }
.ul-check li::before {
  content: '\f00c';                               /* fa check */
  font-family: FontAwesome;
  margin-right: .5rem;
  color: var(--secondary-color);
}
.spacer-30-line {
  width: 100%; height: 1px; margin: 2rem 0;
  background: rgba(255,255,255,.1);
}

Animation logic

// designesia.js — toggle drawer open
$('#btn-extra').on('click', function () {
  $('#extra-wrap').addClass('show');
  $('body').addClass('no-scroll');
});
$('#btn-close').on('click', function () {
  $('#extra-wrap').removeClass('show');
  $('body').removeClass('no-scroll');
});
// ESC key also closes
$(document).on('keyup', e => {
  if (e.key === 'Escape') $('#extra-wrap').removeClass('show');
});

Notable details

• Drawer is a curated marketing digest (services + contact + bio + socials), not a duplicate of the navbar — pulls double duty as a "summary card" for any page.
• Body gets .no-scroll while open to prevent background scroll.
• The close button uses two rotated <span>s instead of an icon font — sharp, scalable, no font load.
• ul-check lists prefix each <li> with a FontAwesome check glyph in the gold accent color.

Use when

• Service businesses where the navbar would otherwise need to repeat practice areas, contact and address on every page.
• Templates that want a distinctive "more" panel that's not a mobile menu replica.

Caveats

• Drawer is initially transform: translateX(100%) — visible in the DOM but off-screen. Some screen readers may still announce it; consider aria-hidden toggling.
• Width is fixed at 480px on desktop; long content (e.g., 12-item practice list) requires scroll inside the drawer.
• The screenshot pipeline will not capture this drawer at first paint (it's translated off-screen) — selector defaults to a palette-gradient placeholder.