322 lines
10 KiB
Vue
322 lines
10 KiB
Vue
<template>
|
|
<div class="menu-modal-container">
|
|
<button
|
|
class="menu-button"
|
|
type="button"
|
|
:class="[isActive ? 'active' : '']"
|
|
@click="toggleModal"
|
|
aria-label="Hamburger Menu (modal window)">
|
|
<span v-if="isActive">Close</span>
|
|
<span v-else>Step {{ currentStepNumber }} of 4</span>
|
|
<div class="bars ms-2">
|
|
<div class="bar1"></div>
|
|
<div class="bar2"></div>
|
|
<div class="bar3"></div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<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 }"
|
|
@click.self="closeModal">
|
|
<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>
|
|
</div>
|
|
<div class="modal-body d-flex flex-column">
|
|
<div class="step-grid">
|
|
<div class="bar-container">
|
|
<progress-bar class="bar-dots" :page="$route.name" :vertical="true" />
|
|
<span class="dot1"></span>
|
|
<span class="dot2"></span>
|
|
<span class="dot3"></span>
|
|
<span class="dot4"></span>
|
|
</div>
|
|
<div class="d-flex flex-column justify-content-between">
|
|
<div class="step-containers" v-for="step in steps" :key="step.number">
|
|
<span class="step-number">Step {{ step.number }} of 4</span>
|
|
<br />
|
|
<span
|
|
class="step-name"
|
|
:class="{ 'active-step': step.number === currentStepNumber }">
|
|
{{ step.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Modal } from "bootstrap";
|
|
import { getProgressBarStep } from "@/constants/progress-bar-mapper";
|
|
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
|
|
import baseMixin from "@/mixins/base-mixin.js";
|
|
|
|
export default {
|
|
name: "menuModal",
|
|
data() {
|
|
return {
|
|
isActive: false,
|
|
};
|
|
},
|
|
methods: {
|
|
toggleModal() {
|
|
if (this.isActive) {
|
|
this.closeModal();
|
|
} else {
|
|
this.openModal();
|
|
}
|
|
},
|
|
openModal() {
|
|
Modal.getOrCreateInstance(document.getElementById("footerModal")).show();
|
|
},
|
|
closeModal() {
|
|
Modal.getInstance(document.getElementById("footerModal")).hide();
|
|
},
|
|
show() {
|
|
this.isActive = true;
|
|
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
|
|
},
|
|
hide() {
|
|
var self = this;
|
|
self.isActive = false;
|
|
},
|
|
},
|
|
computed: {
|
|
currentStepNumber() {
|
|
return getProgressBarStep(this.$route.name);
|
|
},
|
|
steps() {
|
|
return [
|
|
{ number: 1, name: "Vehicle" },
|
|
{ number: 2, name: "Quote" },
|
|
{ number: 3, name: "Schedule" },
|
|
{ number: 4, name: "Review" },
|
|
];
|
|
},
|
|
},
|
|
components: {
|
|
progressBar,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.menu-modal-container {
|
|
button {
|
|
border: none;
|
|
color: $blue;
|
|
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
&.menu-button {
|
|
width: auto;
|
|
height: auto;
|
|
border-radius: 1.5rem;
|
|
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
|
|
background-color: $white;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0.15rem 0.5rem; //Required to prevent 'squish' on iPhone
|
|
z-index: 1050;
|
|
@include media-breakpoint-up(md) {
|
|
padding: 0.25rem 1rem;
|
|
}
|
|
&.active .bar1 {
|
|
transform: rotate(-45deg) translate(-3px, 8px);
|
|
}
|
|
&.active .bar2 {
|
|
opacity: 0;
|
|
}
|
|
&.active .bar3 {
|
|
transform: rotate(45deg) translate(-3px, -8px);
|
|
}
|
|
.bars {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-direction: column;
|
|
scale: 0.75;
|
|
.bar1,
|
|
.bar2,
|
|
.bar3 {
|
|
width: 1.5rem;
|
|
height: 2px;
|
|
background-color: $blue;
|
|
margin: 1px 0;
|
|
transition: 0.25s;
|
|
}
|
|
}
|
|
.step-numbers {
|
|
font-size: 0.875rem;
|
|
margin-right: 0.5rem;
|
|
@include media-breakpoint-up(md) {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.modal {
|
|
&.menu-modal {
|
|
.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% - 102px);
|
|
top: 102px;
|
|
}
|
|
.modal-body {
|
|
padding: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
.ccpa-icon {
|
|
width: 2.0625rem;
|
|
height: 1rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
:deep(.navigation-link) {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.step-grid {
|
|
display: grid;
|
|
max-width: 140px;
|
|
grid-template-columns: 1fr 1fr;
|
|
.step-containers {
|
|
line-height: 1;
|
|
}
|
|
.bar-container {
|
|
width: 24px;
|
|
position: relative;
|
|
.dot1,
|
|
.dot2,
|
|
.dot3,
|
|
.dot4 {
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 22px;
|
|
background-color: $white;
|
|
border-radius: 50rem;
|
|
border: 1px solid $gray;
|
|
left: 1px;
|
|
}
|
|
.dot1 {
|
|
top: 1px;
|
|
}
|
|
.dot2 {
|
|
top: 114px;
|
|
}
|
|
.dot3 {
|
|
top: 227px;
|
|
}
|
|
.dot4 {
|
|
top: 332px;
|
|
}
|
|
}
|
|
.step-number {
|
|
font-size: 0.75rem;
|
|
}
|
|
.step-name {
|
|
font-size: 1.25rem;
|
|
}
|
|
.active-step {
|
|
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
.modal-fullscreen {
|
|
width: 100vw;
|
|
}
|
|
.modal-footer {
|
|
border-top: none;
|
|
padding: 2rem;
|
|
}
|
|
.menu-modal-container {
|
|
position: absolute;
|
|
padding: 1.47rem 0 1.47rem 1.47rem;
|
|
right: 0;
|
|
top: -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;
|
|
.bars {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-direction: column;
|
|
.bar1,
|
|
.bar2,
|
|
.bar3 {
|
|
width: 1.5rem;
|
|
height: 2px;
|
|
background-color: $blue;
|
|
margin: 1px 0;
|
|
transition: 0.25s;
|
|
}
|
|
&.active .bar1 {
|
|
transform: rotate(-45deg) translate(-3px, 8px);
|
|
}
|
|
&.active .bar2 {
|
|
opacity: 0;
|
|
}
|
|
&.active .bar3 {
|
|
transform: rotate(45deg) translate(-3px, -8px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//.modal-backdrop styles are in common-styles.scss
|
|
}
|
|
}
|
|
</style>
|