From 9f7e38ebf020e2c4d1a1487e284837ffa00abf60 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 16 Aug 2022 15:13:37 -0400
Subject: [PATCH] CSR-791 add second button to toggle open/close

Useful for accessibility.
---
 .../funnel-header/menu-modal/menu-modal.vue   | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/common-components/funnel-header/menu-modal/menu-modal.vue b/src/common-components/funnel-header/menu-modal/menu-modal.vue
index c329f057d..bd13e46a8 100644
--- a/src/common-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/common-components/funnel-header/menu-modal/menu-modal.vue
@@ -8,6 +8,13 @@
   </div>
   <!-- Modal -->
   <div class="modal fade" 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">
@@ -100,6 +107,8 @@ export default {
   height: calc(100% - 72px);
   top: 72px;
   border-top: 1px solid $gray-300;
+  overflow-x: visible;
+  overflow-y: visible;
   .modal-body {
     padding: 2rem;
   }
@@ -114,6 +123,45 @@ export default {
     border-top: none;
     padding: 2rem;
   }
+  .menu-modal-container {
+    position: absolute;
+    padding: 1.47rem 1rem 1.47rem 1.47rem;
+    right: 0;
+    top: -4.5rem;
+    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
 }
 </style>