hrms-manual/src/views/MainLayout.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from "vue"
import keycloak from "@/plugins/keycloak"
import { useRoute, useRouter } from "vue-router"
import { useDataStore } from "@/stores/data"
import { storeToRefs } from "pinia"
import { scroll, useQuasar } from "quasar"
import { useCounterMixin } from "@/stores/mixin"

import http from "@/plugins/http"
import config from "@/app.config"

import type { ScrollType, notiType, optionType } from "../interface/request/main/main"
import {
	menuList,
	tabListLogin,
	tabListDatamain,
	tabStructuremain,
	tabRegistration,
	tabRecruit,
	tabList,
	// tabListPlacement,
} from "../interface/request/main/main"

const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll
const store = useDataStore()
const route = useRoute()
const router = useRouter()
const link = ref<string>("")
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { showLoader, hideLoader, dialogMessage, success, messageError, date2Thai } = mixin

const $q = useQuasar()
const { tabData, loader } = storeToRefs(store)
const { changeTab } = store
const miniState = ref<boolean>(false)
const drawerR = ref<boolean>(false)
const rightActive = ref<boolean>(false)
const resize = ref<number>(0)
const active = ref<number>(0)
const drawerL = ref<boolean>(false)
const fullname = ref<string>("")
const role = ref<string[]>([])
const notiTrigger = ref<boolean>(false)
const text = ref<string>("")

const listTab = ref<any>([])

const notiList = ref<notiType[]>([
	{
		id: "1",
		sender: "ท",
		body: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
		timereceive: new Date(),
	},
])
const options = ref<optionType[]>([
	{
		icon: "mdi-account-cog",
		label: "ผู้ดูแลระบบ",
		value: "op1",
		color: "primary",
	},
	{
		icon: "mdi-account-group",
		label: "เจ้าหน้าที่",
		value: "op2",
		color: "blue",
	},
	{
		icon: "mdi-account-circle",
		label: "บุคคล",
		value: "op3",
		color: "indigo",
	},
])

/**
 * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ
 */
const tabScroll = () => {
	return route.name == "registryDetail"
}
const tabLogin = async () => {
	let namePath = menuList[1].children.find((e: any) => e.path === route.path)
	if (namePath) {
		return true
	}
}

/**
 * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
 */
const toggleBtnRight = () => {
	drawerR.value = !drawerR.value
}

/**
 * toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
 * ปกติเป็นการย่อโดยใช้ Ministate
 */
const toggleBtnLeft = () => {
	if (window.innerWidth < 1024) {
		drawerL.value = !drawerL.value
	} else {
		miniState.value = !miniState.value
	}
}

/**
 * Event onScroll นำ ตำแหน่ง top ที่ scroll
 * ใช้ function updateScroll
 */
const onScroll = (scroll: ScrollType) => {
	const { position } = scroll
	if (route.name == "PlacementPersonalDetail") {
		updateScrollPlacement(position)
	} else {
		updateScroll(position)
	}
}

/**
 * updateScroll เป็น function active แทปด้านขวา
 */
