<template>
  <q-layout
    view="lHr lpR lFr"
    fit
    class="fit no-scroll bg-transparent"
    >
    <q-drawer
      v-if="existDrawer"
      show-if-above
      side="left"
      class="drawer no-scroll"
      :width="drawerWidth"
      :breakpoint="bodyWidth"
    />
    <q-drawer
      v-if="existDrawer"
      show-if-above
      side="right"
      class="drawer no-scroll"
      :width="drawerWidth"
      :breakpoint="bodyWidth"
    />

    <q-page-container
      class="q-pa-none q-ma-none no-scroll bg-transparent page-width"
      >
      <router-view />
    </q-page-container>
    <meshBackground/>
    <q-resize-observer @resize="onResize"></q-resize-observer>
  </q-layout>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import meshBackground from 'components/meshBackground.vue'
  
  const existDrawer = ref<boolean>(true)
  function getCSSVar (varName: string) {
    const root = document.documentElement
    return getComputedStyle(root).getPropertyValue(varName).trim() 
  }

  const bodyWidth = parseInt(getCSSVar('--body-width'))
  const drawerWidth = ref<number>(300)
  function onResize () {
    const clientWidth = document.documentElement.clientWidth;
    drawerWidth.value = (clientWidth - bodyWidth)/2
    existDrawer.value = clientWidth >  bodyWidth
  }

</script>

<style>

  aside {
    background-color: transparent !important;
  }

</style>
