Merge pull request #347 from Safelite/feature/digital/SSR-528

Set modal button position to be absolute while relative to parent rat…

src/iss-components/site-header/menu-modal/menu-modal.vue

@@ -1,13 +1,13 @@
 <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)">
+        <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" aria-label="Hamburger Menu (modal window)" @click="toggle()">
             <div class="bar1"></div>
             <div class="bar2"></div>
             <div class="bar3"></div>
         </button>
     </div>
     <!-- Modal -->
-    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }">
+    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-fullscreen">
         <div class="modal-content">
             <div class="modal-header visually-hidden">
@@ -53,6 +53,8 @@
 
 <script>
 import textLink from "@/ux-components/text-link/text-link";
+import { Modal } from "bootstrap";
+
 export default {
     name: 'menuModal',
     data() {
@@ -62,17 +64,25 @@ export default {
         };
     },
     methods: {
-        show() {
-            this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
-            this.isActive = true;
-            document.querySelector('.fade-on-route-transition').scrollTo({
-                top: 0,  behavior: 'instant'
-            });
-        },
-        hide() {
-            var self = this;
-            self.isActive = false;
-        },
+        toggle() {
+            if(this.isActive){
+                //hide modal
+                this.isActive = false;
+                const modal = Modal.getInstance(document.getElementById("footerModal"));
+                modal?.hide();
+            }
+            else
+            {
+                //show modal
+                this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
+                this.isActive = true;
+                const modal = Modal.getOrCreateInstance(document.getElementById("footerModal"));
+                modal?.show();
+                document.querySelector('.fade-on-route-transition').scrollTo({
+                    top: 0,  behavior: 'instant'
+                });
+            }
+        }
     },
     components: {
         textLink,
@@ -127,6 +137,7 @@ export default {
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
+        z-index: 2;
         .modal-body {
             padding: 2rem;
             .ccpa-icon {

src/iss-components/site-header/site-header.vue

@@ -96,6 +96,7 @@ export default({
     <style lang="scss" scoped>
     .site-header {
         height: 56px;
+        position: relative;
     }
     .alert {
         left: 0;

src/layouts/vin-lookup/vin-lookup.spec.js

@@ -119,6 +119,11 @@ const vehicleWithNoAdditionalPartsOrQuestionsMockResponse = {
   },
 };
 
+jest.mock("bootstrap", () => ({
+  getInstance: jest.fn(),
+  getOrCreateInstance: jest.fn(),
+}));
+
 const mockRoute = {
   query: {
     // Needed inside vehicle-questions-mixin

src/layouts/welcome-page/welcome-page.vue

@@ -2,7 +2,7 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
         <div class="page-container-grouped-styles welcome">
             <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" class="mt-5"/>
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
                 <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4"/>
                 <div class="container-fluid px-5">
                     <div class="row mt-5">