const updateScroll = (position: number) => {
	// console.log(position);

	// เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
	if (position === void 0) {
		position = document.documentElement.scrollTop || document.body.scrollTop
	}

	let last
	/**
	 * วนหา id ของ div นั้น
	 */
	for (const i in listTab.value) {
		const section = listTab.value[i]
		const item = document.getElementById(section.tag)
		// console.log(section.childern);
		if (section.childern) {
			for (const x in section.childern) {
				const sectionchildern = section.childern[x]
				const itemchildern = document.getElementById(sectionchildern.tag)
				console.log(sectionchildern)

				if (itemchildern === null) {
					continue
				}

				if (itemchildern.offsetTop >= position + 155) {
					console.log(last)
					if (last === void 0) {
						last = sectionchildern.tag
					}
					break
				} else {
					last = sectionchildern.tag
				}
			}
		}

		/**
		 * วนหา id ของ div หน้านั้น
		 * เมื่อหาไม่เจอให้ไปต่อตัวต่อไป
		 * เมื่อเจอแล้ว ให้ ตำแหน่งบนสุดของ div นั้น มากกว่าหรือเท่ากับ  ตำแหน่ง top ที่ scroll บวกกับ แทปด้านบน 155
		 * ถ้า last เป็น undifind ให้ last เท่ากับ tag แล้ว หยุดลูป
		 * ถ้าไม่ใช้ undifind ให้ last เท่ากับ tag แล้ว ลูปหาต่อ กรณี div นั้นยาว
		 */
		if (item === null) {
			continue
		}

		if (item.offsetTop >= position + 155) {
			if (last === void 0) {
				last = section.tag
			}
			break
		} else {
			last = section.tag
		}
	}
	/**
	 * ถ้า last ไม่เท่ากับ undifind
	 * ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
	 * และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
	 */

	if (last !== void 0) {
		changeTab(last)
		const tocEl = document.getElementById("tab--" + last)
		if (tocEl) {
			tocEl.scrollIntoView({ block: "nearest" })
		}
	}
}

/**
 * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
 */
const activeBtn = () => {
	return route.name == "manual" && rightActive.value
}
/**
 * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
 * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
 * เริ่มเข้ามา state rightActive เป็น state ที่โชว์ ปุ่มขวา
 * ยังจับ boolean ผิด จึงต้อง set
 */
onMounted(async () => {
	myEventHandler(null, false)
	window.addEventListener("resize", (e: any) => {
		myEventHandler(e, true)
	})
	await setListTab()
})

const setListTab = () => {
	// console.log(route.name);

	if (route.name == "manual") {
		listTab.value = tabListLogin
	} else if (route.name == "datamain") {
		listTab.value = tabListDatamain
	} else if (route.name == "structuremain") {
		listTab.value = tabStructuremain
	} else if (route.name == "registmain") {
		listTab.value = tabRegistration
	} else if (route.name == "recruitmain") {
		listTab.value = tabRecruit
	}
	changeTab(listTab.value[0].tag)
	window.scrollTo(0, 0)
}
watch(route, () => {
	setListTab()
})

/**
 * เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
 */
onUnmounted(() => {
	window.removeEventListener("resize", (e: any) => {
		myEventHandler(e, true)
	})
})

/**
 * @param e event ของ resize
 * @param setSCroll เช็คว่ามาจาก event หรือป่าว
 * set state resize = ความกว้างหน้าเว็ป
 * เมื่อความกว้าง น้อยกว่า 1024( เท่ากับ น้อยกว่า 1023) ให้ rightActive เป็น true แต่ถ้า rightActive true อยู่แล้วไม่ต้อง set
 * เมื่อความกว้าง มากกว่าหรือเท่ากับ 1024 และเมื่อ rightActive เป็น true
 * และ drawerR เป็น true ให้ rightActive เป็น true ถ้า drawerR เป็น false  ให้ rightActive เป็น false
 * rightActive = true ; แสดงปุ่ม drawer ด้าน ขวา
 * rightActive = false; ไม่แสดงปุ่ม drawer ด้าน ขวา
 */
const myEventHandler = (e: any, setSCroll: boolean) => {
	if (setSCroll) {
		resize.value = e.target.innerWidth
	} else {
		resize.value = window.innerWidth
	}
	if (resize.value < 1024) {
		if (!rightActive.value) {
			rightActive.value = true
		}
	} else {
		if (rightActive.value) {
			if (drawerR.value) {
				rightActive.value = true
			} else {
				rightActive.value = false
			}
		}
	}
}

