changes
This commit is contained in:
Viet An
@@ -33,33 +33,35 @@
|
||||
<template v-for="(v, i) in leftmenu" :key="i" :id="v.code">
|
||||
<a class="navbar-item rounded-lg is-clipped p-0" v-if="!v.submenu" @click="changeTab(v)">
|
||||
<span :class="[
|
||||
'px-3 py-2 fs-14 font-medium',
|
||||
'px-2 py-2 font-medium',
|
||||
currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-30'
|
||||
]">
|
||||
]"
|
||||
style="font-size: 13.5px"
|
||||
>
|
||||
{{ v[lang] }}
|
||||
</span>
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable" v-else>
|
||||
<a class="navbar-item px-2" @click="changeTab(v)">
|
||||
<span :class="[
|
||||
'px-3 py-1 font-medium',
|
||||
currentTab.code === v.code ? 'has-text-primary-bold has-background-primary-soft' : 'has-text-grey-30'
|
||||
]">
|
||||
<span>{{ v[lang] }}</span>
|
||||
<SvgIcon
|
||||
style="padding-top: 5px"
|
||||
v-bind="{ name: 'down2.svg', type: currentTab.code === v.code ? 'white' : 'dark', size: 15 }"
|
||||
>
|
||||
</SvgIcon>
|
||||
</span>
|
||||
</a>
|
||||
<div class="navbar-dropdown has-background-light">
|
||||
<a
|
||||
class="navbar-item has-background-light py-1 border-bottom"
|
||||
v-for="x in v.submenu"
|
||||
@click="changeTab(v, x)"
|
||||
<div class="navbar-item rounded-lg has-dropdown is-hoverable" v-else>
|
||||
<a class="navbar-link rounded-lg p-0" @click="changeTab(v)">
|
||||
<p
|
||||
:class="[
|
||||
'px-2 py-2 rounded-lg font-medium is-flex is-align-items-center',
|
||||
currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-30'
|
||||
]"
|
||||
style="font-size: 13.5px"
|
||||
>
|
||||
{{ x[lang] }}
|
||||
<span>{{ v[lang] }}</span>
|
||||
<Icon name="material-symbols:keyboard-arrow-down-rounded" :size="20" />
|
||||
</p>
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<a
|
||||
v-for="(submenu, i) in v.submenu"
|
||||
:key="i"
|
||||
class="navbar-item"
|
||||
@click="changeTab(v, submenu)"
|
||||
>
|
||||
{{ submenu[lang] }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,6 +136,186 @@ const menu = [
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'rights',
|
||||
vi: 'Phân quyền',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Rights',
|
||||
component: 'RightsMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'POS',
|
||||
vi: 'POS',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'POS',
|
||||
component: 'POSMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'receipts',
|
||||
vi: 'Hoá đơn',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Receipts',
|
||||
component: 'ReceiptsMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'imports',
|
||||
vi: 'Nhập hàng',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Imports',
|
||||
component: 'ImportsMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'exports',
|
||||
vi: 'Xuất hàng',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Exports',
|
||||
component: 'ExportsMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'inventory-transfer',
|
||||
vi: 'Chuyển kho',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'InventoryTransfer',
|
||||
component: 'InventoryTransferMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'inventory-count',
|
||||
vi: 'Kiểm kho',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'InventoryCount',
|
||||
component: 'InventoryCountMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'cash-book',
|
||||
vi: 'Sổ quỹ',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'CashBook',
|
||||
component: 'CashBookMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'report',
|
||||
vi: 'Báo cáo',
|
||||
link: null,
|
||||
submenu: [
|
||||
{
|
||||
id: 1,
|
||||
category: 'submenu',
|
||||
classify: 'report',
|
||||
code: 'ncc',
|
||||
vi: 'NCC',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'NCC',
|
||||
component: 'NCCMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'submenu',
|
||||
classify: 'report',
|
||||
code: 'customers',
|
||||
vi: 'Khách hàng',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Customers',
|
||||
component: 'CustomersMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'submenu',
|
||||
classify: 'report',
|
||||
code: 'goods',
|
||||
vi: 'Hàng hoá',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Goods',
|
||||
component: 'GoodsMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'submenu',
|
||||
classify: 'report',
|
||||
code: 'report-cash-book',
|
||||
vi: 'Sổ quỹ',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'ReportCashBook',
|
||||
component: 'ReportCashBookMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category: 'submenu',
|
||||
classify: 'report',
|
||||
code: 'finance',
|
||||
vi: 'Tài chính',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Finance',
|
||||
component: 'FinanceMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
],
|
||||
index: 0,
|
||||
},
|
||||
]
|
||||
// if($store.rights.length>0) {
|
||||
// menu = menu.filter(v=>$findIndex($store.rights, {setting: v.id})>=0)
|
||||
@@ -216,14 +398,35 @@ watch(
|
||||
.navbar-dropdown {
|
||||
padding-block: 0.375rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.navbar-dropdown > .navbar-item {
|
||||
&:hover {
|
||||
background-color: hsl(30, 48%, 82%) !important;
|
||||
}
|
||||
box-shadow: 0 0.25em 0.5em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
> .navbar-item {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.navbar-dropdown a.navbar-item {
|
||||
padding-inline-end: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item:hover {
|
||||
.navbar-link {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
> p {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-item > .navbar-link:after {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user