feat: added navigation bar to pages

src/routes/+layout.svelte

@@ -4,27 +4,28 @@
     let { children } = $props();
 </script>
 
-<h1>Global Layout</h1>
+<!-- Base Container with 16px padding -->
+<div class="p-4">
+    {@render children()}
 
-{@render children()}
-
-<br />
-<a href="/archivedprojects">Archived Projects</a><br />
-<a href="/paper/42">Paper 42 View</a><br />
-<a href="/project/42">Project 42 Dashboard</a><br />
-<a href="/project/42/paper/12">Project 42 Paper 12 View</a><br />
-<a href="/project/42/paper/new">Project 42 Paper Create View</a><br />
-<a href="/project/42/papers">Project 42 Papers</a><br />
-<a href="/project/42/settings/general">Project 42 General Settings</a><br />
-<a href="/project/42/settings/members">Project 42 Members Settings</a><br />
-<a href="/project/42/settings/review">Project 42 Review Settings</a><br />
-<a href="/project/42/settings/slr">Project 42 SLR Settings</a><br />
-<a href="/project/42/statistics">Project 42 Statistics</a><br />
-<a href="/readinglist">Reading List</a><br />
-<a href="/resetpassword">Reset Password</a><br />
-<a href="/settings/account">Account Settings</a><br />
-<a href="/settings/projectsetup">Project Setup Settings</a><br />
-<a href="/settings/shortcuts">Shortcuts Settings</a><br />
-<a href="/signin">Sign In</a><br />
-<a href="/signup">Sign Up</a><br />
-<a href="/">Homepage</a><br />
+    <br />
+    <a href="/archivedprojects">Archived Projects</a><br />
+    <a href="/paper/42">Paper 42 View</a><br />
+    <a href="/project/42/dashboard">Project 42 Dashboard</a><br />
+    <a href="/project/42/paper/12">Project 42 Paper 12 View</a><br />
+    <a href="/project/42/paper/new">Project 42 Paper Create View</a><br />
+    <a href="/project/42/papers">Project 42 Papers</a><br />
+    <a href="/project/42/settings/general">Project 42 General Settings</a><br />
+    <a href="/project/42/settings/members">Project 42 Members Settings</a><br />
+    <a href="/project/42/settings/review">Project 42 Review Settings</a><br />
+    <a href="/project/42/settings/slr">Project 42 SLR Settings</a><br />
+    <a href="/project/42/statistics">Project 42 Statistics</a><br />
+    <a href="/readinglist">Reading List</a><br />
+    <a href="/resetpassword">Reset Password</a><br />
+    <a href="/settings/account">Account Settings</a><br />
+    <a href="/settings/projectsetup">Project Setup Settings</a><br />
+    <a href="/settings/shortcuts">Shortcuts Settings</a><br />
+    <a href="/signin">Sign In</a><br />
+    <a href="/signup">Sign Up</a><br />
+    <a href="/">Homepage</a><br />
+</div>

src/routes/+page.svelte

@@ -1 +1,10 @@
-<h2>Homepage</h2>
+<script lang="ts">
+    import NavigationBar from "$lib/components/custom/NavigationBar.svelte";
+
+    let user = {
+        firstName: "Max",
+        lastName: "Mustermann",
+    };
+</script>
+
+<NavigationBar {user} pageTitle="SnowballR" />

src/routes/archivedprojects/+page.svelte

@@ -1 +1,10 @@
-<h2>Archived Projects</h2>
+<script lang="ts">
+    import NavigationBar from "$lib/components/custom/NavigationBar.svelte";
+
+    let user = {
+        firstName: "Max",
+        lastName: "Mustermann",
+    };
+</script>
+
+<NavigationBar {user} pageTitle="Archived Projects" backRef="/" />

src/routes/invitations/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import NavigationBar from "$lib/components/custom/NavigationBar.svelte";
+
+    let user = {
+        firstName: "Max",
+        lastName: "Mustermann",
+    };
+</script>
+
+<NavigationBar {user} pageTitle="Invitations" backRef="/" />

src/routes/paper/[paperId]/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import type { PageData } from "./$types";
-
-    export let data: PageData;
+    let { data } = $props();
 </script>
 
 <h2>Paper {data.paperId} View</h2>

