diff --git a/public/toc.json b/public/toc.json
index c1a34994..c1116550 100644
--- a/public/toc.json
+++ b/public/toc.json
@@ -1,214 +1,219 @@
-[{
-        "icon": "mdi-home-variant-outline",
-        "activeIcon": "mdi-home-variant",
-        "label": "หน้าแรก",
-        "path": "/"
-    },
-    {
-        "icon": "mdi-file-outline",
-        "activeIcon": "mdi-file",
-        "label": "คู่มือการใช้งานระบบแอดมิน",
+[
+  {
+    "icon": "mdi-home-variant-outline",
+    "activeIcon": "mdi-home-variant",
+    "label": "หน้าแรก",
+    "path": "/"
+  },
+  {
+    "icon": "mdi-file-outline",
+    "activeIcon": "mdi-file",
+    "label": "คู่มือการใช้งานระบบแอดมิน",
+    "children": [
+      {
+        "label": "การใช้งานผู้ดูแลระบบ",
+        "path": "/manual/chapter-1-superadmin-maintenance"
+      },
+      {
+        "label": "การใช้งานผู้ดูแลระบบระดับสูง",
+        "path": "/manual/chapter-2-superadmin-maintenance"
+      },
+      {
+        "label": "คู่มือการตรวจสอบและแก้ไข",
+        "path": "/manual/chapter-3-superadmin-debug"
+      },
+      {
+        "label": "คู่มือการจัดการระบบ",
+        "path": "/manual/chapter-4-superadmin-build-and-deploy"
+      }
+    ]
+  },
+  {
+    "icon": "mdi-file-outline",
+    "activeIcon": "mdi-file",
+    "label": "คู่มือการใช้งานระบบบริหารจัดการ",
+    "children": [
+      {
+        "label": "การเข้าสู่ระบบ",
+        "path": "/manual/chapter-1-admin-login"
+      },
+      {
+        "label": "ระบบข้อมูลการประเมิน",
+        "path": "/manual/chapter-2-admin-evaluate"
+      },
+      {
+        "label": "ระบบโครงสร้างอัตรากำลัง",
+        "path": "/manual/chapter-3-admin-organization"
+      },
+      {
+        "label": "ระบบรักษาการในตำแหน่ง",
+        "path": "/manual/chapter-4-admin-acting"
+      },
+      {
+        "label": "ระบบอัตรากำลังลูกจ้าง",
+        "path": "/manual/chapter-5-admin-position-employee"
+      },
+      {
+        "label": "ระบบทะเบียนประวัติ",
+        "path": "/manual/chapter-6-admin-registry"
+      },
+      {
+        "label": "ระบบทะเบียนประวัติลูกจ้าง",
+        "path": "/manual/chapter-7-admin-registry-employee"
+      },
+      {
+        "label": "ระบบออกคำสั่ง",
+        "path": "/manual/chapter-8-admin-order"
+      },
+      {
+        "label": "ระบบสรรหา",
+        "path": "/manual/chapter-9-admin-recruit"
+      },
+      {
+        "label": "ระบบบรรจุ",
+        "path": "/manual/chapter-10-admin-appointment"
+      },
+      {
+        "label": "ทดลองปฏิบัติหน้าที่ราชการ",
+        "path": "/manual/chapter-11-admin-probation"
+      },
+      {
+        "label": "ระบบพ้นจากราชการ",
+        "path": "/manual/chapter-12-admin-retirement"
+      },
+      {
+        "label": "ระบบเครื่องราช",
+        "path": "/manual/chapter-13-admin-insignia"
+      },
+      {
+        "label": "ระบบการลา",
+        "path": "/manual/chapter-14-admin-leave"
+      },
+      {
+        "label": "ระบบวินัย",
+        "path": "/manual/chapter-15-admin-discipline"
+      },
+      {
+        "label": "ระบบประเมินบุคคล",
+        "path": "/manual/chapter-16-admin-KPI"
+      },
+      {
+        "label": "ระบบเงินเดือนและค่าจ้าง",
+        "path": "/manual/chapter-17-admin-salary"
+      },
+      {
+        "label": "ระบบประเมินผลการปฎิบัติ",
+        "path": "/manual/chapter-18-admin-perf-evaluation"
+      },
+      {
+        "label": "ระบบพัฒนา",
+        "path": "/manual/chapter-19-admin-development"
+      }
+    ]
+  },
+  {
+    "key": 4,
+    "icon": "mdi-file-outline",
+    "activeIcon": "mdi-file",
+    "label": "คู่มือการใช้งานระบบผู้ใช้งานทั่วไป",
+    "children": [
+      {
+        "key": 4.1,
+        "label": "คู่มือการใช้งานระบบข้าราชการกรุงเทพหานครสามัญ",
         "children": [
-
-            {
-                "label": "การใช้งานผู้ดูแลระบบ",
-                "path": "/manual/chapter-1-superadmin-maintenance"
-
-            },
-            {
-                "label": "การใช้งานผู้ดูแลระบบระดับสูง",
-                "path": "/manual/chapter-2-superadmin-maintenance"
-            },
-            {
-
-                "label": "คู่มือการตรวจสอบและแก้ไข",
-                "path": "/manual/chapter-3-superadmin-debug"
-            },
-            {
-                "label": "คู่มือการจัดการระบบ",
-                "path": "/manual/chapter-4-superadmin-build-and-deploy"
-            }
+          {
+            "label": "ระบบแผนผังองค์กร",
+            "path": "/manual/chapter-1-user-organization-chart"
+          },
+          {
+            "label": "ระบบทะเบียนประวัติ",
+            "path": "/manual/chapter-2-user-registry"
+          },
+          {
+            "label": "ระบบประเมินบุคคล",
+            "path": "/manual/chapter-3-user-evaluate"
+          },
+          {
+            "label": "ระบบการลา",
+            "path": "/manual/chapter-4-user-leave"
+          },
+          {
+            "label": "ระบบผลงาน",
+            "path": "/manual/chapter-5-user-portfolio"
+          },
+          {
+            "label": "ระบบขอโอน",
+            "path": "/manual/chapter-6-user-transfer"
+          },
+          {
+            "label": "ระบบอุทธรณ์ร้องทุกข์",
+            "path": "/manual/chapter-7-user-appeal-complain"
+          },
+          {
+            "label": "ระบบผู้ขอรับประเมิน (KPI)",
+            "path": "/manual/chapter-8-user-KPI"
+          },
+          {
+            "label": "ระบบผู้ประเมิน (KPI)",
+            "path": "/manual/chapter-9-user-KPI-evaluator"
+          },
+          {
+            "label": "ระบบทุนการศึกษา/ฝึกอบรม",
+            "path": "/manual/chapter-10-user-scholarship"
+          },
+          {
+            "label": "ระบบการพัฒนารายบุคคล",
+            "path": "/manual/chapter-11-user-Individual-development"
+          },
+          {
+            "label": "ระบบลาออก",
+            "path": "/manual/chapter-12-user-retire"
+          },
+          {
+            "label": "ระบบบันทึกการลงเวลาปฏิบัติงาน",
+            "path": "/manual/chapter-13-user-worktimerecord"
+          },
+          {
+            "label": "ระบบทุนการศึกษา/ฝึกอบรม",
+            "path": "/manual/chapter-14-user-service-testing"
+          }
         ]
-    },
-    {
-        "icon": "mdi-file-outline",
-        "activeIcon": "mdi-file",
-        "label": "คู่มือการใช้งานระบบบริหารจัดการ",
-        "children": [{
-                "label": "การเข้าสู่ระบบ",
-                "path": "/manual/chapter-1-admin-login"
-            },
-            {
-                "label": "ระบบข้อมูลการประเมิน",
-                "path": "/manual/chapter-2-admin-evaluate"
-            },
-            {
-                "label": "ระบบโครงสร้างอัตรากำลัง",
-                "path": "/manual/chapter-3-admin-organization"
-            },
-            {
-                "label": "ระบบรักษาการในตำแหน่ง",
-                "path": "/manual/chapter-4-admin-acting"
-            },
-            {
-                "label": "ระบบอัตรากำลังลูกจ้าง",
-                "path": "/manual/chapter-5-admin-position-employee"
-            },
-            {
-                "label": "ระบบทะเบียนประวัติ",
-                "path": "/manual/chapter-6-admin-registry"
-            },
-            {
-                "label": "ระบบทะเบียนประวัติลูกจ้าง",
-                "path": "/manual/chapter-7-admin-registry-employee"
-            },
-            {
-                "label": "ระบบออกคำสั่ง",
-                "path": "/manual/chapter-8-admin-order"
-            },
-            {
-                "label": "ระบบสรรหา",
-                "path": "/manual/chapter-9-admin-recruit"
-            },
-            {
-                "label": "ระบบบรรจุ",
-                "path": "/manual/chapter-10-admin-appointment"
-            },
-            {
-                "label": "ทดลองปฏิบัติหน้าที่ราชการ",
-                "path": "/manual/chapter-11-admin-probation"
-            },
-            {
-                "label": "ระบบพ้นจากราชการ",
-                "path": "/manual/chapter-12-admin-retirement"
-            },
-            {
-                "label": "ระบบเครื่องราช",
-                "path": "/manual/chapter-13-admin-insignia"
-            },
-            {
-                "label": "ระบบการลา",
-                "path": "/manual/chapter-14-admin-leave"
-            },
-            {
-                "label": "ระบบวินัย",
-                "path": "/manual/chapter-15-admin-discipline"
-            },
-            {
-                "label": "ระบบประเมินบุคคล",
-                "path": "/manual/chapter-16-admin-KPI"
-            },
-            {
-                "label": "ระบบเงินเดือนและค่าจ้าง",
-                "path": "/manual/chapter-17-admin-salary"
-            },
-            {
-                "label": "ระบบประเมินผลการปฎิบัติ",
-                "path": "/manual/chapter-18-admin-perf-evaluation"
-            },
-            {
-                "label": "ระบบพัฒนา",
-                "path": "/manual/chapter-19-admin-development"
-            }
-        ]
-    },
-    {
+      },
 
-        "icon": "mdi-file-outline",
-        "activeIcon": "mdi-file",
-        "label": "คู่มือการใช้งานระบบผู้ใช้งานทั่วไป",
-        "children": [{
-                "label": "คู่มือการใช้งานระบบข้าราชการกรุงเทพหานครสามัญ",
-                "children": [{
-                        "label": "ระบบแผนผังองค์กร",
-                        "path": "/manual/chapter-1-user-organization-chart"
-                    },
-                    {
-                        "label": "ระบบทะเบียนประวัติ",
-                        "path": "/manual/chapter-2-user-registry"
-                    },
-                    {
-                        "label": "ระบบประเมินบุคคล",
-                        "path": "/manual/chapter-3-user-evaluate"
-                    },
-                    {
-                        "label": "ระบบการลา",
-                        "path": "/manual/chapter-4-user-leave"
-                    },
-                    {
-                        "label": "ระบบผลงาน",
-                        "path": "/manual/chapter-5-user-portfolio"
-                    },
-                    {
-                        "label": "ระบบขอโอน",
-                        "path": "/manual/chapter-6-user-transfer"
-                    },
-                    {
-                        "label": "ระบบอุทธรณ์ร้องทุกข์",
-                        "path": "/manual/chapter-7-user-appeal-complain"
-                    },
-                    {
-                        "label": "ระบบผู้ขอรับประเมิน (KPI)",
-                        "path": "/manual/chapter-8-user-KPI"
-                    },
-                    {
-                        "label": "ระบบผู้ประเมิน (KPI)",
-                        "path": "/manual/chapter-9-user-KPI-evaluator"
-                    },
-                    {
-                        "label": "ระบบทุนการศึกษา/ฝึกอบรม",
-                        "path": "/manual/chapter-10-user-scholarship"
-                    },
-                    {
-                        "label": "ระบบการพัฒนารายบุคคล",
-                        "path": "/manual/chapter-11-user-Individual-development"
-                    },
-                    {
-                        "label": "ระบบลาออก",
-                        "path": "/manual/chapter-12-user-retire"
-                    },
-                    {
-                        "label": "ระบบบันทึกการลงเวลาปฏิบัติงาน",
-                        "path": "/manual/chapter-13-user-worktimerecord"
-                    },
-                    {
-                        "label": "ระบบทุนการศึกษา/ฝึกอบรม",
-                        "path": "/manual/chapter-14-user-service-testing"
-                    }
-                ]
-            },
-
-            {
-                "label": "คู่มือการใช้งานระบบลูกจ้างประจำกรุงเทพมหานคร",
-                "children": [{
-                        "label": "ระบบแผนผังองค์กร",
-                        "path": "/manual/chapter-1-user-organization-chart"
-                    },
-                    {
-                        "label": "ระบบทะเบียนประวัติ",
-                        "path": "/manual/chapter-2-user-registry"
-                    }, {
-                        "label": "ระบบการลา",
-                        "path": "/manual/chapter-4-user-leave"
-                    },
-                    {
-                        "label": "ระบบลงเวลา (ยังไม่ได้ทำ)",
-                        "path": "/manual/"
-                    },
-                    {
-                        "label": "ระบบอุทธรณ์ร้องทุกข์",
-                        "path": "/manual/chapter-7-user-appeal-complain"
-                    },
-                    {
-                        "label": "ระบบลาออก",
-                        "path": "/manual/chapter-12-user-retire"
-                    },
-                    {
-                        "label": "ระบบบันทึกการลงเวลาปฏิบัติงาน",
-                        "path": "/manual/chapter-13-user-worktimerecord"
-                    }
-                ]
-            }
+      {
+        "key": 4.2,
+        "label": "คู่มือการใช้งานระบบลูกจ้างประจำกรุงเทพมหานคร",
+        "children": [
+          {
+            "label": "ระบบแผนผังองค์กร",
+            "path": "/manual/chapter-1-user-organization-chart"
+          },
+          {
+            "label": "ระบบทะเบียนประวัติ",
+            "path": "/manual/chapter-2-user-registry"
+          },
+          {
+            "label": "ระบบการลา",
+            "path": "/manual/chapter-4-user-leave"
+          },
+          {
+            "label": "ระบบลงเวลา (ยังไม่ได้ทำ)",
+            "path": "/manual/"
+          },
+          {
+            "label": "ระบบอุทธรณ์ร้องทุกข์",
+            "path": "/manual/chapter-7-user-appeal-complain"
+          },
+          {
+            "label": "ระบบลาออก",
+            "path": "/manual/chapter-12-user-retire"
+          },
+          {
+            "label": "ระบบบันทึกการลงเวลาปฏิบัติงาน",
+            "path": "/manual/chapter-13-user-worktimerecord"
+          }
         ]
-    }
-]
\ No newline at end of file
+      }
+    ]
+  }
+]
diff --git a/src/interface/request/main/type.ts b/src/interface/request/main/type.ts
index 3fc7ebd4..0d7ff9d5 100644
--- a/src/interface/request/main/type.ts
+++ b/src/interface/request/main/type.ts
@@ -3,5 +3,6 @@ export interface MenuItem {
   activeIcon: string;
   label: string;
   path?: string;
+  key?: number;
   children?: MenuItem[];
 }
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index f77540e1..ef6ce062 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -19,6 +19,7 @@ const queryRole = route.query.role as string;
 const drawerMini = ref(false);
 const drawerMain = ref(false);
 const search = ref("");
+const link = ref<string>("");
 
 /**
  * ปุ่มย่อ ขยาย สารบัญทางขวาของคู่มือ
@@ -245,6 +246,105 @@ function defaultOpen(index: number) {
           <q-list padding>
             <div v-for="(menuItem, index) in menuList" :key="index">
               <q-item
+                clickable
+                v-ripple
+                :active="link === menuItem.label"
+                @click="link = menuItem.label"
+                active-class="text-primary menuActiveMini text-weight-medium"
+                v-if="menuItem.path !== '/'"
+              >
+                <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="subMenu.path"
+                      :to="subMenu.path"
+                    >
+                      <!-- เมนูย่อย 2 ชั้น -->
+                      <div
+                        v-if="menuItem.children && menuItem.children.length > 0"
+                      >
+                        <q-item
+                          dense
+                          clickable
+                          v-if="subMenu.key == 4.1 || subMenu.key == 4.2"
+                        >
+                          <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="subMenu2.path"
+                                :active="
+                                  $route.path === subMenu2.path ||
+                                  ($route.path !== '/' &&
+                                    subMenu2.path?.includes($route.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="subMenu.path"
+                          :active="
+                            $route.path === subMenu.path ||
+                            ($route.path !== '/' &&
+                              subMenu.path?.includes($route.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
+                v-else
                 clickable
                 v-ripple
                 :to="menuItem.path"