<script lang="ts" setup>
import {onMounted} from "vue";
import emitter from "@/utils/mitt.ts";
import NavBar from "@/components/nav/NavBar.vue";
import {removeMobileTopColor, setMobileTopColor} from "@/utils/function.ts";
import MainFooter from "@/components/footer/MainFooter.vue";

const loadingElement = document.getElementById("loading") as HTMLDivElement;

onMounted(() => {
  emitter.on('startLoading', on => {
        if (on) {
          loadingElement.classList.remove('stop')
          removeMobileTopColor()
        } else {
          loadingElement.classList.add('stop')
          setMobileTopColor()
        }
      }
  )
})
</script>

<template>
  <div class="relative flex min-h-screen flex-col overflow-hidden bg-blue-50">
    <nav-bar/>
    <router-view/>
    <main-footer/>
  </div>
</template>

<style scoped>

</style>