src/routes/project/[projectId]/dashboard/+page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import ProjectNavigationBar from "$lib/components/custom/ProjectNavigationBar.svelte";
+
+    let { data } = $props();
+
+    let user = {
+        firstName: "Max",
+        lastName: "Mustermann",
+    };
+    let project = {
+        id: data.projectId,
+        name: `Project ${data.projectId}`,
+    };
+</script>
+
+<ProjectNavigationBar {user} {project} defaultTabValue="dashboard" />
+
+<h3>Project {data.projectId} Dashboard</h3>

src/routes/project/[projectId]/paper/[paperId]/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import type { PageData } from "./$types";
-
-    export let data: PageData;
+    let { data } = $props();
 </script>
 
 <h3>Project {data.projectId} Paper {data.paperId} View</h3>

src/routes/project/[projectId]/paper/new/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import type { PageData } from "./$types";
-
-    export let data: PageData;
+    let { data } = $props();
 </script>
 
 <h3>Project {data.projectId} New Paper</h3>

src/routes/project/[projectId]/papers/+page.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
-    import type { PageData } from "./$types";
+    import ProjectNavigationBar from "$lib/components/custom/ProjectNavigationBar.svelte";
 
-    export let data: PageData;
+    let { data } = $props();
+
+    let user = {
+        firstName: "Max",
+        lastName: "Mustermann",
+    };
+    let project = {
+        id: data.projectId,
+        name: `Project ${data.projectId}`,
+    };
 </script>
 
+<ProjectNavigationBar {user} {project} defaultTabValue="papers" />
+
 <h3>Project {data.projectId} Papers</h3>

src/routes/project/[projectId]/settings/+layout.svelte

@@ -1,7 +1,19 @@
 <script lang="ts">
+    import ProjectNavigationBar from "$lib/components/custom/ProjectNavigationBar.svelte";
+
     let { children, data } = $props();
+    let user = {
+        firstName: "Max",
+        lastName: "Mustermann",
+    };
+    let project = {
+        id: data.projectId,
+        name: `Project ${data.projectId}`,
+    };
 </script>
 
-<h3>Project {data.projectId} Settings Layout</h3>
+<ProjectNavigationBar {user} {project} defaultTabValue="settings" />
+
+<h3>Project {data.projectId} Settings</h3>
 
 {@render children()}

src/routes/project/[projectId]/settings/general/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import type { PageData } from "./$types";
-
-    export let data: PageData;
+    let { data } = $props();
 </script>
 
 <h4>Project {data.projectId} Settings - General</h4>

src/routes/project/[projectId]/settings/members/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import type { PageData } from "./$types";
-
-    export let data: PageData;
+    let { data } = $props();
 </script>
 
 <h4>Project {data.projectId} Settings - Members</h4>

src/routes/project/[projectId]/settings/review/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import type { PageData } from "./$types";
-
-    export let data: PageData;
+    let { data } = $props();
 </script>
 
 <h4>Project {data.projectId} Settings - Review</h4>

src/routes/project/[projectId]/settings/slr/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import type { PageData } from "./$types";
-
-    export let data: PageData;
+    let { data } = $props();
 </script>
 
 <h4>Project {data.projectId} Settings - SLR</h4>

src/routes/project/[projectId]/statistics/+page.svelte

@@ -1,7 +1,17 @@
 <script lang="ts">
-    import type { PageData } from "./$types";
+    import ProjectNavigationBar from "$lib/components/custom/ProjectNavigationBar.svelte";
 
-    export let data: PageData;
+    let { data } = $props();
+    let user = {
+        firstName: "Max",
+        lastName: "Mustermann",
+    };
+    let project = {
+        id: data.projectId,
+        name: `Project ${data.projectId}`,
+    };
 </script>
 
+<ProjectNavigationBar {user} {project} defaultTabValue="statistics" />
+
 <h3>Project {data.projectId} Statistics</h3>

src/routes/readinglist/+page.svelte

@@ -1 +1,10 @@
-<h2>Reading List</h2>
+<script lang="ts">
+    import NavigationBar from "$lib/components/custom/NavigationBar.svelte";
+
+    let user = {
+        firstName: "Max",
+        lastName: "Mustermann",
+    };
+</script>
+
+<NavigationBar {user} pageTitle="Reading List" backRef="/" />

src/routes/settings/+layout.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
+    import NavigationBar from "$lib/components/custom/NavigationBar.svelte";
+
     let { children } = $props();
+
+    let user = {
+        firstName: "Max",
+        lastName: "Mustermann",
+    };
 </script>
 
-<h2>Settings Layout</h2>
+<NavigationBar {user} pageTitle="Settings" backRef="/" />
 
 {@render children()}