feat: add project route, improve navigation

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Firebase
+.firebase/

src/components/Layout.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ArrowLeftIcon } from "@heroicons/vue/20/solid";
+
 import TopBar from "@/components/TopBar.vue";
 </script>
 
@@ -8,10 +10,18 @@ import TopBar from "@/components/TopBar.vue";
       <TopBar />
 
       <header class="py-10">
-        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="mx-auto h-20 max-w-7xl px-4 sm:px-6 lg:px-8">
           <h1 class="text-3xl font-bold tracking-tight text-white">
-            Dashboard
+            {{ $route.meta.title }}
           </h1>
+
+          <router-link
+            v-if="$route.meta.showBack"
+            to=".."
+            class="flex items-center gap-1 text-indigo-200 hover:text-indigo-100"
+          >
+            <ArrowLeftIcon class="size-4" /> Back
+          </router-link>
         </div>
       </header>
     </div>

src/components/TopBar.vue

@@ -27,15 +27,15 @@ const signOut = async () => {
       <div
         class="relative flex h-16 items-center justify-between lg:border-b lg:border-indigo-400 lg:border-opacity-25"
       >
-        <div class="flex items-center px-2 lg:px-0">
+        <router-link to="/" class="flex items-center px-2 lg:px-0">
           <div class="flex-shrink-0">
             <img class="block h-8 w-8" src="/icon.svg" alt="Your Company" />
           </div>
 
           <span class="font-sans text-xl font-bold text-white">
             Project Graveyard
           </span>
-        </div>
+        </router-link>
 
         <div class="flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end">
           <div class="w-full max-w-lg lg:max-w-xs">

src/main.ts

@@ -14,14 +14,31 @@ const router = createRouter({
       components: {
         default: HomeVue,
       },
+      meta: {
+        title: "Home",
+      },
     },
     {
       path: "/login",
       component: () => import("./views/Login.vue"),
+      meta: {
+        title: "Login",
+      },
     },
     {
       path: "/register",
       component: () => import("./views/Registration.vue"),
+      meta: {
+        title: "Registration",
+      },
+    },
+    {
+      path: "/projects/:id",
+      component: () => import("./views/Project.vue"),
+      meta: {
+        title: "Project",
+        showBack: true,
+      },
     },
   ],
 });

src/views/Project.vue

@@ -0,0 +1 @@
+<template>Welcome to {{ $route.params.id }}</template>