side-offcanvas

Summary

Right-side dark off-canvas drawer toggled from the header hamburger / menu icon. Contains a top-aligned close button, a centered white logo, a clone of the main menu (rendered through meanmenu), an Instagram thumbnail strip, an address block, and a row of social icons. Backed by a click-to-dismiss page overlay.

HTML structure (minimal)

<div class="tpoffcanvas-area">
  <div class="tpoffcanvas">
    <div class="tpoffcanvas__close-btn">
      <button class="close-btn"><i class="fal fa-times"></i></button>
    </div>
    <div class="tpoffcanvas__logo text-center">
      <a href="index.html"><img src="logo-white.png"></a>
    </div>
    <div class="mobile-menu"><!-- meanmenu fills this from #mobile-menu --></div>
    <div class="tpoffcanvas__instagram text-center">
      <div class="tpoffcanvas__instagram-title"><h4>instagram</h4></div>
      <a href="#"><img src="project-inner-4.jpg"></a>
      <a href="#"><img src="project-inner-5.jpg"></a>
      <a href="#"><img src="project-inner-6.jpg"></a>
      <a href="#"><img src="project-inner-7.jpg"></a>
    </div>
    <div class="tpoffcanvas__info text-center">
      <h4 class="offcanva-title">we are here</h4>
      <a href="https://www.google.com/maps/…" target="_blank">27 Division St, New York, <br>NY 10002, USA</a>
    </div>
    <div class="tpoffcanvas__social">
      <div class="social-icon text-center">
        <a><i class="fab fa-twitter"></i></a>
        <a><i class="fab fa-instagram"></i></a>
        <a><i class="fab fa-facebook-square"></i></a>
        <a><i class="fab fa-dribbble"></i></a>
      </div>
    </div>
  </div>
</div>
<div class="body-overlay"></div>

Key SCSS tokens

.tpoffcanvas-area {
  position: fixed; top: 0; right: -100%;
  height: 100%; width: 420px;
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  z-index: 9999;
  padding: 50px 40px;
  overflow-y: auto;
  transition: right .35s ease;
  &.opened { right: 0; }
}
.body-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 2, 41, 0.7);
  opacity: 0; visibility: hidden;
  transition: opacity .35s;
  z-index: 9998;
  &.opened { opacity: 1; visibility: visible; }
}
.tpoffcanvas__instagram a {
  display: inline-block;
  width: 60px; height: 60px;
  border-radius: 8px; overflow: hidden;
  margin: 0 4px;
  img { width: 100%; height: 100%; object-fit: cover; }
}
.tpoffcanvas__social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
}

Animation logic

// Toggles in main.js
$('.tp-menu-bar').on('click', function () {
  $('.tpoffcanvas-area').addClass('opened');
  $('.body-overlay').addClass('opened');
});
$('.close-btn, .body-overlay').on('click', function () {
  $('.tpoffcanvas-area').removeClass('opened');
  $('.body-overlay').removeClass('opened');
});

// meanmenu duplicates the main #mobile-menu nav into .mobile-menu inside the drawer
$('#mobile-menu').meanmenu({
  meanScreenWidth: '991',
  meanMenuContainer: '.mobile-menu'
});

Notable details

• meanmenu reuses the existing desktop menu source (#mobile-menu) so the off-canvas content stays in sync without duplication.
• Drawer width is fixed at 420px; on smaller screens it goes full-width via mediaquery in _offcanvas.scss.
• Same component is the only mobile menu mechanism — no inline accordion alternative.

Use when

• Templates where the desktop nav is broad and you need a richer mobile drawer (menu + social + contact + Instagram).
• Brand-heavy mobile experiences that should feel like a mini brand panel rather than a stripped menu list.
• Sites that want consistent menu sources between desktop and mobile.

Caveats

• Initially right: -100% so screenshot pipeline will fall back to a palette-gradient placeholder.
• meanmenu is jQuery-only and unmaintained; consider replacing with a native disclosure pattern if migrating.