<template>
  <div>
    <!-- Show the loading page -->
    <client-only placeholder-tag="client-only-placeholder" placeholder=" " />

    <v-app>
      <LayoutLoadingScreen />

      <LayoutHeader />

      <LayoutMainMenu />

      <v-main class="main">

        <LayoutSubheader />

        <LayoutAlertBar class="mt-1" />

        <!-- Page will be rendered here-->
        <slot />
      </v-main>

      <LazyLayoutAlertContainer />

    </v-app>
  </div>
</template>

<script setup lang="ts">
  import {useMenu} from "~/composables/layout/useMenu";

  if(process.server){
    const { buildAllMenu } = useMenu()
    buildAllMenu()
  }
</script>

<style scoped lang="scss">
  body {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  client-only-placeholder {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 9999;
    background-color: #2c3a48;  // Les variables vuetify ne semblent pas fonctionner client-side, à revérifier
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,[encoded data, 6188 characters]");
  }
</style>
