Navbars

Stängning av mobilmenyn

Så här stänger du mobilmenyn när du klickar på en länk i menyn

document.addEventListener(
  'DOMContentLoaded',
  function () {
    'use strict';
    const mobileMenu = new bootstrap.Collapse(document.querySelector('.navbar-collapse'), { toggle: false });
    const handleMobileMenu = () => mobileMenu.hide();
    document.addEventListener('click', handleMobileMenu);
    document.addEventListener('scroll', handleMobileMenu);
  },
  false
);

Scrolla till rätt ställe

Så här scrollar du till rätt plats när du klickar på en länk i menyn

html {
  scroll-padding-top: 56px; /* höjden på navbaren */
}

Off canvas

Så här stänger du offcanvas menyn när du klickar på en länk i menyn

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

    const mainNav = document.querySelector('#mainNav');
    if (mainNav) {
      const navbarCollapse = document.querySelector('.navbar-toggler');
      const menuOffcanvas = document.getElementById('offcanvas-1');
      const toggleNavbarToggler = () => navbarCollapse.classList.toggle('collapsed');

      if (menuOffcanvas) {
        menuOffcanvas.querySelectorAll('a[href^="#"]').forEach((anchor) => {
          anchor.addEventListener('click', (e) => {
            e.preventDefault();
            const anchorLink = anchor.getAttribute(['href']);
            if (anchorLink === '#') return;
            const anchorID = document.querySelector(anchorLink);
            if (anchorID) {
              const position = anchorID.offsetTop - mainNav.offsetHeight;
              window.scrollTo({
                top: position,
                behavior: 'smooth',
              });
              navbarCollapse.click();
            } else console.log(`debug: ${anchorLink} does not exist on the page`);
          });
        });
        menuOffcanvas.addEventListener('hide.bs.offcanvas', () => toggleNavbarToggler());
        menuOffcanvas.addEventListener('show.bs.offcanvas', () => toggleNavbarToggler());

        window.addEventListener('scroll', () => {
          if (menuOffcanvas.classList.contains('show')) {
            navbarCollapse.click();
          }
        });
        window.addEventListener('resize', () => {
          if (menuOffcanvas.classList.contains('show')) {
            navbarCollapse.click();
          }
        });
      }
    }
  },
  false
);