DigitalConsumer.FixMyGlass/src/common-components/funnel-header/menu-modal/menu-modal.vue

<template>
  <div class="menu-modal-container">
    <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </button>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
    <div class="menu-modal-container">
      <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </button>
    </div>
    <div class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <div class="modal-header visually-hidden">
          <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
        </div>
        <div class="modal-body d-flex flex-column">
          <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" target="_blank" />
          <textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" target="_blank" />
          <textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" target="_blank" />
        </div>
        <div class="modal-footer d-flex justify-content-start">
          &copy; {{new Date().getFullYear()}} Safelite Group
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import textLink from "@/ux-components/text-link/text-link";
export default {
  name: 'menuModal',
  data() {
    return {
      isActive: false,
      currentFooterAndHeaderHeight: 0,
    };
  },
  methods: {
    show() {
      this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
      this.isActive = true;
      document.querySelector('.page-container-grouped-styles').scrollTo({
        top: 0,  behavior: 'smooth'
      });
    },
    hide() {
      var self = this;
      self.isActive = false;
    },
  },
  components: {
    textLink,
  }
}
</script>

<style lang="scss">
.menu-modal-container {
  position: absolute;
  padding: 1.47rem 1rem 1.47rem 1.47rem;
  right: 0;
  button {
    border: none;
    &.menu-button {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
      background-color: $white;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;//Required to prevent 'squish' on iPhone
      z-index: 1056;
      .bar1,
      .bar2,
      .bar3 {
        width: 14px;
        height: 2px;
        background-color: $blue;
        margin: 1px 0;
        transition: 0.25s;
      }
      &.active .bar1 {
        transform: rotate(-45deg) translate(-3px, 3px);
      }
      &.active .bar2 {opacity: 0;}
      &.active .bar3 {
        transform: rotate(45deg) translate(-3px, -3px);
      }
    }
  }
}
.modal {
  max-width: 576px;
  left: auto;
  height: calc(100% - 72px);
  top: 72px;
  border-top: 1px solid $gray-300;
  overflow-x: visible;
  overflow-y: visible;
  .modal-body {
    padding: 2rem;
  }
    .modal-fullscreen {
      width: 100vw;
      max-width: 576px;
  }
  .navigation-link {
    margin-bottom: 1.5rem;
  }
  .modal-footer {
    border-top: none;
    padding: 2rem;
  }
  .menu-modal-container {
    position: absolute;
    padding: 1.47rem 1rem 1.47rem 1.47rem;
    right: 0;
    top: -4.5rem;
    button {
      border: none;
      &.menu-button {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        box-shadow: none;
        background-color: $white;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0;//Required to prevent 'squish' on iPhone
        z-index: 1056;
        .bar1,
        .bar2,
        .bar3 {
          width: 14px;
          height: 2px;
          background-color: $blue;
          margin: 1px 0;
          transition: 0.25s;
        }
        &.active .bar1 {
          transform: rotate(-45deg) translate(-3px, 3px);
        }
        &.active .bar2 {opacity: 0;}
        &.active .bar3 {
          transform: rotate(45deg) translate(-3px, -3px);
        }
      }
    }
  }
  //.modal-backdrop styles are in common-styles.scss
}
</style>