From 1519315cf18059060f6a3276e34905d93c729dbc Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 30 Mar 2023 13:56:11 -0400
Subject: [PATCH 1/2] Now set to toggle the modal in code rather than markup.

---
 .../funnel-header/menu-modal/menu-modal.vue   | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index cc06b2710..65d0d1902 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/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();
+            }
+
+            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;

From 635c4a28558289c94ae23988b45cf601873a90fb Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 30 Mar 2023 14:05:10 -0400
Subject: [PATCH 2/2] Fix in toggleModal

---
 src/fmg-components/funnel-header/menu-modal/menu-modal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index 65d0d1902..ccf2c38e0 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -79,9 +79,9 @@ export default {
         toggleModal() {
             if (this.isActive) {
                 this.closeModal();
+            } else {
+                this.openModal();
             }
-
-            this.openModal();
         },
         openModal() {
             Modal.getOrCreateInstance(document.getElementById("footerModal")).show();