Select Git revision
-
Andrej Ramašeuski authoredAndrej Ramašeuski authored
FooterCollapsible.vue 1.28 KiB
<template>
<div :class="[wrapperclass, 'footer-collapsible']">
<span class="text-xl uppercase text-white footer-collapsible__toggle" :class="[labelclass, show ? 'footer-collapsible__toggle--open' : '']" @click="handleClick">{{ label }}</span>
<div v-show="show || isLgScreenSize" :class="[slotwrapperclass]">
<slot>
</slot>
</div>
</div>
</template>
<script>
import { isLgScreenSize } from "../../utils";
export default {
data() {
return {
isLgScreenSize: isLgScreenSize(),
show: false,
resizeHandler: () => {
this.$data.isLgScreenSize = isLgScreenSize();
},
};
},
props: {
href: {
type: String,
},
label: {
type: String,
},
labelclass: {
type: String,
},
wrapperclass: {
type: String,
default: "",
},
slotwrapperclass: {
type: String,
default: "",
}
},
methods: {
handleClick() {
if (this.$props.href) {
window.location = this.$props.href;
}
this.$data.show = !this.$data.show;
}
},
mounted() {
this.$nextTick(() => {
window.addEventListener("resize", this.$data.resizeHandler);
});
},
beforeDestroy() {
window.removeEventListener("resize", this.$data.resizeHandler);
}
}
</script>