diff --git a/package-lock.json b/package-lock.json
index 1e5a38f9..a4b1733c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "ehr",
+  "name": "ehr-manual",
   "version": "0.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "ehr",
+      "name": "ehr-manual",
       "version": "0.0.0",
       "dependencies": {
         "@fullcalendar/core": "^6.0.1",
diff --git a/src/modules/01_manual/components/1_login/01_Main.vue b/src/modules/01_manual/components/1_login/01_Main.vue
index 1c41bf31..90c789d3 100644
--- a/src/modules/01_manual/components/1_login/01_Main.vue
+++ b/src/modules/01_manual/components/1_login/01_Main.vue
@@ -1,219 +1,358 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-const rightDrawerOpen = ref(false)
-const text = ref('')
+import { ref } from "vue";
+const rightDrawerOpen = ref(false);
+const text = ref("");
 </script>
 
-
 <template>
-    <div class="row col-12">
-            <div class="col-9">
+  <div class="row col-12">
+    <div class="col-12">
+      <div class="toptitle text-dark col-12 row items-center">
+        คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
+      </div>
 
-                <div class="toptitle text-dark col-12 row items-center">คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร</div>
-
-                <q-card flat bordered class="col-12 q-pa-md" style="background-color: #ECEBEB; border-radius: 8px 8px 0px 0px; padding: 10px 16px 10px 16px; ">
-                    <div class="custom-topic text-dark">
-                        <div style="font-size: 16px; font-weight: 700;">
-                            การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
-                        </div>
-                    </div>
-                </q-card>
-
-
-                <q-card flat bordered class="col-12 q-pa-md" style="border-radius: 0px 0px 8px 8px;">
-
-                
-                        <div class="col-12 text16">เปิดโปรแกรม Google Chrome เวอร์ชั่น 20 ขึ้นไป หรือ Firefox เวอร์ชั่น 14 ขึ้นไป กรอก <span class="text-green">URL: https://bma-ehr.frappet.com</span> ลงในช่อง Address  จากนั้นกดแป้น Enter ที่คีย์บอร์ด 1 ครั้ง ดังรูป</div>
-                        <div class="col-12">
-                            <q-img src="@/assets/manual/01_login/1_main/1-1.png" style="max-width: 100%; display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px;"/>
-
-                            <div class="text-center text-grey-6" style="margin-top: 20px;">รูปภาพที่ 1–1 แสดงการเข้าสู่เว็บไซต์</div>
-                        </div>
-                </q-card>
-            </div>
-    
-            <div class="col-3 row justify-center" style="position: relative;">
-                <q-list dense padding class="col-12" style="max-width: 328px; position: absolute; top: 50px;">
-
-                    <q-expansion-item label="การเข้าสู่ระบบ" >
-                        <q-list dense>
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การเข้าสู่ระบบโดยใช้ User name และ Password</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การเปลี่ยนรหัสผ่านผู้ใช้งาน</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การลงทะเบียนผู้ใช้งานใหม่</q-item-section>
-                            </q-item>
-
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การออกจากระบบ</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การแสดงแจ้งเตือน</q-item-section>
-                            </q-item>
-
-                        </q-list>
-                    </q-expansion-item>
-
-                    <q-expansion-item label="ระบบข้อมูลหลัก" class="text-grey-7">
-                        <q-list dense>
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การเข้าสู่ระบบโดยใช้ User name และ Password</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การเปลี่ยนรหัสผ่านผู้ใช้งาน</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การลงทะเบียนผู้ใช้งานใหม่</q-item-section>
-                            </q-item>
-
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การออกจากระบบ</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การแสดงแจ้งเตือน</q-item-section>
-                            </q-item>
-
-                        </q-list>
-                    </q-expansion-item>
-
-                    <q-expansion-item label="ระบบโครงสร้างอัตรากำลัง" class="text-grey-7">
-                        <q-list dense>
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">จัดการตำแหน่ง</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">แผนภูมิโครงสร้าง</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">แผนภูมิองค์กร</q-item-section>
-                            </q-item>
-
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">ผังโครงสร้าง</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">จัดการบัญชี 2</q-item-section>
-                            </q-item>
-
-
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">รายงานบัญชี</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">จัดการบัญชี 2</q-item-section>
-                            </q-item>
-
-                        </q-list>
-                    </q-expansion-item>
-
-                    <q-expansion-item label="หน้าจัดการระบบทะเบียนประวัติ" class="text-grey-7">
-                        <q-list dense>
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การเข้าสู่หน้าระบบทะเบียนประวัติ</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การค้นหาข้อมูลทะเบียนประวัติ</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การดูรายละเอียดข้อมูลทะเบียนประวัติ</q-item-section>
-                            </q-item>
-
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การเพิ่ม แก้ไข ดูประวัติแก้ไขข้อมูลทะเบียนประวัติ</q-item-section>
-                            </q-item>
-    
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การค้นหาข้อมูลส่วนตัว การเลือกคอลัมน์แสดงผลข้อมูล</q-item-section>
-                            </q-item>
-
-
-                            <q-item dense clickable v-ripple>
-                                <q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
-                                </q-item-section>
-                                <q-item-section class="text-grey-7">การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว</q-item-section>
-                            </q-item>
-    
-                        </q-list>
-                    </q-expansion-item>                    
-                </q-list>
-            </div>
-    
-    
-    
-    
-    
+      <q-card
+        flat
+        bordered
+        class="col-12 q-pa-md"
+        style="
+          background-color: #ecebeb;
+          border-radius: 8px 8px 0px 0px;
+          padding: 10px 16px 10px 16px;
+        "
+      >
+        <div class="custom-topic text-dark">
+          <div style="font-size: 16px; font-weight: 700">
+            การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
+          </div>
         </div>
-    
+      </q-card>
+
+      <q-card
+        flat
+        bordered
+        class="col-12 q-pa-md"
+        style="border-radius: 0px 0px 8px 8px"
+      >
+        <div class="col-12 text16">
+          เปิดโปรแกรม Google Chrome เวอร์ชั่น 20 ขึ้นไป หรือ Firefox เวอร์ชั่น
+          14 ขึ้นไป กรอก
+          <span class="text-green">URL: https://bma-ehr.frappet.com</span>
+          ลงในช่อง Address จากนั้นกดแป้น Enter ที่คีย์บอร์ด 1 ครั้ง ดังรูป
+        </div>
+        <div class="col-12">
+          <q-img
+            src="@/assets/manual/01_login/1_main/1-1.png"
+            style="
+              max-width: 100%;
+              display: block;
+              margin: 0 auto;
+              border-radius: 20px;
+              margin-top: 20px;
+            "
+          />
+
+          <div class="text-center text-grey-6" style="margin-top: 20px">
+            รูปภาพที่ 1–1 แสดงการเข้าสู่เว็บไซต์
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <!-- <div class="col-3 row justify-center" style="position: relative">
+      <q-list
+        dense
+        padding
+        class="col-12"
+        style="max-width: 328px; position: absolute; top: 50px"
+      >
+        <q-expansion-item label="การเข้าสู่ระบบ">
+          <q-list dense>
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การเข้าสู่ระบบโดยใช้ User name และ Password</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การเปลี่ยนรหัสผ่านผู้ใช้งาน</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การลงทะเบียนผู้ใช้งานใหม่</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7">การออกจากระบบ</q-item-section>
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การแสดงแจ้งเตือน</q-item-section
+              >
+            </q-item>
+          </q-list>
+        </q-expansion-item>
+
+        <q-expansion-item label="ระบบข้อมูลหลัก" class="text-grey-7">
+          <q-list dense>
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การเข้าสู่ระบบโดยใช้ User name และ Password</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การเปลี่ยนรหัสผ่านผู้ใช้งาน</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การลงทะเบียนผู้ใช้งานใหม่</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7">การออกจากระบบ</q-item-section>
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การแสดงแจ้งเตือน</q-item-section
+              >
+            </q-item>
+          </q-list>
+        </q-expansion-item>
+
+        <q-expansion-item label="ระบบโครงสร้างอัตรากำลัง" class="text-grey-7">
+          <q-list dense>
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7">จัดการตำแหน่ง</q-item-section>
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >แผนภูมิโครงสร้าง</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7">แผนภูมิองค์กร</q-item-section>
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7">ผังโครงสร้าง</q-item-section>
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7">จัดการบัญชี 2</q-item-section>
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7">รายงานบัญชี</q-item-section>
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7">จัดการบัญชี 2</q-item-section>
+            </q-item>
+          </q-list>
+        </q-expansion-item>
+
+        <q-expansion-item
+          label="หน้าจัดการระบบทะเบียนประวัติ"
+          class="text-grey-7"
+        >
+          <q-list dense>
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การเข้าสู่หน้าระบบทะเบียนประวัติ</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การค้นหาข้อมูลทะเบียนประวัติ</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การดูรายละเอียดข้อมูลทะเบียนประวัติ</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การเพิ่ม แก้ไข
+                ดูประวัติแก้ไขข้อมูลทะเบียนประวัติ</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การค้นหาข้อมูลส่วนตัว
+                การเลือกคอลัมน์แสดงผลข้อมูล</q-item-section
+              >
+            </q-item>
+
+            <q-item dense clickable v-ripple>
+              <q-item-section
+                avatar
+                class="q-pa-none"
+                style="min-width: 36px; margin-left: 30px"
+              >
+              </q-item-section>
+              <q-item-section class="text-grey-7"
+                >การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว</q-item-section
+              >
+            </q-item>
+          </q-list>
+        </q-expansion-item>
+      </q-list>
+    </div> -->
+  </div>
 </template>
 
-
-
-
-
 <style>
 .q-item__section--side .q-icon {
-    font-size: 20px;
-    }
+  font-size: 20px;
+}
 </style>