/**
 * ตรวจสอบ 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
	if (path == "registry" && route.fullPath == "/registry-employee") return false
	if (path == "registry" && route.fullPath.includes(`/registry-employee/edit`)) return false

	if (path == "registry" && route.fullPath == "/") return false
	// if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
	const bool = route.fullPath.includes(`/${path}`)

	return bool
}
/**
 * เป็นฟังก์ชันที่รันตลอด เพื่อให้ active ตรงตามเงื่อนไขให้เป็น true
 * @param tag string เป็นชื่อของ ตัวนั้นๆ
 */
const activeTab = (tag: string) => {
	return tabData.value == tag
}

/**
 * คลิกเพื่อให้ router หรือ scroll ไปยังตำแหน่งนั้นๆ
 * @param tag string เป็นชื่อของ ตัวนั้นๆ
 */
const tagClick = (tag: string) => {
	const hash = `#${tag}`
	const items = document.getElementById(tag)
	const offset = Math.max(0, items == null ? 0 : items.offsetTop - 84)
	//   router.replace({ hash });
	if (route.hash !== hash) {
		const check = activeBtn()
		if (check) {
			//   router.replace({ hash, position: { x: 0, y: 0 } });
			//   router.replace({ hash }).then(() => {
			//     setVerticalScrollPosition(window, offset, 300);
			//   });
			drawerR.value = !drawerR.value
			setVerticalScrollPosition(window, offset, 300)
		} else {
			setVerticalScrollPosition(window, offset, 300)
		}
	} else {
		setVerticalScrollPosition(window, offset, 300)
	}
}

//**** Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
const tabScrollPlacement = () => {
	return route.name == "PlacementPersonalDetail"
}

const updateScrollPlacement = (position: number) => {
	if (position === void 0) {
		position = document.documentElement.scrollTop || document.body.scrollTop
	}

	// let last;
	// for (const i in tabListPlacement) {
	//   const section = tabListPlacement[i];
	//   const item = document.getElementById(section.tag);

	//   if (item === null) {
	//     continue;
	//   }

	//   if (item.offsetTop >= position + 100) {
	//     if (last === void 0) {
	//       last = section.tag;
	//     }
	//     break;
	//   } else {
	//     last = section.tag;
	//   }
	// }

	// if (last !== void 0) {
	//   changeTab(last);
	//   const tocEl = document.getElementById("tab--" + last);
	//   if (tocEl) {
	//     tocEl.scrollIntoView({ block: "nearest" });
	//   }
	// }
}

const activeBtnPlacement = () => {
	return route.name == "PlacementPersonalDetail" && rightActive.value
}

// const activeTabPlacement = (tag: string) => {
//   return tabData.value == tag;
// };

// const tagClickPlacement = (tag: string) => {
//   const hash = `#${tag}`;
//   const items = document.getElementById(tag);
//   const offset = Math.max(0, items == null ? 0 : items.offsetTop + 50);
//   //   router.replace({ hash });
//   if (route.hash !== hash) {
//     const checkPlacement = activeBtnPlacement();
//     if (checkPlacement) {
//       drawerR.value = !drawerR.value;
//       setVerticalScrollPosition(window, offset, 300);
//     } else {
//       setVerticalScrollPosition(window, offset, 300);
//     }
//   } else {
//     setVerticalScrollPosition(window, offset, 300);
//   }
// };
//**** End Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\

