2026-08-11 23:17:04 +07:00
|
|
|
<template>
|
2026-08-24 08:07:23 +07:00
|
|
|
<div class="flex h-full min-h-0 flex-col">
|
|
|
|
|
<nav class="mb-5 flex shrink-0 gap-1 overflow-x-auto border-b pb-px" style="border-color: var(--hairline)">
|
|
|
|
|
<router-link class="tab tab-exact" :to="{ name: 'project-overview' }">Overview</router-link>
|
|
|
|
|
<router-link class="tab" :to="{ name: 'documents' }">Documents</router-link>
|
|
|
|
|
<router-link class="tab" :to="{ name: 'tasks' }">Tasks</router-link>
|
|
|
|
|
<router-link class="tab" :to="{ name: 'members' }">Members</router-link>
|
|
|
|
|
</nav>
|
2026-08-11 23:17:04 +07:00
|
|
|
|
2026-08-24 08:07:23 +07:00
|
|
|
<div class="min-h-0 flex-1">
|
|
|
|
|
<router-view />
|
|
|
|
|
</div>
|
2026-08-11 23:17:04 +07:00
|
|
|
</div>
|
|
|
|
|
</template>
|
2026-08-24 08:07:23 +07:00
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.tab {
|
|
|
|
|
position: relative;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
padding: 0.5rem 0.9rem 0.7rem;
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: var(--ink-muted);
|
|
|
|
|
transition: color 0.15s ease;
|
|
|
|
|
}
|
|
|
|
|
.tab:hover {
|
|
|
|
|
color: var(--ink);
|
|
|
|
|
}
|
|
|
|
|
.tab.router-link-active:not(.tab-exact),
|
|
|
|
|
.tab-exact.router-link-exact-active {
|
|
|
|
|
color: var(--primary);
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
.app-dark .tab.router-link-active:not(.tab-exact),
|
|
|
|
|
.app-dark .tab-exact.router-link-exact-active {
|
|
|
|
|
color: #9ba6f8;
|
|
|
|
|
}
|
|
|
|
|
.tab.router-link-active:not(.tab-exact)::after,
|
|
|
|
|
.tab-exact.router-link-exact-active::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset-inline: 0.4rem;
|
|
|
|
|
bottom: -1px;
|
|
|
|
|
height: 2px;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
background: currentColor;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
