feat: update sub side menu

This commit is contained in:
Methapon2001 2024-08-13 12:52:31 +07:00
parent 560e9dc272
commit 13974ff313
2 changed files with 24 additions and 15 deletions

View file

@ -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);

View file

@ -1902,6 +1902,7 @@ watch(
name: v.branchNo || 0,
}),
anchor: `form-branch-customer-no-${v.branchNo}`,
sub: true,
})) || []),
]"
background="transparent"