From ac976b54fb9f6220c97e742ff5f768a9a2cad42f Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Mon, 19 Jun 2023 15:19:41 -0400
Subject: [PATCH] Set modal button position to be absolute while relative to
 parent rather than the page. This prevents the button from scrolling down
 with the page since the header was unstuck. Also correct white space issues
 on welcome page.

---
 .../site-header/menu-modal/menu-modal.vue     | 37 ++++++++++++-------
 .../site-header/site-header.vue               |  1 +
 src/layouts/welcome-page/welcome-page.vue     |  2 +-
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index 98caab16..868b0693 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/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 {
diff --git a/src/iss-components/site-header/site-header.vue b/src/iss-components/site-header/site-header.vue
index 64ded403..cfb4971e 100644
--- a/src/iss-components/site-header/site-header.vue
+++ b/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;
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 432989ef..4be1f187 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/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">