<template>

  <section>

            <MDBBtn

              @click="cookiesShowMore = !cookiesShowMore"

              outline="primary"

              >Show</MDBBtn

            >

            <MDBCollapse v-model="cookiesShowMore">

              <div

                id="collapsed-content"

                style="

                  overflow-y: auto;

                  height: 100px;

                  width: 100%;

                  text-align: center;

                "

              >

                <a

                  href="#scrollTo"

                  v-mdb-smooth-scroll="{ container: '#collapsed-content' }"

                >

                  USE Smooth scroll

                </a>

                <div

                  style="height: 100px; text-align: center"

                  id="scrollTo"

                  class="d-flex flex-column align-items-center mt-5"

                >

                  <MDBSwitch v-model="switchAnalytic" />

                  <p>switch value:</p>

                  <p>{{ switchAnalytic }}</p>

                </div>

              </div>

            </MDBCollapse>

          </section>

</template>

<style>

#app {

  font-family: Roboto, Helvetica, Arial, sans-serif;

}

</style>

<script>

import { MDBBtn, MDBCollapse, MDBSwitch, mdbSmoothScroll  } from "mdb-vue-ui-kit";

import { ref, toRefs } from "vue"

​

​

export default {

  name: "App",

  components: {

    MDBBtn, MDBCollapse, MDBSwitch

  },

  directives: {

    mdbSmoothScroll 

  },

  setup() {

    const cookiesShowMore = ref(false)

    const switchAnalytic = ref(true)

    return {

      cookiesShowMore,

      switchAnalytic

    }

  }

};

</script>