hrms-recruit/src/views/MainLayout.vue

<script setup lang="ts">
import { useQuasar } from 'quasar'
import { ref } from 'vue'
// import keycloak from '@/plugins/keycloak'
import { useRoute } from 'vue-router'
import { menuList, options, notiList } from '../interface/main/index'
import keycloak from '@/plugins/keycloak'

const route = useRoute()

const $q = useQuasar()
const miniState = ref<boolean>(false)
const active = ref<number>(0)
const drawerL = ref<boolean>(false)
const fullname = ref<string>('')
const notiTrigger = ref<boolean>(false)

const toggleBtnLeft = () => {
  if (window.innerWidth < 1024) {
    drawerL.value = !drawerL.value
  } else {
    miniState.value = !miniState.value
  }
}

/**
 * ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
 * ปกติ path จะ active เมื่อ path นั้นมีค่า ตรงตัวมันเช่น /main
 * แต่จะไม่ active เมื่อ path นั้น มี child path  /main/อื่นๆ
 * @param path string
 */
const activeMenu = (path: string) => {
  if (path == 'dashboard' && route.fullPath == '/') return true
  const bool = route.fullPath.includes(path)
  return bool
}

/**
 * logout keycloak
 * confirm ก่อนออกจากระบบ
 */
const doLogout = () => {
  $q.dialog({
    title: 'ยืนยันการออกจากระบบ',
    message: `ต้องการออกจากระบบใช้หรือไม่?`,
    cancel: 'ยกเลิก',
    ok: 'ยืนยัน',
    persistent: true
  }).onOk(() => {
    keycloak.logout()
  })
}

/**
 * ดิงชื่อผู้ใช้งานจาก keycloak
 */
// if (keycloak.tokenParsed != null) {
//   fullname.value = keycloak.tokenParsed.name
// }
</script>

<!-- โครงเว็บ -->
<template>
  <!-- แบบเก่า design แรก -->
  <!-- <q-layout view="lHh Lpr lff"> -->
  <!-- ปรับให้กับหน้า รายละเอียดรายการสอบทั้งหมด  -->
  <q-layout view="lHh LpR lff" class="bgColor text-dark">
    <!-- header -->
    <q-header flat class="bg-white text-white row justify-center header" height-hint="7">
			<q-toolbar style="padding:0% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
				<q-toolbar-title  shrink class="row items-center no-wrap">
					<q-btn flat class="bg-white" dense round>
						<q-avatar size="35px">
							<img src="../assets/logo.png" />
						</q-avatar>
					</q-btn>
					<div class="row q-ml-md text-dark" v-if="$q.screen.gt.xs">
						<div class="col-12 textline1">
							ระบบทรัพยากรบุคคล
						</div>
						<div class="text-caption textline2">
							กรุงเทพมหานคร
						</div>
					</div>
				</q-toolbar-title>
        <q-space/>
        <q-btn v-if="$q.screen.gt.xs"  class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" size="12px"  label="ออกจากระบบ" flat  v-close-popup @click="doLogout" />
        <q-btn v-else  class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" flat  v-close-popup @click="doLogout" />
			</q-toolbar>
		</q-header>
    <!-- end header -->
    <q-page-container class="row justify-center">
      <q-page style="padding:1.5% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
        <router-view :key="$route.fullPath" />
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<style>
.bgColor {
	/* background-image: url("../assets/bg.png");
	background-size: cover;
	background-size: 100%; */
  background: #F6F9FA;
}

.tabNative {
  color: grey;
  padding-left: 8%;
  border-radius: 100px 0px 0px 100px;
}

.tabActive {
  padding-left: 8%;
  background: #e4f2ff;
  border-radius: 100px 0px 0px 100px;
}

.q-card {
  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
}
.q-card--bordered {
  border: 1px solid #92b4c847;
  box-shadow: none !important;
}
.q-stepper{
  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
}
.q-menu {
  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
}

.toptitle {
  font-size: 1.2rem;
  font-weight: bold;
}

.q-field--outlined .q-field__control {
  border-radius: 5px;
}

.q-field--outlined .q-field__control:before,.q-field .q-field__control:before{
  border-color: #c8d3db;
}
.q-field--outlined .q-icon {
  color: #7474747f;
}
/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

.header{
  border-bottom: 1px solid #92b4c847;
  height: 50px;
}
.textline1{
  font-size: 0.90rem;
  line-height:1.2rem !important;
  font-weight: 500;
}
.textline2{
  line-height:1rem !important;
  font-weight: 400;
  color: #96a9ad;
}
</style>