hrms-bangkok/hrms-manual
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

sub mini menu

Browse source
This commit is contained in:
setthawutttty 2024-11-14 15:08:33 +07:00
parent f8998cc43a
commit 6500751044
3 changed files with 316 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/views/MainLayout.vue
View file

@ -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"