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

layout

Browse source
This commit is contained in:
setthawutttty 2024-11-18 17:21:14 +07:00
parent 6b32212df8
commit 74ceceb5e9
1 changed files with 136 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

204
src/views/MainLayout.vue
View file

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