diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 85adcf9f..c168c862 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -42,14 +42,14 @@ interface optionType {
 }
 
 const menuList = readonly<any[]>([
-	//   {
-	//     key: 1,
-	//     icon: "mdi-home-variant-outline",
-	//     activeIcon: "mdi-home-variant",
-	//     label: "หน้าแรก",
-	//     path: "dashboard",
-	//     role: "dashboard",
-	//   },
+	  {
+	    key: 1,
+	    icon: "mdi-home-variant-outline",
+	    activeIcon: "mdi-home-variant",
+	    label: "หน้าแรก",
+	    path: "dashboard",
+	    role: "dashboard",
+	  },
 	{
 		key: 2,
 		icon: "mdi-file-outline",
@@ -61,7 +61,7 @@ const menuList = readonly<any[]>([
 			{
 				key: 2.1,
 				label: "การเข้าสู่ระบบ",
-				path: "/manual",
+				path: "/login",
 			},
 			{
 				key: 2.2,
@@ -85,414 +85,6 @@ const menuList = readonly<any[]>([
 			},
 		],
 	},
-	// {
-	//   key: 3,
-	//   icon: "o_groups",
-	//   activeIcon: "groups",
-	//   label: "โครงสร้างอัตรากำลัง",
-	//   path: "organizational",
-	//   role: "organization",
-	//   children: [
-	//     {
-	//       key: 3.1,
-	//       label: "จัดการตำแหน่ง",
-	//       path: "organizationalMapping",
-	//     },
-	//     {
-	//       key: 3.2,
-	//       label: "แผนภูมิโครงสร้าง",
-	//       path: "organizationalStructChart",
-	//     },
-	//     {
-	//       key: 3.3,
-	//       label: "แผนภูมิองค์กร",
-	//       path: "organizationalOrgChart",
-	//     },
-	//     {
-	//       key: 3.4,
-	//       label: "ผังโครงสร้าง",
-	//       path: "organizationalTree",
-	//     },
-	//     {
-	//       key: 3.5,
-	//       label: "ผังโครงสร้างลูกจ้าง",
-	//       path: "organizationalEmployee",
-	//     },
-	//     {
-	//       key: 3.6,
-	//       label: "จัดการบัญชี 2",
-	//       path: "manageReport2",
-	//     },
-	//     {
-	//       key: 3.7,
-	//       label: "รายงานบัญชี",
-	//       path: "organizationalReport",
-	//     },
-	//   ],
-	// },
-	// {
-	//   key: 4,
-	//   icon: "o_contact_page",
-	//   activeIcon: "contact_page",
-	//   label: "ทะเบียนประวัติ",
-	//   path: "registry",
-	//   role: "registry",
-	// },
-	// {
-	//   key: 10,
-	//   icon: "o_contact_page",
-	//   activeIcon: "registry_employee_page",
-	//   label: "ทะเบียนประวัติลูกจ้าง",
-	//   path: "registry-employee",
-	//   role: "registryEmployee",
-	// },
-	// {
-	//   key: 10,
-	//   icon: "mdi-file-certificate-outline",
-	//   activeIcon: "order",
-	//   label: "ออกคำสั่ง",
-	//   path: "order",
-	//   role: "order",
-	// },
-	// {
-	//   key: 5,
-	//   icon: "o_search",
-	//   activeIcon: "search",
-	//   label: "สรรหา",
-	//   path: "recruiting",
-	//   role: "recruit",
-	//   children: [
-	//     {
-	//       label: "ตั้งค่าเว็บสรรหา",
-	//       path: "editorweb",
-	//       key: 5.1,
-	//       role: "recruit",
-	//     },
-	//     {
-	//       label: "สอบแข่งขัน",
-	//       path: "",
-	//       key: 5.2,
-	//       role: "recruit",
-	//       children: [
-	//         {
-	//           label: "จัดการรอบสอบแข่งขัน" /* แข่งขัน */,
-	//           path: "competePeriod",
-	//           role: "recruit",
-	//         },
-	//         {
-	//           label: "สถิติสมัครสอบแข่งขัน" /* แข่งขัน */,
-	//           path: "competePeriodStat",
-	//           role: "recruit",
-	//         },
-	//       ],
-	//     },
-	//     {
-	//       label: "คัดเลือก",
-	//       path: "",
-	//       key: 5.3,
-	//       role: "recruit",
-	//       children: [
-	//         {
-	//           label: "จัดการรอบคัดเลือก",
-	//           path: "qualifyPeriod",
-	//           role: "recruit",
-	//         },
-	//         {
-	//           label: "จัดการรอบคัดเลือกคนพิการ",
-	//           path: "disablePeriod",
-	//           role: "recruit",
-	//         },
-	//         {
-	//           label: "จัดการรายชื่อคัดเลือก",
-	//           path: "manage",
-	//           role: "recruit",
-	//         },
-	//         {
-	//           label: "สถิติสมัครคัดเลือก",
-	//           path: "qualifyPeriodStat",
-	//           role: "recruit",
-	//         },
-	//         {
-	//           label: "สถิติสมัครคัดเลือกคนพิการ",
-	//           path: "qualifyPeriodStatDisable",
-	//           role: "recruit",
-	//         },
-	//       ],
-	//     },
-	//   ],
-	// },
-	// {
-	//   key: 6,
-	//   path: "placement",
-	//   icon: "how_to_reg",
-	//   activeIcon: "how_to_reg",
-	//   label: "บรรจุ แต่งตั้ง ย้าย โอน",
-	//   role: "placement",
-	//   children: [
-	//     {
-	//       key: 6.1,
-	//       label: "รายชื่อผู้สอบผ่าน" /* รายชื่อผู้สอบผ่าน */,
-	//       path: "placement",
-	//       role: "placement",
-	//     },
-	//     // {
-	//     //   key: 6.2,
-	//     //   label: "ออกคำสั่ง" /* ออกคำสั่งบรรจุ */,
-	//     //   path: "Orderplacement",
-	//     //   role: "placement",
-	//     // },
-	//     {
-	//       key: 6.3,
-	//       label: "การทดลองงาน" /* การทดลองงาน */,
-	//       path: "probation",
-	//       role: "probation",
-	//     },
-	//     {
-	//       key: 6.4,
-	//       label: "รายการขอโอน" /* */,
-	//       path: "transfer",
-	//       role: "placement",
-	//     },
-	//     {
-	//       key: 6.5,
-	//       label: "รายการรับโอน" /* */,
-	//       path: "receive",
-	//       role: "placement",
-	//     },
-	//     {
-	//       key: 6.6,
-	//       label: "รายการช่วยราชการ" /* */,
-	//       path: "help-government",
-	//       role: "placement",
-	//     },
-	//     {
-	//       key: 6.7,
-	//       label: "รายการส่งตัวกลับ" /* */,
-	//       path: "repatriate",
-	//       role: "placement",
-	//     },
-	//     {
-	//       key: 6.8,
-	//       label: "รายการแต่งตั้ง-เลื่อน" /* */,
-	//       path: "appoint-promote",
-	//       role: "placement",
-	//     },
-	//     {
-	//       key: 6.9,
-	//       label: "รายการย้าย" /* */,
-	//       path: "relocation",
-	//       role: "placement",
-	//     },
-	//     {
-	//       key: 6.1,
-	//       label: "รายการอื่นๆ" /* */,
-	//       path: "other",
-	//       role: "placement",
-	//     },
-	//   ],
-	// },
-	// {
-	//   key: 7,
-	//   icon: "mdi-account-cancel-outline",
-	//   activeIcon: "mdi-account-cancel",
-	//   label: "พ้นจากราชการ",
-	//   path: "retirement",
-	//   role: "retirement",
-	//   children: [
-	//     {
-	//       key: 7.1,
-	//       label: "ประกาศเกษียณ",
-	//       path: "retirement",
-	//       role: "retirement",
-	//     },
-	//     {
-	//       key: 7.2,
-	//       label: "รายการลาออก",
-	//       path: "resign",
-	//       role: "retirement",
-	//     },
-	//     // {
-	//     //   key: 7.3,
-	//     //   label: "คำสั่งลาออก",
-	//     //   path: "resign-order",
-	//     //   role: "retirement",
-	//     // },
-	//     {
-	//       key: 7.3,
-	//       label: "Exit interview",
-	//       path: "exit-Interview",
-	//       role: "retirement",
-	//     },
-	//     {
-	//       key: 7.4,
-	//       label: "รายการบันทึกการถึงแก่กรรม",
-	//       path: "deceased",
-	//       role: "retirement",
-	//     },
-	//     {
-	//       key: 7.5,
-	//       label: "รายการให้ออก",
-	//       path: "dismiss-order",
-	//       role: "retirement",
-	//     },
-	//     {
-	//       key: 7.6,
-	//       label: "รายการปลดออก",
-	//       path: "discharged",
-	//       role: "retirement",
-	//     },
-	//     {
-	//       key: 7.7,
-	//       label: "รายการไล่ออก",
-	//       path: "expulsion",
-	//       role: "retirement",
-	//     },
-	//   ],
-	// },
-	// {
-	//   key: 8,
-	//   icon: "mdi-medal-outline",
-	//   activeIcon: "mdi-medal",
-	//   label: "เครื่องราชฯ",
-	//   path: "insignia",
-	//   role: "insignia",
-	//   children: [
-	//     {
-	//       key: 8.1,
-	//       label: "รอบการเสนอขอ",
-	//       path: "insigniaProposals",
-	//       role: "insignia",
-	//     },
-	//     {
-	//       key: 8.2,
-	//       label: "จัดการคำขอ",
-	//       path: "insigniaManage",
-	//       role: "insignia",
-	//     },
-	//     {
-	//       key: 8.3,
-	//       label: "บันทึกผลการเสนอขอ",
-	//       path: "insigniaRecord",
-	//       role: "insignia",
-	//     },
-	//     {
-	//       key: 8.4,
-	//       label: "จัดสรรเครื่องราชฯ",
-	//       path: "insigniaAllocate",
-	//       role: "insignia",
-	//     },
-	//     {
-	//       key: 8.6,
-	//       label: "ยืม-คืนเครื่องราชฯ",
-	//       path: "insigniaBorrow",
-	//       role: "insignia",
-	//     },
-	//     {
-	//       key: 8.5,
-	//       label: "รายงาน",
-	//       path: "insigniaReport",
-	//       role: "insignia",
-	//     },
-	//   ],
-	// },
-	// {
-	//   key: 8,
-	//   icon: "mdi-medal-outline",
-	//   activeIcon: "mdi-medal",
-	//   label: "เครื่องราชฯ",
-	//   path: "insignia",
-	//   role: "insignia",
-	//   children: [
-	//     {
-	//       key: 8.1,
-	//       label: "เครื่องราชฯ",
-	//       path: "",
-	//       role: "insignia",
-	//       children: [
-	//         {
-	//           label: "รอบการเสนอขอ",
-	//           path: "insigniaProposals",
-	//           role: "insignia",
-	//         },
-	//         {
-	//           label: "จัดการคำขอ",
-	//           path: "insigniaManage",
-	//           role: "insignia",
-	//         },
-	//         {
-	//           label: "บันทึกผลการได้รับพระราช...",
-	//           path: "insigniaRecord",
-	//           role: "insignia",
-	//         },
-	//         {
-	//           label: "บันทึกผลการจ่ายใบกำกับ",
-	//           path: "VatInsignia",
-	//           role: "insignia",
-	//         },
-
-	//         {
-	//           label: "จัดสรรเครื่องราชฯ",
-	//           path: "insigniaAllocate",
-	//           role: "insignia",
-	//         },
-	//         {
-	//           label: "รายงาน",
-	//           path: "insigniaReport",
-	//           role: "insignia",
-	//         },
-	//       ],
-	//     },
-	//     {
-	//       key: 8.2,
-	//       label: "เหรียญจักรพรรดิมาลา",
-	//       path: "",
-	//       role: "coin",
-	//       children: [
-	//         {
-	//           label: "รอบการเสนอขอ",
-	//           path: "coinProposals",
-	//           role: "coin",
-	//         },
-	//         {
-	//           label: "จัดการคำขอ",
-	//           path: "coinManage",
-	//           role: "coin",
-	//         },
-	//         {
-	//           label: "บันทึกผลการได้รับพระราชทานเหรียญจักรพรรดิมาลา",
-	//           path: "coinReceive",
-	//           role: "coin",
-	//         },
-	//         {
-	//           label: "บันทึกผลการจ่ายใบกำกับ",
-	//           path: "coinPayment",
-	//           role: "coin",
-	//         },
-	//         {
-	//           label:
-	//             "รายชื่อที่ยื่นคำร้องขอแก้ไขข้อมูลการขอพระราชทานเหรียญจักรพรรดิมาลา",
-	//           path: "coinRequest",
-	//           role: "coin",
-	//         },
-	//         // {
-	//         //   label: "ประวัติการยื่นขอ",
-	//         //   path: "coinHistory",
-	//         //   role: "coin",
-	//         // },
-	//         {
-	//           label: "จัดสรรเหรียญตรา",
-	//           path: "coinAllocate",
-	//           role: "coin",
-	//         },
-	//         {
-	//           label: "รายงาน",
-	//           path: "coinReport",
-	//           role: "coin",
-	//         },
-	//       ],
-	//     },
-	// ],
-	// },
 ])
 const tabListLogin = readonly<any[]>([
 	{
diff --git a/src/modules/01_manual/router.ts b/src/modules/01_manual/router.ts
index 2e88de2a..04387dd8 100644
--- a/src/modules/01_manual/router.ts
+++ b/src/modules/01_manual/router.ts
@@ -54,8 +54,8 @@ const recruitselection = () => import("@/modules/01_manual/components/5_recruitm
 
 export default [
   {
-    path: "/manual",
-    name: "manual",
+    path: "/login",
+    name: "login",
     component: viewLogin,
     meta: {
       Auth: true,
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 402b5728..69ba0ae4 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,207 +1,195 @@
 <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 { 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 http from "@/plugins/http";
+import config from "@/app.config";
 
-import type { ScrollType, notiType, optionType } from "../interface/request/main/main"
+import type {
+  ScrollType,
+  notiType,
+  optionType,
+} from "../interface/request/main/main";
 import {
-	menuList,
-	tabListLogin,
-	tabListDatamain,
-	tabStructuremain,
-	tabRegistration,
-	tabRecruit,
-	tabList,
-	// tabListPlacement,
-} from "../interface/request/main/main"
+  menuList,
+  tabListLogin,
+  tabListDatamain,
+  tabStructuremain,
+  tabRegistration,
+  tabRecruit,
+  tabList,
+} 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 { setVerticalScrollPosition, getVerticalScrollPosition } = scroll;
+const store = useDataStore();
+const route = useRoute();
+const router = useRouter();
+const link = ref<string>("");
 
-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 $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 listTab = ref<any>([]);
 
 const notiList = ref<notiType[]>([
-	{
-		id: "1",
-		sender: "ท",
-		body: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-		timereceive: new Date(),
-	},
-])
+  {
+    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
-	}
-}
+  {
+    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",
+  },
+]);
 
 /**
  * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
  */
 const toggleBtnRight = () => {
-	drawerR.value = !drawerR.value
-}
+  drawerR.value = !drawerR.value;
+};
 
 /**
  * toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
  * ปกติเป็นการย่อโดยใช้ Ministate
  */
 const toggleBtnLeft = () => {
-	if (window.innerWidth < 1024) {
-		drawerL.value = !drawerL.value
-	} else {
-		miniState.value = !miniState.value
-	}
-}
+  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)
-	}
-}
+  const { position } = scroll;
+  if (route.name == "PlacementPersonalDetail") {
+    updateScrollPlacement(position);
+  } else {
+    updateScroll(position);
+  }
+};
 
 /**
  * updateScroll เป็น function active แทปด้านขวา
  */
 const updateScroll = (position: number) => {
-	// console.log(position);
+  // console.log(position);
 
-	// เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
-	if (position === void 0) {
-		position = document.documentElement.scrollTop || document.body.scrollTop
-	}
+  // เมื่อ 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)
+  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 === null) {
+          continue;
+        }
 
-				if (itemchildern.offsetTop >= position + 155) {
-					console.log(last)
-					if (last === void 0) {
-						last = sectionchildern.tag
-					}
-					break
-				} else {
-					last = sectionchildern.tag
-				}
-			}
-		}
+        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
-		}
+    /**
+     * วนหา 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 (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" })
-		}
-	}
-}
+  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
-}
+  return route.name == "login" && rightActive.value;
+};
 /**
  * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
  * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
@@ -209,42 +197,46 @@ const activeBtn = () => {
  * ยังจับ boolean ผิด จึงต้อง set
  */
 onMounted(async () => {
-	myEventHandler(null, false)
-	window.addEventListener("resize", (e: any) => {
-		myEventHandler(e, true)
-	})
-	await setListTab()
-})
+  myEventHandler(null, false);
+  window.addEventListener("resize", (e: any) => {
+    myEventHandler(e, true);
+  });
+  await setListTab();
+});
 
 const setListTab = () => {
-	// console.log(route.name);
+  // 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)
-}
+  if (route.name == "login") {
+    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);
+  
+  if (route.name == "dashboard") {
+    listTab.value = [];
+  }
+  window.scrollTo(0, 0);
+};
 watch(route, () => {
-	setListTab()
-})
+  setListTab();
+});
 
 /**
  * เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
  */
 onUnmounted(() => {
-	window.removeEventListener("resize", (e: any) => {
-		myEventHandler(e, true)
-	})
-})
+  window.removeEventListener("resize", (e: any) => {
+    myEventHandler(e, true);
+  });
+});
 
 /**
  * @param e event ของ resize
@@ -257,25 +249,25 @@ onUnmounted(() => {
  * 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
-			}
-		}
-	}
-}
+  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 อยู่เช่น
@@ -284,664 +276,597 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  * @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 == "dashboard" && route.fullPath == "/") return true;
+  // if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
+  const bool = route.fullPath.includes(`/${path}`);
 
-	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
-}
+  return bool;
+};
 /**
  * เป็นฟังก์ชันที่รันตลอด เพื่อให้ active ตรงตามเงื่อนไขให้เป็น true
  * @param tag string เป็นชื่อของ ตัวนั้นๆ
  */
 const activeTab = (tag: string) => {
-	return tabData.value == tag
-}
+  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 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);
+  }
+};
 
 const updateScrollPlacement = (position: number) => {
-	if (position === void 0) {
-		position = document.documentElement.scrollTop || document.body.scrollTop
-	}
+  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 หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
+  return route.name == "PlacementPersonalDetail" && rightActive.value;
+};
 
 /**
  * logout keycloak
  * confirm ก่อนออกจากระบบ
  */
 const doLogout = () => {
-	$q.dialog({
-		title: "ยืนยันการออกจากระบบ",
-		message: `ต้องการออกจากระบบใช้หรือไม่?`,
-		cancel: "ยกเลิก",
-		ok: "ยืนยัน",
-		persistent: true,
-	}).onOk(() => {
-		keycloak.logout()
-	})
-}
+  $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
+  fullname.value = keycloak.tokenParsed.name;
+  role.value = keycloak.tokenParsed.role;
 }
 const clickTag = (val: string) => {
-	console.log(val)
-	router.push(val)
-}
+  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" />
+  <!-- แบบเก่า 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>
-        -->
-				<!-- 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 -->
+        <q-space />
 
