changes
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user