61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<script setup>
|
|
import AddProductForm from "@/components/imports/AddProductForm.vue";
|
|
import AddProductVariant from "@/components/imports/AddProductVariant.vue";
|
|
const menus = [
|
|
{
|
|
id: "add-product",
|
|
name: "Tạo sản phẩm",
|
|
},
|
|
{
|
|
id: "add-product-variant",
|
|
name: "Thêm phiên bản",
|
|
},
|
|
];
|
|
const activeMenu = ref(menus[1]);
|
|
</script>
|
|
<template>
|
|
<div class="fixed-grid has-12-cols">
|
|
<div class="grid is-gap-4">
|
|
<div class="cell is-col-span-3">
|
|
<aside class="menu">
|
|
<ul class="menu-list">
|
|
<li
|
|
v-for="menu in menus"
|
|
:key="menu.id"
|
|
>
|
|
<a
|
|
@click="activeMenu = menu"
|
|
:class="[
|
|
'fs-13',
|
|
{
|
|
'is-active': activeMenu.id === menu.id,
|
|
},
|
|
]"
|
|
>{{ menu.name }}</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
<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>
|