From 74ceceb5e9997f7a0b56cd54a2f3e17ade283ac2 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 18 Nov 2024 17:21:14 +0700
Subject: [PATCH] layout

---
 src/views/MainLayout.vue | 204 ++++++++++++++++++++++++++-------------
 1 file changed, 136 insertions(+), 68 deletions(-)

diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 4b8a0581..6838e740 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -280,11 +280,7 @@ function defaultOpen(index: number) {
                       <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 dense clickable v-if="subMenu.children">
                           <q-item-section>{{ subMenu.label }} </q-item-section>
                           <q-item-section side>
                             <q-icon name="keyboard_arrow_right" />
@@ -297,26 +293,77 @@ function defaultOpen(index: number) {
                             style="background: #273238; z-index: 9000"
                           >
                             <q-list class="text-white q-py-sm">
-                              <q-item
+                              <div
                                 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-item
+                                  dense
+                                  clickable
+                                  v-if="subMenu2.children"
+                                >
+                                  <q-item-section
+                                    >{{ subMenu2.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">
+                                      <div
+                                        v-for="subMenu2 in subMenu.children"
+                                        :key="subMenu2.label"
+                                      >
+                                        <q-item
+                                          :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>
+                                      </div>
+                                    </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="subMenu2.path"
+                                  :active="
+                                    $route.path === subMenu2.path ||
+                                    ($route.path !== '/' &&
+                                      subMenu2.path?.includes($route.path))
+                                  "
+                                >
+                                  <q-item-section>
+                                    <q-item-label>{{
+                                      subMenu2.label
+                                    }}</q-item-label>
+                                  </q-item-section>
+                                </q-item>
+                              </div>
                             </q-list>
                           </q-menu>
                         </q-item>
@@ -428,65 +475,75 @@ function defaultOpen(index: number) {
               </template>
 
               <!-- เมนูย่อย 1 ชั้น -->
-              <div v-if="menuItem.children && menuItem.children.length > 0">
-                <div v-for="(subMenu, i) in menuItem.children" :key="i">
-                  <q-expansion-item
-                    switch-toggle-side
-                    dense-toggle
-                    :label="subMenu.label"
-                    v-if="subMenu.children && subMenu.children.length > 0"
-                    class="expan2"
-                    dense
-                  >
+              <div v-for="(subMenu, i) in menuItem.children" :key="i">
+                <q-expansion-item
+                  switch-toggle-side
+                  dense-toggle
+                  :label="subMenu.label"
+                  v-if="subMenu.children && subMenu.children.length > 0"
+                  class="expan2"
+                  dense
+                >
+                  <div v-for="(subMenu2, i) in subMenu.children" :key="i">
+                    <q-expansion-item
+                      switch-toggle-side
+                      dense-toggle
+                      :label="subMenu2.label"
+                      v-if="subMenu2.children && subMenu2.children.length > 0"
+                      class="expan3"
+                      dense
+                    >
+                      <div class="bg-greenC">
+                        <q-item
+                          dense
+                          class="menuSubHover"
+                          active-class="text-primary active-item text-weight-bold menuSubAct"
+                          clickable
+                          v-for="subMenu3 in subMenu2.children"
+                          :key="subMenu3.path"
+                          :to="subMenu3.path"
+                        >
+                          <q-item-section>
+                            <q-item-label class="font-400 subLabel"
+                              >{{ subMenu3.label }}
+                            </q-item-label>
+                          </q-item-section>
+                        </q-item>
+                      </div>
+                    </q-expansion-item>
                     <q-item
+                      v-else
                       dense
                       class="menuSubHover"
                       active-class="text-primary active-item text-weight-bold menuSubAct"
                       clickable
-                      v-for="subMenu2 in subMenu.children"
                       :key="subMenu2.path"
                       :to="subMenu2.path"
                     >
                       <q-item-section>
-                        <q-item-label class="font-400 subLabel"
-                          >{{ subMenu2.label }}
+                        <q-item-label class="font-400">
+                          {{ 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
-                    :key="subMenu.path"
-                    :to="subMenu.path"
-                  >
-                    <q-item-section>
-                      <q-item-label class="font-400">
-                        {{ subMenu.label }}
-                      </q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </div>
+                  </div>
+                </q-expansion-item>
+                <q-item
+                  v-else
+                  dense
+                  class="menuSubHover"
+                  active-class="text-primary active-item text-weight-bold menuSubAct"
+                  clickable
+                  :key="subMenu.path"
+                  :to="subMenu.path"
+                >
+                  <q-item-section>
+                    <q-item-label class="font-400">
+                      {{ subMenu.label }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
               </div>
-              <q-item
-                v-else
-                dense
-                class="menuSubHover"
-                active-class="text-primary active-item text-weight-bold menuSubAct"
-                clickable
-                v-for="child in menuItem.children"
-                :key="child.path"
-                :to="child.path"
-              >
-                <q-item-section>
-                  <q-item-label class="font-400">
-                    {{ child.label }}
-                  </q-item-label>
-                </q-item-section>
-              </q-item>
             </q-expansion-item>
             <q-item
               v-else
@@ -561,6 +618,14 @@ function defaultOpen(index: number) {
   padding: 8px;
   padding-left: 11%;
 }
+.expan3 .q-item {
+  padding: 8px;
+  padding-left: 16%;
+}
+.expan3 .menuSubHover {
+  padding-left: 30%;
+  border-radius: 20px;
+}
 .subLabel {
   white-space: nowrap;
   width: 160px;
@@ -606,6 +671,9 @@ function defaultOpen(index: number) {
   box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
 
+.bg-greenC {
+  background-color: #2c3337;
+}
 .toptitle {
   font-size: 1.2rem;
   font-weight: bold;