sfp_front_vue_diarista_prestador/src/layouts/MainLayout.vue

<template>
  <q-layout class="main-layout relative" view="hHh lpR fFf">
    <!-- <LeftMenuLayout v-if="!$q.screen.lt.sm" />
    <LeftMenuLayoutMobile v-else v-model="leftDrawerOpen" /> -->
    <q-header
      v-if="$q.screen.lt.sm"
      class="bg-surface column justify-end"
      :style="{
        height: `calc(50px + env(safe-area-inset-top))`,
      }"
    >
      <!-- <q-toolbar
        class="flex justify-between bg-primary"
        style="border-radius: 0 0 6px 6px !important"
      > -->
        <!-- <q-btn dense flat @click="toggleLeftDrawer">
          <q-icon name="menu" :color="$q.dark.isActive ? 'white' : 'black'" />
        </q-btn> -->
        <!-- <q-btn dense flat>
          <img
            :src="someAvatar()"
            alt="avatar"
            style="width: 20px; height: 20px; border-radius: 50%"
          />
          <q-menu anchor="center right" self="top start">
            <q-list class="column no-wrap overflow-hidden">
              <q-item
                v-ripple
                v-close-popup
                clickable
                :to="{ name: 'ProfilePage' }"
                exact
                exact-active-class="menu-selected"
              >
                <div class="flex">
                  <q-item-section avatar>
                    <q-icon
                      name="account_circle"
                      color="primary"
                      style="font-size: 18px"
                    />
                  </q-item-section>
                  <q-item-section>{{
                    $t("user.profile.singular")
                  }}</q-item-section>
                </div>
              </q-item>
              <q-item v-ripple clickable @click="logoutFn">
                <div class="flex">
                  <q-item-section avatar>
                    <q-icon
                      name="logout"
                      color="negative"
                      style="font-size: 18px"
                    />
                  </q-item-section>
                  <q-item-section>{{ $t("auth.logout") }}</q-item-section>
                </div>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn> -->
      <!-- </q-toolbar> -->
    </q-header>
    <q-page-container>
      <q-page class="bg-surface">
        <q-scroll-area
          ref="scrollAreaRef"
          :style="scrollAreaStyle"
        >
          <router-view v-slot="{ Component }">
            <Transition mode="out-in">
              <component
                :is="Component"
                class="main-layout__view"
                :class="{ 'main-layout__view--mobile': $q.screen.lt.sm }"
              />
            </Transition>
          </router-view>
        </q-scroll-area>
      </q-page>
    </q-page-container>
    <q-footer v-if="$q.screen.lt.sm" class="provider-bottom-nav bg-white">
      <nav class="provider-bottom-nav__inner">
        <router-link
          v-for="item in navItems"
          :key="item.name"
          :to="{ name: item.name }"
          class="provider-bottom-nav__item"
          :class="{ 'provider-bottom-nav__item--active': isNavItemActive(item) }"
        >
          <q-icon :name="item.icon" class="provider-bottom-nav__icon" />
          <span class="provider-bottom-nav__label">{{ item.label }}</span>
        </router-link>
      </nav>
    </q-footer>
  </q-layout>
</template>

<script setup>
import { computed, useTemplateRef, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
// import { useAuth } from "src/composables/useAuth";
// import { useRouter } from "vue-router";
// import LeftMenuLayout from "src/components/layout/LeftMenuLayout.vue";
// import LeftMenuLayoutMobile from "src/components/layout/LeftMenuLayoutMobile.vue";

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

// const { logout } = useAuth();
const $q = useQuasar();
const route = useRoute();
// const leftDrawerOpen = ref(false);
const scrollAreaRef = useTemplateRef("scrollAreaRef");
// const router = useRouter();

const MOBILE_HEADER_HEIGHT = 68;
const MOBILE_BOTTOM_NAV_HEIGHT = 102;

let oldValue = route.path;

const navItems = [
  {
    name: "DashboardPage",
    label: "Início",
    icon: "mdi-home-outline",
  },
  {
    name: "SearchPage",
    label: "Busca",
    icon: "mdi-magnify",
  },
  {
    name: "AgendaPage",
    label: "Agenda",
    icon: "mdi-calendar-blank-outline",
  },
  {
    name: "ProfilePage",
    label: "Perfil",
    icon: "mdi-account-circle-outline",
  },
];

const scrollAreaStyle = computed(() => {
  if ($q.screen.lt.sm) {
    return `height: calc(100dvh - ${MOBILE_HEADER_HEIGHT}px - env(safe-area-inset-top) - ${MOBILE_BOTTOM_NAV_HEIGHT}px - env(safe-area-inset-bottom)) !important;`;
  }

  return "height: calc(100dvh - env(safe-area-inset-top)) !important;";
});

const isNavItemActive = (item) => route.name === item.name;

// const someAvatar = () => {
//   let random = Math.floor(Math.random() * 5) + 1;
//   return "https://cdn.quasar.dev/img/avatar" + random + ".jpg";
// };

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

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

watch(
  () => route.path,
  (value) => {
    if (oldValue !== value) {
      scrollAreaRef.value?.setScrollPosition("vertical", 0, 0);
      scrollAreaRef.value?.setScrollPosition("horizontal", 0, 0);
    }
    oldValue = value;
  }
);
</script>
<style scoped>
.main-layout__view {
  padding: 20px !important;
  padding-right: 10px !important;
}

.main-layout__view--mobile {
  padding-left: 10px !important;
  padding-bottom: 18px !important;
}

.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;
}

.provider-bottom-nav {
  background: #ffffff;
  box-shadow: 0 -12px 30px rgba(38, 27, 52, 0.1);
}

.provider-bottom-nav__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  min-height: 56px;
  padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
}

.provider-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 56px;
  color: #a1a1a1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.provider-bottom-nav__item--active {
  color: #ff00ea;
}

.provider-bottom-nav__icon {
  font-size: 30px;
  line-height: 1;
}

.provider-bottom-nav__label {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.provider-bottom-nav__item--active .provider-bottom-nav__label {
  font-weight: 700;
}
</style>