sfp_vue_franchisee_ginastica_cerebro/src/layouts/MainLayout.vue

<template>
  <q-layout class="relative" view="hHh lpR fFf">
    <LeftMenuLayout v-model="leftDrawerOpen" />

    <q-page-container>
      <q-page
      >
        <q-scroll-area
          ref="scrollAreaRef"
          style="
            padding-top: 20px !important;
            margin-left: 20px !important;
            margin-right: 10px !important;
            height: calc(100dvh - 50px - env(safe-area-inset-top)) !important;
          "
        >
          <router-view v-slot="{ Component }">
            <Transition mode="out-in">
              <component :is="Component" />
            </Transition>
          </router-view>
        </q-scroll-area>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref, useTemplateRef, watch } from "vue";
import { useRoute } from "vue-router";
import LeftMenuLayout from "src/components/geral/LeftMenuLayout.vue";

defineOptions({
  name: "MainLayout",
});

const leftDrawerOpen = ref(true);
const scrollAreaRef = useTemplateRef("scrollAreaRef");
const route = useRoute();

let oldValue = route.path;
watch(route, (value) => {
  if (oldValue.path != value.path) {
    scrollAreaRef.value.setScrollPosition("vertical", 0, 0);
    scrollAreaRef.value.setScrollPosition("horizontal", 0, 0);
  }
  oldValue = value.path;
});
</script>
<style scoped>
.v-enter-active {
  opacity: 1;
  transition: all 0.15s ease-in;
}

.v-leave-active {
  opacity: 1;
  transition: all 0.15s ease-out;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transition: all 0.15s ease-in;
}

.v-leave-to {
  transition: all 0.15s ease-out;
}
</style>