Merge pull request #1037 from Safelite/defect/CSR-1283

Now set to toggle the modal in code rather than markup.

src/fmg-components/funnel-header/menu-modal/menu-modal.vue

@@ -4,8 +4,7 @@
             class="menu-button"
             type="button"
             :class="[isActive ? 'active' : '']"
-            data-bs-toggle="modal"
-            data-bs-target="#footerModal"
+            @click="toggleModal"
             aria-label="Hamburger Menu (modal window)">
             <div class="bar1"></div>
             <div class="bar2"></div>
@@ -22,19 +21,6 @@
         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">
@@ -79,6 +65,8 @@
 
 <script>
 import textLink from "@/ux-components/text-link/text-link";
+import { Modal } from "bootstrap";
+
 export default {
     name: "menuModal",
     data() {
@@ -88,6 +76,19 @@ export default {
         };
     },
     methods: {
+        toggleModal() {
+            if (this.isActive) {
+                this.closeModal();
+            } else {
+                this.openModal();
+            }
+        },
+        openModal() {
+            Modal.getOrCreateInstance(document.getElementById("footerModal")).show();
+        },
+        closeModal() {
+            Modal.getInstance(document.getElementById("footerModal")).hide();
+        },
         show() {
             this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
             this.isActive = true;