sfp_front_vue_serprati_digital/src/layouts/MainLayout.vue

<template>
  <UnreadNotificationsDialog
    v-if="store.isAssociado || store.isParceiro"
    v-model="showUnreadDialog"
  />

  <q-layout class="relative" view="hHh lpR fFf">
    <LeftMenuLayoutAdministrador v-if="!$q.screen.lt.sm && store.userTipo == 'administrador'" />
    <LeftMenuLayoutAssociado v-if="!$q.screen.lt.sm && store.userTipo == 'associado'" />
    <LeftMenuLayoutParceiro v-if="!$q.screen.lt.sm && store.userTipo == 'parceiro'" />
    <LeftMenuLayoutMobile v-if="$q.screen.lt.sm" v-model="leftDrawerOpen" />
    <q-header v-if="!$q.screen.lt.sm" elevated style="height: 52px">
      <AppHeader />
    </q-header>

    <q-header v-if="$q.screen.lt.sm" class="bg-transparent q-pa-sm">
      <q-toolbar
        class="flex justify-between bg-surface"
        style="border-radius: 6px !important"
      >
        <q-btn dense flat @click="toggleLeftDrawer">
          <q-icon
            name="menu"
            :color="$q.dark.isActive ? 'white' : 'black'"
            style="font-size: 20px"
          />
        </q-btn>
        <div>
          <q-btn dense flat class="q-mr-sm" @click="changeTheme">
            <q-icon
              :color="$q.dark.isActive ? 'white' : 'black'"
              :name="
                $q.dark.isActive ? 'mdi-weather-sunny' : 'mdi-weather-night'
              "
              style="font-size: 20px"
            />
          </q-btn>
          <q-btn dense flat @click="logoutFn">
            <q-icon name="logout" color="negative" style="font-size: 20px" />
          </q-btn>
        </div>
      </q-toolbar>
    </q-header>
    <q-page-container>
      <q-page class="bg-violet-light">
        <q-scroll-area
          ref="scrollAreaRef"
          :style="
            $q.screen.lt.sm
              ? 'height: calc(100dvh - 68px - env(safe-area-inset-top)) !important;'
              : 'height: calc(100dvh - 52px - env(safe-area-inset-top)) !important;'
          "
        >
          <router-view v-slot="{ Component }">
            <Transition mode="out-in">
              <component
                :is="Component"
                style="padding: 20px !important; padding-right: 10px !important"
                :style="$q.screen.lt.sm ? 'padding-left: 10px !important;' : ''"
              />
            </Transition>
          </router-view>
        </q-scroll-area>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref, useTemplateRef, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAuth } from "src/composables/useAuth";
import { useQuasar } from "quasar";
import { userStore } from "src/stores/user";
import LeftMenuLayoutAdministrador from "src/components/layout/LeftMenuLayoutAdministrador.vue";
import LeftMenuLayoutAssociado from "src/components/layout/LeftMenuLayoutAssociado.vue";
import LeftMenuLayoutParceiro from "src/components/layout/LeftMenuLayoutParceiro.vue";
import LeftMenuLayoutMobile from "src/components/layout/LeftMenuLayoutMobile.vue";
import AppHeader from "src/components/layout/AppHeader.vue";
import UnreadNotificationsDialog from "src/components/UnreadNotificationsDialog.vue";

const store = userStore();
const router = useRouter();
const { logout } = useAuth();
const route = useRoute();
const $q = useQuasar();

const leftDrawerOpen = ref(false);
const scrollAreaRef = useTemplateRef("scrollAreaRef");
const showUnreadDialog = ref(false);

onMounted(async () => {
  if (store.isAssociado || store.isParceiro) {
    await store.fetchUser();
    if (store.hasUnreadNotifications) {
      showUnreadDialog.value = true;
    }
  }
});

let oldValue = route.path;
// const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
//   ? "dark"
//   : "light";
const systemTheme = "light";

const logoutFn = async () => {
  await logout();
  router.push({ name: "LoginPage" });
};

const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};

const changeTheme = async () => {
  const theme = $q.cookies.get("theme") || systemTheme;
  if (theme == "dark") {
    $q.dark.set(false);
  } else {
    $q.dark.set(true);
  }
};

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>