122 lines
3.5 KiB
Vue
122 lines
3.5 KiB
Vue
<template>
|
|
<div class="menu-modal-container">
|
|
<button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal">
|
|
<div class="bar1"></div>
|
|
<div class="bar2"></div>
|
|
<div class="bar3"></div>
|
|
</button>
|
|
</div>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
|
|
<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">
|
|
<textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
|
|
<textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
|
|
<textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
|
|
</div>
|
|
<div class="modal-footer d-flex justify-content-start">
|
|
© {{new Date().getFullYear()}} Safelite Group
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import textLink from "@/ux-components/text-link/text-link";
|
|
export default {
|
|
name: 'menuModal',
|
|
data() {
|
|
return {
|
|
isActive: false,
|
|
currentFooterAndHeaderHeight: 0,
|
|
};
|
|
},
|
|
mounted() {
|
|
const myModalEl = document.getElementById('footerModal');
|
|
var self = this;
|
|
myModalEl.addEventListener('hide.bs.modal', function (event) {
|
|
self.isActive = false;
|
|
event.prevenDefault();
|
|
});
|
|
myModalEl.addEventListener('show.bs.modal', function (event) {
|
|
self.currentFooterAndHeaderHeight = self.getFooterInfoBoxHeight() + 72;
|
|
self.isActive = true;
|
|
console.log("scroll!!!");
|
|
document.querySelector('.page-container-grouped-styles').scrollTo({
|
|
top: 0, behavior: 'smooth'
|
|
});
|
|
})
|
|
},
|
|
components: {
|
|
textLink,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.menu-modal-container {
|
|
position: absolute;
|
|
padding: 1.47rem 1rem 1.47rem 1.47rem;
|
|
right: 0;
|
|
button {
|
|
border: none;
|
|
&.menu-button {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
|
|
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-400;
|
|
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 {
|
|
max-width: 576px;
|
|
left: auto;
|
|
height: calc(100% - 72px);
|
|
top: 72px;
|
|
border-top: 1px solid $gray-300;
|
|
.modal-body {
|
|
padding: 2rem;
|
|
}
|
|
.modal-fullscreen {
|
|
width: 100vw;
|
|
max-width: 576px;
|
|
}
|
|
.navigation-link {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.modal-footer {
|
|
border-top: none;
|
|
padding: 2rem;
|
|
}
|
|
//.modal-backdrop styles are in common-styles.scss
|
|
}
|
|
</style>
|