sigit.io/src/layouts/StickySideColumns.module.scss

@import '../styles/colors.scss';
@import '../styles/sizes.scss';

.container {
  display: grid;

  @media only screen and (max-width: 767px) {
    gap: 20px;
    grid-auto-flow: column;
    grid-auto-columns: 100%;

    // Hide Scrollbar and let's use tabs to navigate
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
    &::-webkit-scrollbar {
      display: none; /* Safari and Chrome */
    }
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;

    > * {
      scroll-margin-top: $header-height + $body-vertical-padding;
      scroll-snap-align: start;
      scroll-snap-stop: always; // Touch devices will always stop on each element
    }
  }

  @media only screen and (min-width: 768px) {
    grid-template-columns: 0.75fr 1.5fr 0.75fr;
    gap: 30px;
  }
}

.sidesWrap {
  position: relative;

  // HACK: Stop grid column from growing
  min-width: 0;
}

.sides {
  @media only screen and (min-width: 768px) {
    position: sticky;
    top: $body-vertical-padding;
  }
  > :first-child {
    // We want to keep header on smaller devices at all times
    max-height: calc(
      100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
    );

    @media only screen and (min-width: 768px) {
      max-height: calc(100dvh - $body-vertical-padding * 2);
    }
  }
}

// Adjust the content scroll on smaller screens
// Make sure only the inner tab is scrolling
.scrollAdjust {
  @media only screen and (max-width: 767px) {
    max-height: calc(
      100svh - $header-height - $body-vertical-padding * 2 - $tabs-height
    );
    overflow-y: auto;
  }
}

.content {
  @media only screen and (min-width: 768px) {
    padding: 10px;
    border: 10px solid $overlay-background-color;
    border-radius: 4px;
  }
}

.navTabs {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  height: $tabs-height;
  z-index: 2;
  background: $overlay-background-color;
  box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);

  padding: 5px;
  gap: 5px;

  @media only screen and (max-width: 767px) {
    display: flex;
  }

  > li {
    flex-grow: 1;
  }
}

.active {
  background-color: $primary-main !important;
  color: white !important;
}