-		<!-- 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-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 -->
 
-													<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>
+    <!-- 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-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-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-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>
+                        <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 -->
 
-							<!-- เมนูย่อย 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-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>
 
-						<!-- เมนูปกติ -->
-						<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>
+              <!-- เมนูย่อย 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-section>
-								<q-item-label>{{ menuItem.label }}</q-item-label>
-							</q-item-section>
-						</q-item>
-						<!-- </div> -->
-					</div>
-				</q-list>
-			</q-scroll-area>
-		</q-drawer>
+            <!-- เมนูปกติ -->
+            <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>
 
-		<!-- 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>
+              <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 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
+    <!-- drawer page login -->
+    <q-drawer
       side="right"
       class="bg-grey-2"
       show-if-above
-      v-if="tabScrollPlacement()"
       v-model="drawerR"
-      :width="220"
+      :width="250"
       :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
+          <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>
+                <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 -->
+    </q-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>
+    <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;
+  min-width: 0px;
 }
 .menu {
-	padding-bottom: 5px;
-	padding-top: 5px;
-	border-radius: 0 100px 100px 0;
-	margin-right: 2%;
+  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%;
+  background: #212a2f;
+  border-radius: 0 100px 100px 0;
+  margin-right: 2%;
 }
 
 .menuActiveMini {
-	background: #212a2f;
+  background: #212a2f;
 }
 .menuSub .q-item {
-	border-radius: 0 100px 100px 0;
-	margin-right: 2%;
-	font-weight: 500;
+  border-radius: 0 100px 100px 0;
+  margin-right: 2%;
+  font-weight: 500;
 }
 .expan2 .q-item {
-	padding-left: 10%;
+  padding-left: 10%;
 }
 .subLabel {
-	white-space: nowrap;
-	width: 160px;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .font-400 {
-	font-weight: 400;
+  font-weight: 400;
 }
 .expan2 .menuSubHover {
-	padding-left: 30%;
-	border-radius: 20px;
+  padding-left: 30%;
+  border-radius: 20px;
 }
 .menuSubHover {
-	padding-left: 25%;
-	border-radius: 20px;
+  padding-left: 25%;
+  border-radius: 20px;
 }
 .menuSub .q-expansion-item__content {
-	background: #212a2f;
-	padding: 5px 0px;
-	margin-bottom: 5px;
+  background: #212a2f;
+  padding: 5px 0px;
+  margin-bottom: 5px;
 }
 .tabNative {
-	color: grey;
-	padding-left: 8%;
-	border-radius: 100px 0px 0px 100px;
+  color: grey;
+  padding-left: 8%;
+  border-radius: 100px 0px 0px 100px;
 }
 
 .tabActive {
-	padding-left: 8%;
-	background: #e4f2ff;
-	border-radius: 100px 0px 0px 100px;
+  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;
+  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
 }
 .q-card--bordered {
-	border: 1px solid #ededed;
-	box-shadow: none !important;
+  border: 1px solid #ededed;
+  box-shadow: none !important;
 }
 .q-menu {
-	box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
+  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
 
 .toptitle {
-	font-size: 1.2rem;
-	font-weight: bold;
-	margin-bottom: 1%;
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 1%;
 }
 
 .q-field--outlined .q-field__control {
-	border-radius: 5px;
+  border-radius: 5px;
 }
 
 .q-field--outlined .q-field__control:before {
-	border-color: #c8d3db;
+  border-color: #c8d3db;
 }
 .btnManu {
-	min-height: 48px;
-	border-radius: 0px 100px 100px 0px;
+  min-height: 48px;
+  border-radius: 0px 100px 100px 0px;
 }
 
 .q-field--outlined .q-icon {
-	color: #7474747f;
+  color: #7474747f;
 }
 .q-card__actions .q-btn--rectangle {
-	padding: 0 14px !important;
+  padding: 0 14px !important;
 }
 
 /* custom scrollbar */
 ::-webkit-scrollbar {
-	width: 12px;
-	height: 12px;
+  width: 12px;
+  height: 12px;
 }
 
 ::-webkit-scrollbar-track {
-	background-color: transparent;
+  background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-	background-color: #d6dee1;
-	border-radius: 20px;
-	border: 3px solid transparent;
-	background-clip: content-box;
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 3px solid transparent;
+  background-clip: content-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-	background-color: #a8bbbf;
+  background-color: #a8bbbf;
 }
 </style>