sfp_vue_franchisee_ginastica_cerebro/src/layouts/MainLayout.vue

<template>
  <q-layout view="hHh LpR fff">
    <q-header>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />
      </q-toolbar>
    </q-header>

    <LeftMenuLayout v-model="leftDrawerOpen" />

    <q-page-container>
      <router-view />
    </q-page-container>

    <q-footer class="bg-header text-black">
      <q-toolbar>
        <q-toolbar-title>
          <div class="flex justify-between">
            <div class="flex width-botoes cursor-pointer" @click="() => {}">
              <span class="text-subtitle1 text-black q-my-auto flex q-pl-sm">{{
                version
              }}</span>
            </div>
            <div class="flex">
              <img :src="logo" alt="logo" class="q-my-auto q-ml-xl" />
              <div class="flex q-ml-sm">
                <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
                <span class="q-my-auto"> ® </span>
                <span class="text-caption q-my-auto q-pb-xs q-pl-xs">
                  {{ year }}
                </span>
              </div>
            </div>
            <div class="flex justify-end q-my-auto width-botoes"></div>
          </div>
        </q-toolbar-title>
      </q-toolbar>
    </q-footer>
  </q-layout>
</template>

<script setup>
import { ref, computed } from "vue";
import { version } from "../../package.json";
import { format } from "date-fns";
import { useQuasar } from "quasar";
import darkLogo from "/src/assets/softpar_logo.png";
import lightLogo from "/src/assets/logo_softpar_azul.png";

const $q = useQuasar();

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

const year = ref(format(new Date(), "yyyy"));
const leftDrawerOpen = ref(false);

const logo = computed(() => {
  return $q.dark.isActive ? darkLogo : lightLogo;
});

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}
</script>