<script setup lang="ts">
const loading = ref<HTMLDivElement | null>(null)
const {$mitt} = useNuxtApp()

$mitt.on('startLoading', on => {
  if (on) {
    loading.value?.classList.remove('stop')
    removeMobileTopColor()
  } else {
    loading.value?.classList.add('stop')
    setMobileTopColor()
  }
})
</script>

<template>
  <div ref="loading" class="loading"></div>
  <div class="relative flex min-h-screen flex-col overflow-hidden bg-blue-50">
    <nav-bar/>
    <nuxt-page/>
    <footer-main/>
    <alert-notification/>
  </div>
</template>