feat: overhaul project workspace navigation

2026-07-18 17:52:25 +02:00
parent a46695c2eb
commit ff796aa10a
45 changed files with 1790 additions and 995 deletions
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { KanbanSquare, ListTodo, Settings2 } from 'lucide-vue-next';
+import { index as backlogIndex } from '@/routes/projects/backlog';
+import { index as boardIndex } from '@/routes/projects/board';
+import { index as settingsIndex } from '@/routes/projects/settings';
+import type { ProjectTabsProps } from '@/types';
+
+defineProps<ProjectTabsProps>();
+</script>
+
+<template>
+    <nav
+        aria-label="Project sections"
+        class="border-outline-variant/70 flex min-w-max items-center gap-1 border-b"
+    >
+        <Link
+            :href="boardIndex(project.id)"
+            prefetch
+            :class="[
+                'group relative inline-flex h-11 items-center gap-2 px-3 text-sm font-semibold transition-colors',
+                active === 'board'
+                    ? 'text-primary'
+                    : 'text-muted-foreground hover:text-foreground',
+            ]"
+        >
+            <KanbanSquare class="size-4" />
+            Board
+            <span
+                v-if="active === 'board'"
+                class="bg-primary absolute inset-x-2 -bottom-px h-0.5"
+            />
+        </Link>
+
+        <Link
+            :href="backlogIndex(project.id)"
+            prefetch
+            :class="[
+                'group relative inline-flex h-11 items-center gap-2 px-3 text-sm font-semibold transition-colors',
+                active === 'backlog'
+                    ? 'text-primary'
+                    : 'text-muted-foreground hover:text-foreground',
+            ]"
+        >
+            <ListTodo class="size-4" />
+            Backlog
+            <span
+                v-if="active === 'backlog'"
+                class="bg-primary absolute inset-x-2 -bottom-px h-0.5"
+            />
+        </Link>
+
+        <Link
+            v-if="canManageProject"
+            :href="settingsIndex(project.id)"
+            prefetch
+            :class="[
+                'group relative inline-flex h-11 items-center gap-2 px-3 text-sm font-semibold transition-colors',
+                active === 'settings'
+                    ? 'text-primary'
+                    : 'text-muted-foreground hover:text-foreground',
+            ]"
+        >
+            <Settings2 class="size-4" />
+            Settings
+            <span
+                v-if="active === 'settings'"
+                class="bg-primary absolute inset-x-2 -bottom-px h-0.5"
+            />
+        </Link>
+    </nav>
+</template>