feat: update UI
This commit is contained in:
+113
-45
@@ -1,27 +1,40 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex h-dvh flex-col lg:grid"
|
||||
:class="sidebarOpen ? 'lg:grid-cols-[250px_1fr]' : 'lg:grid-cols-1'"
|
||||
>
|
||||
<div
|
||||
class="flex h-dvh flex-col lg:grid"
|
||||
:class="sidebarOpen ? 'lg:grid-cols-[236px_1fr]' : 'lg:grid-cols-1'"
|
||||
>
|
||||
<div
|
||||
v-if="sidebarOpen"
|
||||
class="fixed inset-0 z-30 bg-black/40 lg:hidden"
|
||||
class="fixed inset-0 z-30 bg-slate-950/60 backdrop-blur-sm lg:hidden"
|
||||
@click="sidebarOpen = false"
|
||||
></div>
|
||||
|
||||
<aside
|
||||
class="fixed inset-y-0 left-0 z-40 flex w-[250px] transform flex-col gap-2 bg-slate-800 p-4 text-slate-200 transition-transform duration-200 lg:static"
|
||||
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)"
|
||||
>
|
||||
<div class="mb-4 flex items-center justify-between text-xl font-bold text-white">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-briefcase"></i>
|
||||
MWS
|
||||
</div>
|
||||
<button class="lg:hidden" aria-label="Close menu" @click="sidebarOpen = false">
|
||||
<i class="pi pi-times text-lg"></i>
|
||||
<div class="mb-5 flex items-center justify-between px-2">
|
||||
<router-link to="/dashboard" 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)"
|
||||
>M</span
|
||||
>
|
||||
<span class="font-display text-[15px] font-extrabold tracking-[-0.01em]" style="color: var(--ink)">
|
||||
Workspace
|
||||
</span>
|
||||
</router-link>
|
||||
<button
|
||||
class="text-slate-400 transition-colors hover:text-slate-900 dark:hover:text-white lg:hidden"
|
||||
aria-label="Close menu"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<i class="pi pi-times text-base"></i>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-1">
|
||||
|
||||
<nav class="flex flex-col gap-0.5">
|
||||
<router-link
|
||||
v-for="item in visibleNavItems"
|
||||
:key="item.key"
|
||||
@@ -35,45 +48,76 @@
|
||||
<i class="pi pi-cog"></i> Settings
|
||||
</router-link>
|
||||
</nav>
|
||||
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex items-center gap-2 text-slate-300">
|
||||
<Avatar :label="initials" style="background: #3b82f6; color: #fff" size="normal" />
|
||||
<span>{{ auth.user?.displayName ?? auth.user?.username }}</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
|
||||
<div class="flex items-center justify-between border-b border-slate-200 bg-white px-4 py-2.5 dark:border-slate-800 dark:bg-slate-900 lg:px-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<header
|
||||
class="flex items-center justify-between gap-3 border-b px-4 py-2.5 lg:px-6"
|
||||
style="background: var(--panel); border-color: var(--hairline)"
|
||||
>
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<Button
|
||||
icon="pi pi-bars"
|
||||
rounded
|
||||
text
|
||||
severity="secondary"
|
||||
:aria-label="sidebarOpen ? 'Close menu' : 'Open menu'"
|
||||
@click="sidebarOpen = !sidebarOpen"
|
||||
/>
|
||||
<span class="truncate text-slate-500 dark:text-slate-400">{{ currentProject?.name ?? 'My Workspace' }}</span>
|
||||
<nav class="flex min-w-0 items-center gap-1.5 text-[13px]" aria-label="Breadcrumb">
|
||||
<span class="shrink-0 font-medium" style="color: var(--ink-muted)">
|
||||
{{ pageTitle }}
|
||||
</span>
|
||||
<template v-if="currentProject">
|
||||
<span style="color: var(--ink-muted)">/</span>
|
||||
<router-link
|
||||
:to="{ name: 'project-overview', params: { id: currentProject.id } }"
|
||||
class="truncate font-medium transition-colors hover:text-slate-900 dark:hover:text-white"
|
||||
style="color: var(--ink-muted)"
|
||||
>
|
||||
{{ currentProject.name }}
|
||||
</router-link>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<span class="hidden shrink-0 text-[13px] font-semibold sm:block" style="color: var(--ink)">
|
||||
Welcome back, {{ auth.user?.displayName ?? auth.user?.username }}
|
||||
</span>
|
||||
<Button
|
||||
:icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
|
||||
rounded
|
||||
text
|
||||
severity="secondary"
|
||||
:aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
@click="theme.toggle"
|
||||
/>
|
||||
<Menu ref="menu" :model="menuItems" popup />
|
||||
<Button
|
||||
icon="pi pi-ellipsis-v"
|
||||
rounded
|
||||
text
|
||||
aria-label="Options"
|
||||
<button
|
||||
class="flex w-auto items-center gap-2.5 rounded-xl border px-2.5 py-1.5 text-left transition-colors hover:bg-slate-50 dark:hover:bg-white/5"
|
||||
style="border-color: var(--hairline)"
|
||||
aria-haspopup="true"
|
||||
@click="toggleMenu"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<main class="flex-1 overflow-auto p-4 lg:p-6">
|
||||
<router-view />
|
||||
>
|
||||
<Avatar :label="initials" :style="{ background: 'var(--primary)', color: '#fff' }" size="normal" />
|
||||
<span class="hidden min-w-0 sm:block">
|
||||
<span class="block truncate text-[13px] font-semibold" style="color: var(--ink)">
|
||||
{{ auth.user?.displayName ?? auth.user?.username }}
|
||||
</span>
|
||||
<span class="block truncate text-[11px]" style="color: var(--ink-muted)">
|
||||
@{{ auth.user?.username }}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<Menu ref="menu" :model="menuItems" popup />
|
||||
</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">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,11 +132,11 @@ import type { Project } from '../types'
|
||||
const auth = useAuthStore()
|
||||
const route = useRoute()
|
||||
const menu = ref()
|
||||
const sidebarOpen = ref(false)
|
||||
const theme = useTheme()
|
||||
|
||||
const desktopMq = window.matchMedia('(min-width: 1024px)')
|
||||
const isDesktop = ref(desktopMq.matches)
|
||||
const sidebarOpen = ref(isDesktop.value)
|
||||
desktopMq.addEventListener('change', (e) => (isDesktop.value = e.matches))
|
||||
|
||||
function handleNavClick() {
|
||||
@@ -102,11 +146,12 @@ function handleNavClick() {
|
||||
const navItems = [
|
||||
{ key: 'dashboard', label: 'Dashboard', icon: 'pi pi-home', to: '/dashboard' },
|
||||
{ key: 'projects', label: 'Projects', icon: 'pi pi-folder-open', to: '/projects' },
|
||||
{ key: 'accounts', label: 'Accounts', icon: 'pi pi-users', to: '/accounts' },
|
||||
{ key: 'roles', label: 'Roles', icon: 'pi pi-shield', to: '/roles' },
|
||||
{ key: 'users', label: 'Users', icon: 'pi pi-users', to: '/users' },
|
||||
]
|
||||
const visibleNavItems = computed(() => navItems.filter((item) => auth.canView(item.key)))
|
||||
|
||||
const pageTitle = computed(() => (route.meta.title as string | undefined) ?? 'Projects')
|
||||
|
||||
const currentProject = ref<Project | null>(null)
|
||||
|
||||
async function loadCurrentProject(id: string | string[]) {
|
||||
@@ -142,6 +187,7 @@ const menuItems = computed(() => [
|
||||
{
|
||||
label: auth.user?.displayName ?? auth.user?.username,
|
||||
items: [
|
||||
{ label: 'Profile', icon: 'pi pi-user', command: () => router.push('/profile') },
|
||||
{
|
||||
label: 'Logout',
|
||||
icon: 'pi pi-sign-out',
|
||||
@@ -154,6 +200,8 @@ const menuItems = computed(() => [
|
||||
},
|
||||
])
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function toggleMenu(event: Event) {
|
||||
menu.value?.toggle(event)
|
||||
}
|
||||
@@ -161,22 +209,42 @@ function toggleMenu(event: Event) {
|
||||
|
||||
<style scoped>
|
||||
.nav-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
gap: 0.65rem;
|
||||
border-radius: 12px;
|
||||
padding: 0.5rem 0.875rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #cbd5e1;
|
||||
color: var(--ink-muted);
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
.nav-link i {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.nav-link:hover {
|
||||
background-color: #334155;
|
||||
color: #fff;
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--ink);
|
||||
}
|
||||
.nav-link.router-link-active {
|
||||
background-color: #3b82f6;
|
||||
color: #fff;
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.app-dark .nav-link.router-link-active {
|
||||
color: #9ba6f8;
|
||||
}
|
||||
/* Active marker: a magenta rail, the one place the second accent shows in the shell */
|
||||
.nav-link.router-link-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--magenta);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user