FooterCollapsible.vue

<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>