hrms-edm/Services/client/src/views/MainLayout.vue

<script setup lang="ts">
import { useLoader } from '@/stores/loader'
import { storeToRefs } from 'pinia'
import profile from '@/components/Profile.vue'

const loaderStore = useLoader()
const { loader } = storeToRefs(loaderStore)
</script>

<template>
  <q-layout view="hHh lpR fFf">
    <q-header class="bg-white text-black" bordered>
      <q-toolbar class="q-py-sm">
        <q-img
          src="@/assets/logo.png"
          spinner-color="white"
          style="height: 32px; max-width: 32px"
        />
        <div class="column q-px-md" id="app-toolbar-title">
          <span class="text-body1">ระบบทรัพยากรบุคคล</span>
          <span class="text-caption text-grey">
            จัดเก็บข้อมูลผลการประเมิน
          </span>
        </div>

        <q-space></q-space>
        <profile />
      </q-toolbar>
    </q-header>

    <q-page-container>
      <QPage>
        <router-view :key="$route.fullPath" />
      </QPage>
    </q-page-container>
    <full-loader :visibility="loader" />
  </q-layout>
</template>

<style scoped>
.q-layout {
  background: var(--q-secondary);
}
</style>