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'
import { useTreeDataStore } from '@/stores/tree-data'
import { useSearchDataStore } from '@/stores/searched-data';
import { useFileInfoStore } from '@/stores/file-info-data';
const { currentPath } = storeToRefs(useTreeDataStore())
const { isFilePreview } = storeToRefs(useFileInfoStore())
const { isSearch } = storeToRefs(useSearchDataStore())
const { getFolder } = useTreeDataStore()
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-pr-sm">
        <q-img
          class="pointer"
          src="@/assets/logo-edm.png"
          spinner-color="white"
          style="height: 45px; max-width: 45px"
          @click="
            () => {
              currentPath = ''
              getFolder(currentPath)
            }
          "
        />
        <div
          class="column q-px-md pointer"
          id="app-toolbar-title"
          @click="
            () => {
              currentPath = ''
              getFolder(currentPath)
              isSearch = false
              isFilePreview = false
            }
          "
        >
          <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>
      <q-page>
        <router-view :key="$route.fullPath" />
      </q-page>
    </q-page-container>
    <full-loader :visibility="loader" />
  </q-layout>
</template>

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

.pointer {
  cursor: pointer;
}
</style>