This commit is contained in:
Viet An
2026-05-14 09:11:18 +07:00
parent 336c8c9036
commit 4d37397ee4
25 changed files with 450 additions and 209 deletions

View File

@@ -16,7 +16,7 @@ const activeMenu = ref(menus[1]);
<template>
<div class="fixed-grid has-12-cols">
<div class="grid is-gap-4">
<div class="cell is-col-span-2">
<div class="cell is-col-span-3">
<aside class="menu">
<ul class="menu-list">
<li
@@ -25,19 +25,36 @@ const activeMenu = ref(menus[1]);
>
<a
@click="activeMenu = menu"
:class="{
'is-active': activeMenu.id === menu.id,
}"
:class="[
'fs-13',
{
'is-active': activeMenu.id === menu.id,
},
]"
>{{ menu.name }}</a
>
</li>
</ul>
</aside>
</div>
<div class="cell is-col-span-10">
<div class="cell is-col-span-9">
<AddProductForm v-if="activeMenu.id === 'add-product'" />
<AddProductVariant v-if="activeMenu.id === 'add-product-variant'" />
</div>
</div>
</div>
</template>
<style scoped>
.menu-list a {
--bulma-menu-list-link-padding: 0.75em 1.25em;
&:not(.is-active) {
--bulma-menu-item-background-l: 95%;
}
&.is-active {
--bulma-menu-item-h: var(--bulma-menu-item-selected-h);
--bulma-menu-item-s: var(--bulma-menu-item-selected-s);
--bulma-menu-item-l: var(--bulma-menu-item-selected-l);
}
}
</style>