WIP footer menu modal.

src/common-components/footer-menu-modal/footer-menu-modal.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

src/common-components/footer-menu-modal/footer-menu-modal.vue

@@ -0,0 +1,52 @@
+<template>
+  <!-- Modal -->
+  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen">
+      <div class="modal-content">
+        <div class="modal-body d-flex flex-column">
+          <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
+          <textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
+          <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" />
+        </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: 'footerMenuModal',
+  components: {
+    textLink,
+  },
+}
+</script>
+
+<style lang="scss">
+.modal {
+  max-width: 576px;
+  left: auto;
+  height: calc(100% - 72px);
+  top: 72px;
+  border-top: 1px solid $gray-300;
+  .modal-body {
+    padding: 2rem;
+  }
+    .modal-fullscreen {
+      width: 100vw;
+      max-width: 576px;
+  }
+  .navigation-link {
+    margin-bottom: 1.5rem;
+  }
+  .modal-footer {
+    border-top: none;
+    padding: 2rem;
+  }
+  //.modal-backdrop styles are in common-styles.scss
+}
+</style>

src/common-components/funnel-footer/funnel-footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="footer pt-4">
+  <footer class="footer pt-4">
     <div class="container-fluid g-2">
       <div class="row">
         <div class="col-12 d-flex justify-content-center pb-2 fs-7">
@@ -26,6 +26,7 @@
             :aria-disabled="isForwardActionDisabled"
             :isDisabled="isForwardActionDisabled"
             @click-event="buttonClick"
+            data-bs-dismiss="modal"
           />
         </div>
         <div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
@@ -34,11 +35,12 @@
             :text="backLink"
             @click-event="linkClick"
             href="javascript:void(0)"
+            data-bs-dismiss="modal"
           />
         </div>
       </div>
     </div>
-  </div>
+  </footer>
 </template>
 
 <script>

src/common-components/funnel-header/funnel-header.vue

@@ -4,6 +4,8 @@
     v-if="imageSrc"
   >
     <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
+    <menuButton/>
+    <footerMenuModal/>
   </div>
   <alert
     class="position-absolute rounded-0 w-100 border-0 shadow-sm"
@@ -19,6 +21,8 @@
 import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
+import menuButton from "@/common-components/menu-button/menu-button";
+import footerMenuModal from "@/common-components/footer-menu-modal/footer-menu-modal";
 
 export default {
   name: "funnel-header",
@@ -43,6 +47,8 @@ export default {
   },
   components: {
     alert,
+    menuButton,
+    footerMenuModal,
   },
   mounted() {
     // Check if alert event is on the bus

src/common-components/menu-button/menu-button.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+  <div class="menu-button-container">
-    <div class="bar1"></div>
+    <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" @click="toggleClass()" data-bs-toggle="modal" data-bs-target="#exampleModal">
-    <div class="bar2"></div>
+      <div class="bar1"></div>
-    <div class="bar3"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </button>
   </div>
 </template>
 
@@ -23,31 +25,41 @@ export default {
 </script>
 
 <style lang="scss">
-.menu-button {
+.menu-button-container {
-  width: 1.5rem;
+  position: absolute;
-  height: 1.5rem;
+  top: 1.47rem;
-  border-radius: 50%;
+  right: 1.47rem;
-  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
+  button {
-  position: relative;
+    border: none;
-  display: flex;
+    &.menu-button {
-  flex-direction: column;
+      width: 1.5rem;
-  justify-content: center;
+      height: 1.5rem;
-  align-items: center;
+      border-radius: 50%;
-  .bar1,
+      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
-  .bar2,
+      background-color: $white;
-  .bar3 {
+      position: relative;
-    width: 14px;
+      display: flex;
-    height: 2px;
+      flex-direction: column;
-    background-color: $blue-400;
+      justify-content: center;
-    margin: 1px 0;
+      align-items: center;
-    transition: 0.25s;
+      z-index: 1056;
-  }
+      .bar1,
-  &.active .bar1 {
+      .bar2,
-    transform: rotate(-45deg) translate(-3px, 3px);
+      .bar3 {
-  }
+        width: 14px;
-  &.active .bar2 {opacity: 0;}
+        height: 2px;
-  &.active .bar3 {
+        background-color: $blue-400;
-    transform: rotate(45deg) translate(-3px, -3px);
+        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);
+      }
+    }
   }
 }
 </style>

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -5,7 +5,7 @@
       ref="theForm"
       v-slot="{ meta }"
     >
-      <div class="page-container-grouped-styles">
+      <div class="page-container-grouped-styles has-footer">
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

src/styles/common-styles.scss

@@ -47,4 +47,14 @@ body {
   .page-container-grouped-styles {
     @extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
   }
-}
+
+  //Footer modal backdrop adjustments for positioning
+  .modal-backdrop {
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 576px;
+    height: calc(100% - 152px);
+    top: 72px;
+  }
+
+}

src/styles/ux-variables.scss

@@ -180,3 +180,7 @@ $box-shadow-inset:            inset 0 1px 2px rgba($black, .075);
 $alert-bg-scale:                -90%;
 $alert-border-scale:            -100%;
 $alert-color-scale:             40%;
+
+//Modal animation
+$modal-fade-transform:              translate(0, 0);
+$modal-backdrop-opacity:            0;