ref: app UI

src/layouts/ProjectLayout.vue

@@ -1,48 +1,7 @@
 <template>
   <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>
-
     <div class="min-h-0 flex-1">
       <router-view />
     </div>
   </div>
 </template>
-
-<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>