sfp_front_vue_diarista_cliente/src/layouts/MainLayout.vue

<template>
  <q-layout class="main-layout relative" view="hHh lpR fFf">
    <q-header
      v-if="$q.screen.lt.sm"
      class="bg-surface column justify-end"
      :style="{
        height: `calc(50px + env(safe-area-inset-top))`,
      }"
    >

    </q-header>

    <q-page-container>
      <q-page class="bg-surface main-layout-page" style="overflow: hidden;">
        <q-scroll-area
          ref="scrollAreaRef"
          class="main-layout-scroll-area"
          :content-active-style="{ width: '100%', maxWidth: '100%', overflowX: 'hidden', boxSizing: 'border-box' }"
          :content-style="{ width: '100%', maxWidth: '100%', overflowX: 'hidden', boxSizing: 'border-box' }"
          :style="scrollAreaHeight"
        >
          <router-view v-slot="{ Component }">
            <Transition mode="out-in">
              <component
                :is="Component"
                :class="{ 'main-layout-view--mobile': $q.screen.lt.sm }"
                class="main-layout-view"
              />
            </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--active': isNavItemActive(item) }"
          class="provider-bottom-nav-item"
        >
          <q-icon :name="item.icon" class="provider-bottom-nav-icon" />

          <span class="provider-bottom-nav-label font12">
            {{ item.label }}
          </span>
        </router-link>
      </nav>
    </q-footer>
  </q-layout>
</template>

<script setup>
import { computed, useTemplateRef, watch } from "vue";
import { useI18n } from "vue-i18n";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";

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

const $q    = useQuasar();
const route = useRoute();

const scrollAreaRef = useTemplateRef("scrollAreaRef");

const { t } = useI18n();

let oldValue = route.path;

const navItems = computed(() => [
  { name: "DashboardPage",     label: t('nav.home'),    icon: "mdi-home-outline" },
  { name: "SearchPage",        label: t('nav.search'),  icon: "mdi-magnify" },
  { name: "CalendarPage",      label: t('nav.agenda'),  icon: "mdi-calendar-blank-outline" },
  { name:  "ScheduleCartPage", label: t('nav.cart'),    icon: "mdi-cart-outline" },
  { name:  "ProfilePage",      label: t('nav.profile'), icon: "mdi-account-circle-outline" },
]);

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

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

  return 'height: 100dvh !important;';
});

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 {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.main-layout-page {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.main-layout-scroll-area {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.main-layout-view {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 !important;
  box-sizing: border-box;
  overflow-x: hidden;
}

.main-layout-view--mobile {
  padding: 0 !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(5, minmax(0, 1fr));
  align-items: end;
  height: 60px;
  padding: 0px 0px calc(12px + env(safe-area-inset-bottom));
}

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

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

.provider-bottom-nav-icon {
  font-size: 24px;
  line-height: 1;
}

.provider-bottom-nav-label {
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.provider-bottom-nav-item--active .provider-bottom-nav-label {
  font-weight: 700;
}
</style>