/**
 * 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
	role.value = keycloak.tokenParsed.role
}
const clickTag = (val: string) => {
	console.log(val)
	router.push(val)
}
</script>

<!-- โครงเว็บ -->
<template>
	<!-- แบบเก่า design แรก -->
	<!-- <q-layout view="lHh Lpr lff"> -->
	<!-- ปรับให้กับหน้า รายละเอียดทะเบียนประวัติ  -->
	<q-layout view="lHh LpR lff" @scroll="onScroll">
		<!-- header -->
		<q-header flat class="bg-grey-2 text-dark" height-hint="7">
			<q-toolbar style="padding: 0 2%">
				<q-btn size="13px" class="bg-grey-3" flat dense round @click="toggleBtnLeft" aria-label="Menu">
					<q-icon :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'" size="20px" color="grey-7" />
				</q-btn>

				<q-space />

				<!-- Search -->
				<!-- <q-input  dense rounded standout v-model="text" placeholder="ค้นหา">
						<template v-slot:prepend>
							<q-icon name="mdi-magnify" size="20px" color="grey-7" />
						</template>
					</q-input> -->
				<!-- <q-btn class="bg-grey-3" flat dense round>
          <q-icon name="mdi-magnify" size="20px" color="grey-7" />
        </q-btn>
        -->
				<!-- Notification -->
				<!-- <div class="row items-center no-wrap">
					<q-btn-dropdown size="md" dropdown-color="grey" flat>
						<template v-slot:label>
							<q-item v-close-popup class="q-pa-none">
								<q-item-section :avatar="$q.screen.gt.xs">
									<q-avatar color="grey-3">
										<q-icon name="mdi-account" size="22px" color="grey-7" />
									</q-avatar>
								</q-item-section>
								<q-item-section class="text-left gt-xs">
									<q-item-label class="text-caption text-weight-medium">{{ fullname }}</q-item-label>
								</q-item-section>
							</q-item>
						</template>
						<div class="row justify-center" style="border-top: solid 3px #1bb19b !important; width: 273.797px">
							<div class="column items-center col-12 q-py-md" color="grey-3">
								<q-avatar size="72px" color="grey-4">
									<q-icon name="mdi-account" color="grey-7" />
								</q-avatar>
								<div class="text-subtitle2 q-mt-md q-mb-xs text-center">
									{{ fullname }}
								</div>
								<q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" />
							</div>

							<div class="column col-12">
								<q-separator />
								<div class="column q-pb-md justify-center">
									<div class="text-overline text-grey q-px-md q-pt-sm">เลือกโหมด</div>
									<q-list dense v-for="op in options" :key="op.label">
										<q-item clickable>
											<q-item-section avatar>
												<q-avatar :color="op.color" text-color="white" :icon="op.icon" size="20px" font-size="12px" />
											</q-item-section>
											<q-item-section class="q-py-sm">{{ op.label }}</q-item-section>
										</q-item>
									</q-list>
								</div>
							</div>
						</div>
					</q-btn-dropdown>
				</div> -->
				<q-btn size="13px" class="bg-blue-1" v-if="activeBtn() || activeBtnPlacement()" flat dense round @click="toggleBtnRight" aria-label="Menu">
					<q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
				</q-btn>
			</q-toolbar>
		</q-header>
		<!-- end header -->

		<!-- drawer -->
		<q-drawer side="left" class="text-white" style="background: #273238" v-model="drawerL" show-if-above :width="260" :breakpoint="1023" :mini="miniState">
			<!--  ส่วนของเมนู mini -->
			<template v-slot:mini>
				<q-scroll-area class="fit mini-slot cursor-pointer">
					<q-toolbar class="q-py-md">
						<q-img src="@/assets/logo.png" spinner-color="white" style="height: 32px; max-width: 32px" />
					</q-toolbar>
					<q-separator color="grey-9" />
					<!-- เมนูย่อย ตอนย่อ -->
					<q-list padding>
						<div v-for="(menuItem, index) in menuList" :key="index">
							<!-- <div v-if="role.includes(menuItem.role)"> -->
							<q-item
								clickable
								v-ripple
								:active="link === menuItem.label"
								@click="link = menuItem.label"
								active-class="text-primary menuActiveMini text-weight-medium"
								v-if="menuItem.key == 3 || menuItem.key == 5"
							>
								<div class="row items-center no-wrap">
									<q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
									<q-icon name="mdi-dots-vertical" size="13px" color="grey-6" />
								</div>
								<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
									{{ menuItem.label }}
								</q-tooltip>
								<q-menu anchor="top right" self="top left" :offset="[5, 0]" style="background: #273238; z-index: 9000">
									<q-list class="text-white q-py-sm">
										<div v-for="(subMenu, i) in menuItem.children" :key="i" :to="{ name: `${subMenu.path}` }">
											<!-- เมนูย่อย 2 ชั้น -->
											<div v-if="menuItem.key == 5">
												<q-item dense clickable v-if="subMenu.key !== 5.1">
													<q-item-section>{{ subMenu.label }} </q-item-section>
													<q-item-section side>
														<q-icon name="keyboard_arrow_right" />
													</q-item-section>

													<q-menu anchor="top end" self="top start" :offset="[5, 0]" style="background: #273238; z-index: 9000">
														<q-list class="text-white q-py-sm">
															<q-item
																v-for="subMenu2 in subMenu.children"
																:key="subMenu2.label"
																:to="{ name: `${subMenu2.path}` }"
																dense
																class="q-pl-md text-body2"
																active-class="text-primary active-item text-weight-medium"
																clickable
															>
																<q-item-section>
																	<q-item-label>{{ subMenu2.label }}</q-item-label>
																</q-item-section>
															</q-item>
														</q-list>
													</q-menu>
												</q-item>

												<q-item
													v-else
													dense
													class="q-pl-md q-pr-xl text-body2"
													active-class="text-primary active-item text-weight-medium"
													clickable
													:to="{ name: `${subMenu.path}` }"
												>
													<q-item-section>
														<q-item-label>{{ subMenu.label }}</q-item-label>
													</q-item-section>
												</q-item>
											</div>
											<!-- เมนูย่อย 1 ชั้น -->
											<div v-else>
												<q-item dense class="q-pl-md q-pr-xl text-body2" active-class="text-primary active-item text-weight-medium" clickable :to="{ name: `${subMenu.path}` }">
													<q-item-section>
														<q-item-label>{{ subMenu.label }}</q-item-label>
													</q-item-section>
												</q-item>
											</div>
										</div>
									</q-list>
								</q-menu>
							</q-item>
							<q-item
								clickable
								v-ripple
								:to="{ name: `${menuItem.path}` }"
								:active="link === menuItem.label"
								@click="link = menuItem.label"
								active-class="text-primary menuActiveMini"
								v-else
							>
								<q-item-section avatar>
									<q-avatar size="md" font-size="20px">
										<q-icon :name="menuItem.icon" />
									</q-avatar>
								</q-item-section>
								<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
									{{ menuItem.label }}
								</q-tooltip>
							</q-item>
							<!-- </div> -->
						</div>
					</q-list>
				</q-scroll-area>
			</template>
			<!--  จบส่วนของเมนู mini -->

			<!-- ส่วนของเมนู -->
			<q-scroll-area class="fit">
				<q-toolbar class="q-py-md">
					<q-toolbar-title shrink class="row items-center no-wrap">
						<q-img src="@/assets/logo.png" spinner-color="white" style="height: 40px; max-width: 40px" />
						<div class="row q-ml-md">
							<div style="color: #ffffff; letter-spacing: 1px" class="text-body2 text-weight-bolder">ระบบ<span class="text-primary">ทรัพยากรบุคคล</span></div>
							<div class="text-caption text-white">&nbsp;กรุงเทพมหานคร</div>
						</div>
					</q-toolbar-title>
				</q-toolbar>
				<q-separator inset color="grey-9" />
				<q-list padding>
					<div v-for="(menuItem, index) in menuList" :key="index">
						<!-- เมนูย่อย -->
						<!-- <div v-if="role.includes(menuItem.role)"> -->
						<q-expansion-item group="somegroup" class="menuSub" expand-icon="mdi-chevron-down" expanded-icon="mdi-chevron-up" v-if="menuItem.key == 2">
							<template v-slot:header>
								<q-item-section avatar>
									<q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
								</q-item-section>
								<q-item-section>{{ menuItem.label }}</q-item-section>
							</template>

							<!-- เมนูย่อย 2 ชั้น (สรรหา) -->
							<div v-if="menuItem.key == 5">
								<div v-for="(subMenu, i) in menuItem.children" :key="i">
									<q-expansion-item switch-toggle-side dense-toggle :label="subMenu.label" v-if="subMenu.key !== 5.1" class="expan2" dense>
										<q-item
											dense
											class="menuSubHover"
											active-class="text-primary active-item text-weight-bold menuSubAct"
											clickable
											v-for="subMenu2 in subMenu.children"
											:key="subMenu2.key"
											:to="{ name: `${subMenu2.path}` }"
										>
											<q-item-section>
												<q-item-label class="font-400 subLabel">{{ subMenu2.label }} </q-item-label>
											</q-item-section>
										</q-item>
									</q-expansion-item>
									<q-item v-else dense class="menuSubHover" active-class="text-primary active-item text-weight-bold menuSubAct" clickable :to="{ name: `${subMenu.path}` }">
										<q-item-section>
											<q-item-label>{{ subMenu.label }}</q-item-label>
										</q-item-section>
									</q-item>
								</div>
							</div>
							<!-- เมนูย่อย 1 ชั้น -->
							<q-item
								v-else
								dense
								class="menuSubHover"
								active-class="text-primary active-item text-weight-bold menuSubAct"
								clickable
								v-for="(subMenu, j) in menuItem.children"
								:key="j"
								:to="subMenu.path"
							>
								<q-item-section>
									<q-item-label class="font-400">{{ subMenu.label }}</q-item-label>
								</q-item-section>
							</q-item>
						</q-expansion-item>

						<!-- เมนูปกติ -->
						<q-item
							class="text-weight-medium menu"
							:active="activeMenu(menuItem.path)"
							active-class="text-primary active-item text-weight-bold menuActive"
							:to="{ name: `${menuItem.path}` }"
							clickable
							v-ripple
							dense
							exact
							v-else
						>
							<q-item-section avatar>
								<q-avatar size="md" font-size="20px">
									<q-icon :name="menuItem.key === active ? menuItem.activeIcon : menuItem.icon" />
								</q-avatar>
							</q-item-section>

							<q-item-section>
								<q-item-label>{{ menuItem.label }}</q-item-label>
							</q-item-section>
						</q-item>
						<!-- </div> -->
					</div>
				</q-list>
			</q-scroll-area>
		</q-drawer>

		<!-- drawer page registry/:id -->
		<q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScroll()" v-model="drawerR" :width="220" :breakpoint="1023">
			<q-scroll-area class="fit">
				<q-list padding>
					<q-item
						v-for="(tabItem, index) in tabListLogin"
						:key="index"
						:id="'tab--' + tabItem.tag"
						class="tabNative"
						active-class="text-blue-7 active-item text-weight-medium tabActive"
						:active="activeTab(tabItem.tag)"
						clickable
						v-ripple
						dense
						exact
						@click="tagClick(tabItem.tag)"
					>
						<q-item-section>
							<q-item-label
								><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label }}</span></q-item-label
							>
						</q-item-section>
					</q-item>
				</q-list>
			</q-scroll-area>
		</q-drawer>

		<!-- drawer page manual -->
		<q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabLogin" v-model="drawerR" :width="250" :breakpoint="1023">
			<q-scroll-area class="fit">
				<q-list padding>
					<div v-for="(tabItem, index) in listTab" :key="index">
						<q-item
							:id="'tab--' + tabItem.tag"
							class="tabNative"
							active-class="text-blue-7 active-item text-weight-medium tabActive"
							:active="activeTab(tabItem.tag)"
							clickable
							v-ripple
							dense
							exact
							@click="tagClick(tabItem.tag)"
						>
							<q-item-section>
								<q-item-label
									><q-icon size="11px" name="mdi-circle-medium" />
									<span class="q-pl-xs">{{ tabItem.label }}</span>
								</q-item-label>
							</q-item-section>
						</q-item>
						<div v-if="route.name == 'recruitmain'">
							<q-item
								v-if="route.name == 'recruitmain'"
								v-for="(childItem, childIndex) in tabItem.childern"
								:key="'child-' + childIndex"
								:id="'tab--' + childItem.tag"
								class="tabNative child-tab"
								active-class="text-blue-7 active-item text-weight-medium tabActive"
								:active="activeTab(childItem.tag)"
								clickable
								v-ripple
								dense
								exact
								@click="tagClick(childItem.tag)"
							>
								<q-item-section>
									<q-item-label>
										<!-- <q-icon size="11px" name="mdi-circle-small" /> -->
										<span class="q-pl-xl">{{ childItem.label }}</span>
									</q-item-label>
								</q-item-section>
							</q-item>
						</div>
					</div>
				</q-list>
			</q-scroll-area>
		</q-drawer>

		<!-- drawer page placement2/detail/:id -->
		<!-- <q-drawer
      side="right"
      class="bg-grey-2"
      show-if-above
      v-if="tabScrollPlacement()"
      v-model="drawerR"
      :width="220"
      :breakpoint="1023"
    >
      <q-scroll-area class="fit">
        <q-list padding>
          <q-item
            v-for="(tabItem, index) in tabListPlacement"
            :key="index"
            :id="'tab--' + tabItem.tag"
            class="tabNative"
            active-class="text-blue-7 active-item text-weight-medium tabActive"
            :active="activeTabPlacement(tabItem.tag)"
            clickable
            v-ripple
            dense
            exact
            @click="tagClickPlacement(tabItem.tag)"
          >
            <q-item-section>
              <q-item-label
                ><q-icon size="11px" name="mdi-circle-medium" /><span
                  class="q-pl-xs"
                  >{{ tabItem.label }}</span
                ></q-item-label
              >
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </q-drawer> -->
		<!-- drawer -->

		<q-page-container class="bg-grey-2">
			<q-page style="padding: 0 2%">
				<router-view :key="$route.fullPath" />
			</q-page>
		</q-page-container>
		<full-loader :visibility="loader" />
	</q-layout>
</template>

<style>
.menuSub .q-item__section--avatar,
.menu .q-item__section--avatar {
	min-width: 0px;
}
.menu {
	padding-bottom: 5px;
	padding-top: 5px;
	border-radius: 0 100px 100px 0;
	margin-right: 2%;
}

.menuActive {
	background: #212a2f;
	border-radius: 0 100px 100px 0;
	margin-right: 2%;
}

.menuActiveMini {
	background: #212a2f;
}
.menuSub .q-item {
	border-radius: 0 100px 100px 0;
	margin-right: 2%;
	font-weight: 500;
}
.expan2 .q-item {
	padding-left: 10%;
}
.subLabel {
	white-space: nowrap;
	width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.font-400 {
	font-weight: 400;
}
.expan2 .menuSubHover {
	padding-left: 30%;
	border-radius: 20px;
}
.menuSubHover {
	padding-left: 25%;
	border-radius: 20px;
}
.menuSub .q-expansion-item__content {
	background: #212a2f;
	padding: 5px 0px;
	margin-bottom: 5px;
}
.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) !important;
}
.q-card--bordered {
	border: 1px solid #ededed;
	box-shadow: none !important;
}
.q-menu {
	box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
}

.toptitle {
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 1%;
}

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

.q-field--outlined .q-field__control:before {
	border-color: #c8d3db;
}
.btnManu {
	min-height: 48px;
	border-radius: 0px 100px 100px 0px;
}

.q-field--outlined .q-icon {
	color: #7474747f;
}
.q-card__actions .q-btn--rectangle {
	padding: 0 14px !important;
}

/* custom scrollbar */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

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

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

::-webkit-scrollbar-thumb:hover {
	background-color: #a8bbbf;
}
</style>