photo off canvas

How to get the off canvas menu to work in bootstrap 5.2


// Javascript

document.addEventListener(
  'DOMContentLoaded',
  function () {
    'use strict';

    const mainNav = document.querySelector('#mainNav');
    if (mainNav) {
      const navbarCollapse = document.querySelector('.navbar-toggler');
      const menuOffcanvas = document.getElementById('sidebarmenu');
      if (menuOffcanvas) {
        menuOffcanvas.addEventListener(
          'hide.bs.offcanvas',
          () => {
            navbarCollapse.classList.toggle('collapsed');
          },
          false
        );
        menuOffcanvas.addEventListener(
          'show.bs.offcanvas',
          () => {
            navbarCollapse.classList.toggle('collapsed');
          },
          false
        );
      }
      menuOffcanvas.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener(
          'click',
          (e) => {
            e.preventDefault();
            let anchorLink = anchor.getAttribute(['href']);
            if (anchorLink === '#') return;
            let anchorID = document.querySelector(anchorLink);
            if (anchorID) {
              let offset = mainNav.offsetHeight,
                position = anchorID.offsetTop;
              window.scrollTo({
                top: position - offset,
                behavior: 'smooth',
              });
              navbarCollapse.click();
            } else alert(`debug: ${anchorLink} does not exist on the page`);
          },
          false
        );
      });
      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener(
          'click',
          (e) => {
            e.preventDefault();
            let anchorLink = anchor.getAttribute(['href']);
            if (anchorLink === '#') return;
            let anchorID = document.querySelector(anchorLink);
            if (anchorID) {
              let offset = mainNav.offsetHeight,
                position = anchorID.offsetTop;
              window.scrollTo({
                top: position - offset,
                behavior: 'smooth',
              });
            } else alert(`debug: ${anchorLink} does not exist on the page`);
          },
          false
        );
      });
    }
    const copyrights = [...document.querySelectorAll('[data-copyright]')];
    const brands = [...document.querySelectorAll('[data-brand]')];
    copyrights.forEach((c) => {
      c.textContent = `Copyright © ${new Date().getFullYear()} ${document.title}`;
    });
    brands.forEach((c) => {
      c.textContent = `${document.title}`;
    });

    const scrollTopBtn = document.getElementById('myBtn');

    if (scrollTopBtn) {
      document.addEventListener('scroll', () =>
        document.body.scrollTop > 20 || document.documentElement.scrollTop > 20 ? (scrollTopBtn.style.display = 'block') : (scrollTopBtn.style.display = 'none')
      );
      scrollTopBtn.addEventListener(
        'click',
        () => {
          window.scrollTo({
            top: 0,
            behavior: 'smooth',
          });
        },
        false
      );
    }
  },
  false
);
Go back