chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: update sub side menu

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

38
src/components/SideMenu.vue
View file

@ -7,6 +7,7 @@ type Menu = {
element?: HTMLElement; element?: HTMLElement;
anchor: string; anchor: string;
name: string; name: string;
sub?: boolean;
}; };
const props = defineProps<{ const props = defineProps<{
@ -76,21 +77,24 @@ onUnmounted(() => {
<template> <template>
<div class="side-menu__container"> <div class="side-menu__container">
<span <template v-for="v in menu" :key="v.anchor">
:style="{ <span
'--side-menu__fg': activeMenu !== v.anchor ? foreground : undefined, :style="{
'--side-menu__bg': activeMenu !== v.anchor ? background : undefined, '--side-menu__fg': activeMenu !== v.anchor ? foreground : undefined,
'--side-menu__fg-active': active?.foreground, '--side-menu__bg': activeMenu !== v.anchor ? background : undefined,
'--side-menu__bg-active': active?.background, '--side-menu__fg-active': active?.foreground,
}" '--side-menu__bg-active': active?.background,
class="side-menu__item" }"
:class="{ 'side-menu__active': activeMenu === v.anchor }" class="side-menu__item"
v-for="v in menu" :class="{
:key="v.anchor" 'side-menu__active': activeMenu === v.anchor,
@click="handleClick(v)" 'side-menu__sub': v.sub || false,
> }"
{{ v.name }} @click="handleClick(v)"
</span> >
{{ v.name }}
</span>
</template>
</div> </div>
</template> </template>
@ -109,6 +113,10 @@ onUnmounted(() => {
border-radius: var(--radius-2); border-radius: var(--radius-2);
cursor: pointer; cursor: pointer;
&.side-menu__sub {
margin-left: 1rem;
}
&.side-menu__active { &.side-menu__active {
--side-menu__fg: var(--side-menu__fg-active, inherit); --side-menu__fg: var(--side-menu__fg-active, inherit);
--side-menu__bg: var(--side-menu__bg-active, inherit); --side-menu__bg: var(--side-menu__bg-active, inherit);

1
src/pages/03_customer-management/MainPage.vue
View file

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