Sidebar adjustments

SideBar Adjustments.md

A. Sidebar Adjustments

sidebar.css

    .sidebar {
      left: 0 !important;
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    .articles-filters {
      @extend .sidebar;
      position: fixed;
      transition: top 700ms ease-in-out;
    }

sidebar.js

  // sideBar is position: fixed but if the footer covers it, move it up
  // if not, set it back to its original position
  const sideBar = document.querySelector('.articles-filters');
  if (sideBar) {
    const sideBarTopProperty = sideBar.offsetTop;
    window.addEventListener('scroll', function (e) {
      const sideBarHeight = sideBar.clientHeight;
      const footerPosition = document
        .querySelector('footer')
        .getBoundingClientRect().y;
      if (sideBarHeight > footerPosition) {
        sideBar.style.top = `${
          sideBarTopProperty - (sideBarHeight - footerPosition)
        }px`;
      } else {
        sideBar.style.top = `${sideBarTopProperty}px`;
      }
    });
  }