mws/mws.frontend.vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add submenu style

Browse Source
This commit is contained in:
namdh
2026-09-09 19:32:58 +07:00
parent 2e03b22b82
commit 301063533a
2 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/MainLayout.vue
+27 -8
View File
@@ -43,15 +43,16 @@
<div v-if="currentProject">
<button
class="nav-link w-full"
:class="{ 'router-link-active': isProjectsActive }"
@click="projectsExpanded = !projectsExpanded"
>
<i class="pi pi-folder-open"></i> Projects
<i class="pi ml-auto text-xs" :class="projectsExpanded ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
</button>
<div v-show="projectsExpanded" class="ml-3 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
<div v-show="projectsExpanded" class="ml-3 mt-2 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
<router-link
v-if="auth.canView('tasks')"
class="nav-link nav-link-sub"
class="nav-link nav-link-sub submenu-link"
:to="{ name: 'tasks-board', params: { id: currentProject.id } }"
@click="handleNavClick"
>
@@ -59,14 +60,14 @@
</router-link>
<router-link
v-if="auth.canView('documents')"
class="nav-link nav-link-sub"
class="nav-link nav-link-sub submenu-link"
:to="{ name: 'documents', params: { id: currentProject.id } }"
@click="handleNavClick"
>
<i class="pi pi-file"></i> Documents
</router-link>
<router-link
class="nav-link nav-link-sub"
class="nav-link nav-link-sub submenu-link"
:to="{ name: 'members', params: { id: currentProject.id } }"
@click="handleNavClick"
>
@@ -88,19 +89,20 @@
<div v-if="auth.canView('masterdata') || auth.canView('permissions')">
<button
class="nav-link w-full"
:class="{ 'router-link-active': isSettingsActive }"
@click="settingsExpanded = !settingsExpanded"
>
<i class="pi pi-cog"></i> Settings
<i class="pi ml-auto text-xs" :class="settingsExpanded ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
</button>
<div v-show="settingsExpanded" class="ml-3 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
<router-link v-if="auth.canView('masterdata')" class="nav-link nav-link-sub" to="/settings/masterdata" @click="handleNavClick">
<div v-show="settingsExpanded" class="ml-3 mt-2 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
<router-link v-if="auth.canView('masterdata')" class="nav-link nav-link-sub submenu-link" to="/settings/masterdata" @click="handleNavClick">
Master Data
</router-link>
<router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub" to="/settings/roles" @click="handleNavClick">
<router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub submenu-link" to="/settings/roles" @click="handleNavClick">
Roles
</router-link>
<router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub" to="/settings/permissions" @click="handleNavClick">
<router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub submenu-link" to="/settings/permissions" @click="handleNavClick">
Permissions
</router-link>
</div>
@@ -204,6 +206,7 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '../stores/auth'
import { useTheme } from '../composables/useTheme'
import { getProject, getProjects, updateUser } from '../services/backend'
@@ -221,6 +224,8 @@ const desktopMq = window.matchMedia('(min-width: 1024px)')
const isDesktop = ref(desktopMq.matches)
const sidebarOpen = ref(isDesktop.value)
const settingsExpanded = ref(false)
const isProjectsActive = computed(() => route.path.startsWith('/projects/'))
const isSettingsActive = computed(() => route.path.startsWith('/settings/'))
desktopMq.addEventListener('change', (e) => (isDesktop.value = e.matches))
function handleNavClick() {
@@ -412,4 +417,18 @@ onMounted(() => {
border-radius: 999px;
background: var(--magenta);
}
.submenu-link.router-link-active {
background: transparent !important;
color: #6a7cd0 !important;
}
.submenu-link.router-link-active::before {
content: '';
position: absolute;
left: 0;
top: 20%;
height: 60%;
width: 2px;
border-radius: 999px;
background: var(--magenta);
}
</style>