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

ref: change ui

Browse Source
This commit is contained in:
namdh
2026-09-14 21:24:59 +07:00
parent 36860aec5f
commit a0dfb9399a
10 changed files with 326 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/MainLayout.vue
+15 -14
View File
@@ -12,16 +12,16 @@
<aside
class="fixed inset-y-0 left-0 z-40 flex w-[236px] transform flex-col border-r px-3 py-4 transition-transform duration-200 lg:static"
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:hidden'"
style="background: var(--panel); border-color: var(--hairline)"
style="background: var(--primary); border-color: var(--primary)"
>
<div class="mb-5 flex items-center justify-between px-2">
<router-link :to="auth.isAdmin ? '/projects' : '/select-project'" class="flex items-center gap-2.5">
<span
class="grid h-8 w-8 place-items-center rounded-[10px] font-display text-[15px] font-extrabold text-white"
style="background: var(--primary)"
class="grid h-8 w-8 place-items-center rounded-[10px] font-display text-[15px] font-extrabold"
style="background: #fff; color: var(--primary)"
>M</span
>
<span class="font-display text-[15px] font-extrabold tracking-[-0.01em]" style="color: var(--ink)">
<span class="font-display text-[15px] font-extrabold tracking-[-0.01em]" style="color: #fff">
Workspace
</span>
</router-link>
@@ -31,13 +31,14 @@
rounded
severity="secondary"
class="lg:hidden"
style="color: #fff"
aria-label="Close menu"
@click="sidebarOpen = false"
/>
</div>
<nav v-if="currentProject" class="flex flex-col gap-0.5">
<div class="truncate px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide" style="color: var(--ink-muted)">
<div class="truncate px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide" style="color: rgba(255, 255, 255, 0.75)">
{{ currentProject.name }}
</div>
<router-link
@@ -107,7 +108,7 @@
</header>
<main class="flex-1 overflow-auto">
<div class="mx-auto h-full w-full max-w-[1280px] p-4 sm:p-6 lg:px-8 lg:py-7">
<div class="mx-auto h-full w-full max-w-[1200px] p-5 sm:p-7 lg:px-9 lg:py-8">
<router-view />
</div>
</main>
@@ -209,27 +210,27 @@ onMounted(() => {
cursor: pointer;
align-items: center;
gap: 0.65rem;
border-radius: 12px;
border-radius: 10px;
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--ink-muted);
color: rgba(255, 255, 255, 0.85);
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link i {
font-size: 0.9rem;
}
.nav-link:hover {
background-color: var(--primary-soft);
color: var(--ink);
background-color: rgba(255, 255, 255, 0.14);
color: #fff;
}
.nav-link.router-link-active {
background-color: var(--primary-soft);
color: var(--primary);
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
font-weight: 600;
}
.app-dark .nav-link.router-link-active {
color: #9ba6f8;
color: #fff;
}
.nav-link.router-link-active::before {
content: '';
@@ -239,6 +240,6 @@ onMounted(() => {
height: 60%;
width: 3px;
border-radius: 999px;
background: var(--magenta);
background: #fff;
}
</style>