From fe441d8ba077a4c773aae6f1c1f058d8eeb09201 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 10 Jul 2025 09:22:30 -0400
Subject: [PATCH] CASH-1042 WIP modal updates.

---
 .../funnel-header/menu-modal/menu-modal.vue   | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 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 4a17e964a..cf3af433e 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -22,7 +22,8 @@
         tabindex="-1"
         aria-labelledby="footerModalLabel"
         aria-hidden="true"
-        v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
+        v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }"
+        @click.self="closeModal">
         <div class="modal-dialog modal-fullscreen">
             <div class="modal-content">
                 <div class="modal-header visually-hidden">
@@ -178,20 +179,39 @@ export default {
 }
 .modal {
     &.menu-modal {
-        left: auto;
+        .modal-dialog {
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            height: calc(100% - 68px);
+            width: 100vw; // or set a max-width if you want a drawer effect
+            max-width: 294px;
+            margin: 0;
+            transform: translateX(100%);
+            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 1050;
+            @include media-breakpoint-up(md) {
+                height: calc(100% - 102px);
+                top: 102px;
+            }
+        }
+        &.show .modal-dialog {
+            transform: translateX(0);
+        }
+        background-color: rgba(0, 0, 0, 0.5); 
         height: calc(100% - 68px);
         top: 68px;
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
         @include media-breakpoint-up(md) {
-            height: calc(100% - 104px);
-            top: 104px;
+            height: calc(100% - 102px);
+            top: 102px;
         }
         .modal-body {
             padding: 2rem;
             display: flex;
-            align-items: flex-end;
+            align-items: center;
             .ccpa-icon {
                 width: 2.0625rem;
                 height: 1rem;