231 lines
7.1 KiB
Vue
231 lines
7.1 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)">
|
|
<div class="bar1"></div>
|
|
<div class="bar2"></div>
|
|
<div class="bar3"></div>
|
|
</button>
|
|
</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 }">
|
|
<div class="menu-modal-container">
|
|
<button
|
|
class="menu-button"
|
|
type="button"
|
|
:class="[isActive ? 'active' : '']"
|
|
@click="toggleModal"
|
|
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>
|
|
</div>
|
|
<div class="modal-body d-flex flex-column">
|
|
<textLink
|
|
linkType="navigation"
|
|
text="Terms of use"
|
|
href="//www.safelite.com/terms-of-use"
|
|
target="_blank" />
|
|
<textLink
|
|
linkType="navigation"
|
|
text="Your privacy choices"
|
|
href="//www.safelite.com/privacy-center"
|
|
target="_blank">
|
|
<template v-slot:after-text>
|
|
<img
|
|
class="ccpa-icon"
|
|
src="~@/assets/img/icons/ccpa-icon.svg"
|
|
alt="Your privacy choices" />
|
|
</template>
|
|
</textLink>
|
|
<textLink
|
|
linkType="navigation"
|
|
text="Warranty"
|
|
href="//www.safelite.com/national-lifetime-warranty"
|
|
target="_blank" />
|
|
<textLink
|
|
linkType="navigation"
|
|
text="Notice at collection"
|
|
href="https://www.safelite.com/ccpa-privacy-policy"
|
|
target="_blank" />
|
|
</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";
|
|
import { Modal } from "bootstrap";
|
|
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;
|
|
this.scrollToPageTop();
|
|
},
|
|
hide() {
|
|
var self = this;
|
|
self.isActive = false;
|
|
},
|
|
},
|
|
components: {
|
|
textLink,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.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: 1050;
|
|
.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 {
|
|
&.menu-modal {
|
|
max-width: 576px;
|
|
left: auto;
|
|
height: calc(100% - 72px);
|
|
top: 72px;
|
|
border-top: 1px solid $gray-300;
|
|
overflow-x: visible;
|
|
overflow-y: visible;
|
|
.modal-body {
|
|
padding: 2rem;
|
|
.ccpa-icon {
|
|
width: 2.0625rem;
|
|
height: 1rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
}
|
|
.modal-fullscreen {
|
|
width: 100vw;
|
|
max-width: 576px;
|
|
}
|
|
.navigation-link {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.modal-footer {
|
|
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>
|