Begin work on project navigation

frontend-new/src/components/projects/ProjectHeader.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { PropType } from "vue";
-import { Project, User } from "hangar-api";
+import { Project } from "hangar-api";
 import UserAvatar from "~/components/UserAvatar.vue";
 import Button from "~/components/design/Button.vue";
 import Card from "~/components/design/Card.vue";
 
 defineProps({
-  user: {
-    type: Object as PropType<User>,
-    required: true,
-  },
   project: {
     type: Object as PropType<Project>,
     required: true,

frontend-new/src/components/projects/ProjectNav.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import ProjectNavItem from "~/components/projects/ProjectNavItem.vue";
+import { Project } from "hangar-api";
+import { computed } from "vue";
+import { hasPerms } from "~/composables/usePerm";
+import { NamedPermission } from "~/types/enums";
+
+const props = defineProps<{
+  project: Project;
+}>();
+
+const slug = computed(() => {
+  if (props.project) return props.project.namespace.owner + "/" + props.project.name;
+  return "unknown/unknown";
+});
+
+function childRoute(route = ""): string {
+  return `/${slug.value}${route}`;
+}
+</script>
+
+<template>
+  <nav class="pt-4 pb-2 flex flex-wrap">
+    <!-- TODO: vue-i18n -->
+    <ProjectNavItem :to="childRoute()">Home</ProjectNavItem>
+    <ProjectNavItem :to="childRoute('/versions')">Versions</ProjectNavItem>
+    <ProjectNavItem v-if="project.topicId" :to="childRoute('/discuss')">Discuss</ProjectNavItem>
+    <ProjectNavItem v-if="hasPerms(NamedPermission.EDIT_SUBJECT_SETTINGS)" :to="childRoute('/settings')">Settings</ProjectNavItem>
+    <ProjectNavItem v-if="props.project.settings.homepage" :href="props.project.settings.homepage">Website</ProjectNavItem>
+    <ProjectNavItem v-if="props.project.settings.issues" :href="props.project.settings.issues">Issues</ProjectNavItem>
+    <ProjectNavItem v-if="props.project.settings.source" :href="props.project.settings.source">Source</ProjectNavItem>
+    <ProjectNavItem v-if="props.project.settings.support" :href="props.project.settings.support">Support</ProjectNavItem>
+  </nav>
+</template>

frontend-new/src/components/projects/ProjectNavItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { computed } from "vue";
+
+const props = defineProps<{
+  to?: string;
+  href?: string;
+  icon?: string;
+}>();
+
+const route = useRoute();
+
+const selected = computed(() => {
+  return route.fullPath == props.to;
+});
+
+const clazz = computed(() => {
+  return "p-2 pb-1 mx-2 mb-1 rounded-sm border-b-3 flex items-center " + [selected.value ? "border-[#004ee9] font-medium" : "border-neutral-400"];
+});
+</script>
+
+<template>
+  <router-link v-if="to" :to="to" :class="clazz">
+    <slot></slot>
+  </router-link>
+  <a v-if="href" :href="props.href" :class="clazz" target="_blank">
+    <span class="mx-1">
+      <slot></slot>
+    </span>
+    <IconMdiOpenInNew class="text-xs" />
+  </a>
+</template>

frontend-new/src/pages/[user]/[project].vue

@@ -8,6 +8,7 @@ import { useRoute, useRouter } from "vue-router";
 import { handleRequestError } from "~/composables/useErrorHandling";
 import { useErrorRedirect } from "~/composables/useErrorRedirect";
 import ProjectHeader from "~/components/projects/ProjectHeader.vue";
+import ProjectNav from "~/components/projects/ProjectNav.vue";
 
 defineProps({
   user: {
@@ -26,6 +27,9 @@ if (!project) {
 </script>
 
 <template>
-  <ProjectHeader :user="user" :project="project"></ProjectHeader>
+  <div>
-  <router-view :user="user" :project="project"></router-view>
+    <ProjectHeader :project="project"></ProjectHeader>
+    <ProjectNav :project="project"></ProjectNav>
+    <router-view :user="user" :project="project"></router-view>
+  </div>
 </template>