-
-
-
diff --git a/src/modules/01_manual/components/2_data/21_Main.vue b/src/modules/01_manual/components/2_data/21_Main.vue
index c94c96f0..2c63a7d2 100644
--- a/src/modules/01_manual/components/2_data/21_Main.vue
+++ b/src/modules/01_manual/components/2_data/21_Main.vue
@@ -6,7 +6,7 @@ const text = ref("");
 
 <template>
   <div class="row col-12">
-    <div class="col-9">
+    <div class="col-12">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
       </div>
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 7f52ced3..05e23829 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -86,6 +86,23 @@ const tabScroll = () => {
   return route.name == "registryDetail";
 };
 
+const tabScroll2 = () => {
+  // let pathName = "";
+  // let childernName: any = [];
+  // tabList.forEach((e: any) => {
+  //   childernName = e.childern;
+  // });
+  // console.log(childernName);
+
+  // pathName = childernName.find((e: any) => console.log(e));
+  // console.log(pathName);
+
+  // if (pathName) {
+  //   return true;
+  // }
+  return route.name == "manual";
+};
+
 /**
  * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
  */
@@ -182,6 +199,8 @@ const activeBtn = () => {
  * ยังจับ boolean ผิด จึงต้อง set
  */
 onMounted(async () => {
+  console.log(tabList);
+
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
     myEventHandler(e, true);
@@ -236,9 +255,11 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  */
 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 == "/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}`);
@@ -252,6 +273,9 @@ const activeMenu = (path: string) => {
 const activeTab = (tag: string) => {
   return tabData.value == tag;
 };
+const activeTab2 = (tag: string) => {
+  return tabData.value == tag;
+};
 
 /**
  * คลิกเพื่อให้ router หรือ scroll ไปยังตำแหน่งนั้นๆ
@@ -367,6 +391,10 @@ 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>
 
 <!-- โครงเว็บ -->
@@ -829,6 +857,41 @@ if (keycloak.tokenParsed != null) {
       </q-scroll-area>
     </q-drawer>
 
+    <!-- drawer page manual -->
+    <q-drawer
+      side="right"
+      class="bg-grey-2"
+      show-if-above
+      v-if="tabScroll2()"
+      v-model="drawerR"
+      :width="250"
+      :breakpoint="1023"
+    >
+      <q-scroll-area class="fit">
+        <q-list padding>
+          <q-item
+            v-for="(tabItem, index) in tabList"
+            :key="index"
+            :id="'tab--' + tabItem.no"
+            class="tabNative"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="activeTab2(tabItem.no)"
+            clickable
+            v-ripple
+            dense
+            exact
+            @click="clickTag(tabItem.path)"
+          >
+            <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 placement2/detail/:id -->
     <!-- <q-drawer
       side="right"