<template>
  <v-app>
    <NavBar class="on-top" />
    <v-main class="tw-bg-white xl:tw-bg-neutrals-100 tw-p-[30px]">
      <Nuxt />
    </v-main>
    <Footer v-if="$vuetify.breakpoint.smAndUp" />
    <customNotifications></customNotifications>
  </v-app>
</template>

<script>
import NavBar from "../components/NavBar.vue";
import Footer from "../components/Footer.vue";
import customNotifications from "@/components/newComponent/notifications/notifications.vue";
export default {
  name: "profileLayout",
  layout: "empty",
  components: {
    NavBar,
    Footer,
    customNotifications
  },
  data() {
    return {};
  },
  computed: {
    drawerAcitve() {
      return this.$store.getters.getDrawerStatus;
    },
    searchDialogActive() {
      return this.$store.getters.getSearchDialogStatus;
    },
  },
  watch: {
    drawerAcitve: {
      handler: function () {
        this.bsd(this.drawerAcitve);
      },
    },
    searchDialogActive: {
      handler: function () {
        this.bsd(this.searchDialogActive);
      },
    },
  },
  methods: {
    bsd(status) {
      var body = document.querySelector("body");
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var scrollLeft =
        window.pageXOffset || document.documentElement.scrollLeft;
      window.onscroll = function () { };
      if (status === true) {
        if (window.onscroll !== null) {
          window.onscroll = function () {
            window.scrollTo(scrollLeft, scrollTop);
          };
        }
      } else {
        window.onscroll = function () { };
      }
    },
  },
};
</script>

<style lang="scss">
.on-top {
  z-index: 203;
}
</style>