erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Viet An
2026-07-02 13:56:28 +07:00
parent 976816d408
commit 6d9dce38cb
5 changed files with 90 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/components/TopMenu.vue
View File

@@ -47,17 +47,16 @@
>
<div class="navbar-start is-gap-1 is-align-items-center">
<template
v-for="(v, i) in leftmenu"
v-for="(v, i) in leftmenuVisible"
:key="i"
:id="v.code"
>
<a
v-if="!v.submenu"
:class="[
'navbar-item rounded-lg is-clipped font-medium',
'navbar-item rounded-lg is-clipped fs-13 font-medium',
currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-35',
]"
style="font-size: 13.5px"
@click="changeTab(v)"
>
{{ v[lang] }}
@@ -68,11 +67,10 @@
>
<a
:class="[
'navbar-link rounded-lg is-arrowless font-medium',
'navbar-link rounded-lg is-arrowless fs-13 font-medium',
currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-35',
]"
@click="changeTab(v)"
style="font-size: 13.5px"
>
<p class="is-flex is-align-items-center">
<span>{{ v[lang] }}</span>
@@ -96,25 +94,81 @@
</template>
</div>
<div class="navbar-end is-gap-1 is-align-items-center">
<!-- v-if="tabConfig" -->
<div
v-if="leftmenuHidden"
class="navbar-item has-dropdown is-hoverable"
>
<a class="navbar-link rounded-lg is-arrowless font-medium has-text-grey-35 p-2">
<Icon
name="material-symbols:menu-rounded"
:size="20"
/>
</a>
<div
class="navbar-dropdown is-right"
style="border-top: none"
>
<template v-for="item in leftmenuHidden">
<a
v-if="!item.submenu"
@click="changeTab(item)"
:class="[
'navbar-item font-medium',
currentTab.code === item.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-35',
]"
>
{{ item[lang] }}
</a>
<div v-else>
<a
:class="[
'navbar-item fs-13 font-medium',
currentTab.code === item.code
? 'has-text-primary-50 has-background-primary-95'
: 'has-text-grey-35',
]"
@click="changeTab(item)"
>
<p class="is-flex is-align-items-center">
<span>{{ item[lang] }}</span>
<Icon
name="material-symbols:keyboard-arrow-down-rounded"
:size="20"
/>
</p>
</a>
<a
v-for="(submenu, i) in item.submenu"
:key="i"
class="navbar-item"
@click="changeTab(item, submenu)"
>
{{ submenu[lang] }}
</a>
<hr class="my-0" />
</div>
</template>
</div>
</div>
<a
class="navbar-item rounded-lg p-1.5"
@click="changeTab(tabConfig)"
class="navbar-item rounded-lg p-1.5 is-flex"
@click="tabConfig && changeTab(tabConfig)"
>
<Icon
name="material-symbols:settings-outline-rounded"
:size="20"
class="has-text-grey-60"
class="has-text-grey-45"
/>
</a>
<!-- @click="openProfile()" v-if="avatar" -->
<a
@click="openProfile()"
v-if="true /* avatar */"
class="navbar-item rounded-full p-0 max-w-full is-flex is-gap-2 is-justify-content-space-between is-align-items-center"
>
<Avatarbox
text="Q"
type="findata"
size="two"
:size="9"
/>
</a>
</div>
@@ -147,6 +201,20 @@ topmenus.forEach((topmenu) => {
});
const leftmenu = $filter(topmenus, { category: "topmenu", classify: "left" });
const splitMenu = computed(() => {
let cutoffIdx = 0;
if ($store.viewport < 1 || $store.viewport > 3) return [leftmenu];
if ($store.viewport === 3) cutoffIdx = 8;
if ($store.viewport === 2) cutoffIdx = 5;
if ($store.viewport === 1) cutoffIdx = 3;
return [leftmenu.slice(0, cutoffIdx), leftmenu.slice(cutoffIdx)];
});
const leftmenuVisible = computed(() => splitMenu.value[0]);
const leftmenuHidden = computed(() => splitMenu.value[1]);
const currentTab = ref(leftmenu[0]);
const subTab = ref();
const tabConfig = $find(topmenus, { code: "configuration" });
@@ -187,8 +255,8 @@ function changeTab(tab, subtab) {
function openProfile() {
$store.commit("showmodal", {
component: "user/Profile",
width: "1100px",
height: "360px",
width: "1000px",
height: "auto",
title: $store.lang === "vi" ? "Thông tin cá nhân" : "User profile",
});
}
@@ -241,7 +309,8 @@ a[class^="navbar"] {
}
}
@media screen and (max-width: 1023px) {
/* follow $navbar-breakpoint */
@media screen and (max-width: 500px) {
.navbar-brand {
margin-right: 0 !important;
}