|
|
@@ -1,22 +1,22 @@
|
|
|
<template>
|
|
|
- <q-layout class="relative" view="hHh lpR fFf">
|
|
|
- <LeftMenuLayout v-if="!$q.screen.lt.sm" />
|
|
|
- <LeftMenuLayoutMobile v-else v-model="leftDrawerOpen" />
|
|
|
+ <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-transparent column justify-end"
|
|
|
+ class="bg-surface column justify-end"
|
|
|
:style="{
|
|
|
height: `calc(50px + env(safe-area-inset-top))`,
|
|
|
}"
|
|
|
>
|
|
|
- <q-toolbar
|
|
|
+ <!-- <q-toolbar
|
|
|
class="flex justify-between bg-primary"
|
|
|
style="border-radius: 0 0 6px 6px !important"
|
|
|
- >
|
|
|
- <q-btn dense flat @click="toggleLeftDrawer">
|
|
|
+ > -->
|
|
|
+ <!-- <q-btn dense flat @click="toggleLeftDrawer">
|
|
|
<q-icon name="menu" :color="$q.dark.isActive ? 'white' : 'black'" />
|
|
|
- </q-btn>
|
|
|
- <q-btn dense flat>
|
|
|
+ </q-btn> -->
|
|
|
+ <!-- <q-btn dense flat>
|
|
|
<img
|
|
|
:src="someAvatar()"
|
|
|
alt="avatar"
|
|
|
@@ -59,77 +59,138 @@
|
|
|
</q-item>
|
|
|
</q-list>
|
|
|
</q-menu>
|
|
|
- </q-btn>
|
|
|
- </q-toolbar>
|
|
|
+ </q-btn> -->
|
|
|
+ <!-- </q-toolbar> -->
|
|
|
</q-header>
|
|
|
<q-page-container>
|
|
|
- <q-page>
|
|
|
+ <q-page class="bg-surface">
|
|
|
<q-scroll-area
|
|
|
ref="scrollAreaRef"
|
|
|
- :style="
|
|
|
- $q.screen.lt.sm
|
|
|
- ? 'height: calc(100dvh - 68px - env(safe-area-inset-top)) !important;'
|
|
|
- : 'height: calc(100dvh - env(safe-area-inset-top)) !important;'
|
|
|
- "
|
|
|
+ :style="scrollAreaStyle"
|
|
|
>
|
|
|
<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;' : ''"
|
|
|
+ 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 { ref, useTemplateRef, watch } from "vue";
|
|
|
+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";
|
|
|
+// 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 { logout } = useAuth();
|
|
|
+const $q = useQuasar();
|
|
|
const route = useRoute();
|
|
|
-const leftDrawerOpen = ref(false);
|
|
|
+// const leftDrawerOpen = ref(false);
|
|
|
const scrollAreaRef = useTemplateRef("scrollAreaRef");
|
|
|
-const router = useRouter();
|
|
|
+// const router = useRouter();
|
|
|
+
|
|
|
+const MOBILE_HEADER_HEIGHT = 68;
|
|
|
+const MOBILE_BOTTOM_NAV_HEIGHT = 102;
|
|
|
|
|
|
let oldValue = route.path;
|
|
|
|
|
|
-const someAvatar = () => {
|
|
|
- let random = Math.floor(Math.random() * 5) + 1;
|
|
|
- return "https://cdn.quasar.dev/img/avatar" + random + ".jpg";
|
|
|
-};
|
|
|
+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 logoutFn = async () => {
|
|
|
- await logout();
|
|
|
- router.push({ name: "LoginPage" });
|
|
|
-};
|
|
|
+// const someAvatar = () => {
|
|
|
+// let random = Math.floor(Math.random() * 5) + 1;
|
|
|
+// return "https://cdn.quasar.dev/img/avatar" + random + ".jpg";
|
|
|
+// };
|
|
|
|
|
|
-const toggleLeftDrawer = () => {
|
|
|
- leftDrawerOpen.value = !leftDrawerOpen.value;
|
|
|
-};
|
|
|
+// const logoutFn = async () => {
|
|
|
+// await logout();
|
|
|
+// router.push({ name: "LoginPage" });
|
|
|
+// };
|
|
|
|
|
|
-watch(route, (value) => {
|
|
|
- if (oldValue.path != value.path) {
|
|
|
- scrollAreaRef.value.setScrollPosition("vertical", 0, 0);
|
|
|
- scrollAreaRef.value.setScrollPosition("horizontal", 0, 0);
|
|
|
+// 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;
|
|
|
}
|
|
|
- oldValue = value.path;
|
|
|
-});
|
|
|
+);
|
|
|
</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;
|
|
|
@@ -149,4 +210,49 @@ watch(route, (value) => {
|
|
|
.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>
|
