From f7ef1d44e491ff8865a8c162d99ea77946de4434 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 15 Nov 2022 12:23:20 -0500
Subject: [PATCH] Changed modal so that menu button is keyboard focusable

---
 .../site-header/menu-modal/menu-modal.vue     | 63 +++++++++++++++++--
 1 file changed, 58 insertions(+), 5 deletions(-)

diff --git a/src/common-components/site-header/menu-modal/menu-modal.vue b/src/common-components/site-header/menu-modal/menu-modal.vue
index 37e80850..82d248e0 100644
--- a/src/common-components/site-header/menu-modal/menu-modal.vue
+++ b/src/common-components/site-header/menu-modal/menu-modal.vue
@@ -8,10 +8,23 @@
     </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 }" :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">
-            <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
+            <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>  
           </div>
           <div class="modal-body d-flex flex-column">
             <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" target="_blank" />
@@ -74,8 +87,8 @@
         justify-content: center;
         align-items: center;
         padding: 0;//Required to prevent 'squish' on iPhone
-        z-index: 1056;
-        .bar1,
+        z-index: 1050;
+        .bar1,  
         .bar2,
         .bar3 {
           width: 14px;
@@ -106,7 +119,7 @@
       .modal-body {
         padding: 2rem;
       }
-        .modal-fullscreen {
+      .modal-fullscreen {
           width: 100vw;
           max-width: 576px;
       }
@@ -117,7 +130,47 @@
         border-top: none;
         padding: 2rem;
       }
-
+      .menu-modal-container {
+            position: absolute;
+            padding: 1.47rem 1rem 1.47rem 1.47rem;
+            right: 0;
+            top: -4.0rem;
+            button {
+                border: none;
+                &.menu-button {
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    border-radius: 50%;
+                    box-shadow: none;
+                    background-color: $white;
+                    position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 0; //Required to prevent 'squish' on iPhone
+                    z-index: 1056;
+                    .bar1,
+                    .bar2,
+                    .bar3 {
+                        width: 14px;
+                        height: 2px;
+                        background-color: $blue;
+                        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);
+                    }
+                }
+            }
+        }
       //.modal-backdrop styles are in common-styles.scss
     }
   }