feat: update sub side menu
This commit is contained in:
parent
560e9dc272
commit
13974ff313
2 changed files with 24 additions and 15 deletions
|
|
@ -7,6 +7,7 @@ type Menu = {
|
|||
element?: HTMLElement;
|
||||
anchor: string;
|
||||
name: string;
|
||||
sub?: boolean;
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -76,21 +77,24 @@ onUnmounted(() => {
|
|||
|
||||
<template>
|
||||
<div class="side-menu__container">
|
||||
<span
|
||||
:style="{
|
||||
'--side-menu__fg': activeMenu !== v.anchor ? foreground : undefined,
|
||||
'--side-menu__bg': activeMenu !== v.anchor ? background : undefined,
|
||||
'--side-menu__fg-active': active?.foreground,
|
||||
'--side-menu__bg-active': active?.background,
|
||||
}"
|
||||
class="side-menu__item"
|
||||
:class="{ 'side-menu__active': activeMenu === v.anchor }"
|
||||
v-for="v in menu"
|
||||
:key="v.anchor"
|
||||
@click="handleClick(v)"
|
||||
>
|
||||
{{ v.name }}
|
||||
</span>
|
||||
<template v-for="v in menu" :key="v.anchor">
|
||||
<span
|
||||
:style="{
|
||||
'--side-menu__fg': activeMenu !== v.anchor ? foreground : undefined,
|
||||
'--side-menu__bg': activeMenu !== v.anchor ? background : undefined,
|
||||
'--side-menu__fg-active': active?.foreground,
|
||||
'--side-menu__bg-active': active?.background,
|
||||
}"
|
||||
class="side-menu__item"
|
||||
:class="{
|
||||
'side-menu__active': activeMenu === v.anchor,
|
||||
'side-menu__sub': v.sub || false,
|
||||
}"
|
||||
@click="handleClick(v)"
|
||||
>
|
||||
{{ v.name }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -109,6 +113,10 @@ onUnmounted(() => {
|
|||
border-radius: var(--radius-2);
|
||||
cursor: pointer;
|
||||
|
||||
&.side-menu__sub {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&.side-menu__active {
|
||||
--side-menu__fg: var(--side-menu__fg-active, inherit);
|
||||
--side-menu__bg: var(--side-menu__bg-active, inherit);
|
||||
|
|
|
|||
|
|
@ -1902,6 +1902,7 @@ watch(
|
|||
name: v.branchNo || 0,
|
||||
}),
|
||||
anchor: `form-branch-customer-no-${v.branchNo}`,
|
||||
sub: true,
|
||||
})) || []),
|
||||
]"
|
||||
background="transparent"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue