Added navigation bar component

package.json

@@ -26,6 +26,7 @@
         "@testing-library/svelte": "^5.2.4",
         "@types/eslint": "^9.6.0",
         "autoprefixer": "^10.4.20",
+        "bits-ui": "^1.0.0-next.51",
         "clsx": "^2.1.1",
         "@types/node": "^22.9.0",
         "@vitest/coverage-v8": "^2.1.5",
@@ -34,6 +35,7 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.36.0",
         "globals": "^15.12.0",
+        "lucide-svelte": "^0.456.0",
         "postcss": "^8.4.49",
         "jsdom": "^25.0.1",
         "prettier": "^3.3.2",

src/app.d.ts

@@ -7,7 +7,24 @@ declare global {
         // interface PageData {}
         // interface PageState {}
         // interface Platform {}
+        interface Paper {
+            readonly id: number;
+            readonly data: PaperData;
+        }
+        interface PaperData {
+            readonly title: string;
+            readonly authors: string[];
+            readonly isBookmarked?: boolean;
+        }
+        interface Project {
+            readonly id: number;
+            readonly name: string;
+        }
+        interface User {
+            readonly firstName: string;
+            readonly lastName: string;
+        }
     }
 }
 
-export {};
+export { Paper, Project, User, PaperData };

src/lib/components/composites/navigation-bar/NavigationBar.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import ArrowLeft from "lucide-svelte/icons/arrow-left";
+    import * as Card from "$lib/components/primitives/card/index.js";
+    import * as Tabs from "$lib/components/primitives/tabs/index.js";
+    import type { Snippet } from "svelte";
+    import UserMenu from "./UserMenu.svelte";
+    import type { Tab } from "$lib/components/composites/navigation-bar/navigation-bar";
+    import type { User } from "../../../../app";
+
+    interface Props {
+        user: User;
+        backRef?: string | undefined;
+        tabs: Tab[];
+        defaultTabValue: (typeof tabs)[number]["value"];
+        children?: Snippet | undefined;
+    }
+
+    const {
+        user,
+        backRef = undefined,
+        tabs,
+        defaultTabValue,
+        children = undefined,
+    }: Props = $props();
+</script>
+
+<header>
+    <Card.Root class="shadow-lg w-fit">
+        <nav class="grid grid-flow-col gap-3 items-center px-4 py-3">
+            <UserMenu {user} />
+            {#if backRef !== undefined}
+                <a href={backRef}><ArrowLeft class="w-6 h-6" /></a>
+            {/if}
+            <!-- Children can be e.g. a title element -->
+            {@render children?.()}
+            {#if tabs.length > 0}
+                <Tabs.Root value={defaultTabValue}>
+                    <Tabs.List>
+                        {#each tabs as tab}
+                            <a href={tab.href}>
+                                <Tabs.Trigger value={tab.value}>
+                                    <span>{tab.label}</span>
+                                </Tabs.Trigger>
+                            </a>
+                        {/each}
+                    </Tabs.List>
+                </Tabs.Root>
+            {/if}
+        </nav>
+    </Card.Root>
+</header>

src/lib/components/composites/navigation-bar/PaperNavigationBar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import NavigationBar from "./NavigationBar.svelte";
+    import PaperInfo from "../paper-components/PaperInfo.svelte";
+    import type { PaperData, User } from "../../../../app";
+
+    interface Props {
+        user: User;
+        backRef?: string | undefined;
+        paper: { id: number | undefined; data: PaperData };
+    }
+
+    const { user, backRef, paper }: Props = $props();
+</script>
+
+<NavigationBar {user} {backRef} tabs={[]} defaultTabValue="">
+    <PaperInfo {paper} />
+</NavigationBar>

src/lib/components/composites/navigation-bar/ProjectNavigationBar.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import SimpleNavigationBar from "./SimpleNavigationBar.svelte";
+    import type { Tab } from "$lib/components/composites/navigation-bar/navigation-bar";
+    import type { Project, User } from "../../../../app";
+
+    type TabValue = (typeof tabs)[number]["value"];
+    interface Props {
+        user: User;
+        project: Project;
+        defaultTabValue: TabValue;
+    }
+
+    const { user, project, defaultTabValue }: Props = $props();
+    const tabs = [
+        {
+            value: "dashboard",
+            label: "Dashboard",
+            href: `/project/${project.id}/dashboard`,
+        },
+        {
+            value: "papers",
+            label: "Papers",
+            href: `/project/${project.id}/papers`,
+        },
+        {
+            value: "statistics",
+            label: "Statistics",
+            href: `/project/${project.id}/statistics`,
+        },
+        {
+            value: "settings",
+            label: "Settings",
+            href: `/project/${project.id}/settings/general`,
+        },
+    ] as const;
+</script>
+
+<SimpleNavigationBar
+    {user}
+    backRef="/"
+    title={project.name}
+    tabs={tabs as unknown as Tab[]}
+    {defaultTabValue}
+/>

src/lib/components/composites/navigation-bar/SimpleNavigationBar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import NavigationBar from "./NavigationBar.svelte";
+    import type { Tab } from "$lib/components/composites/navigation-bar/navigation-bar";
+    import type { User } from "../../../../app";
+
+    interface Props {
+        user: User;
+        backRef?: string | undefined;
+        title: string;
+        tabs: Tab[];
+        defaultTabValue: (typeof tabs)[number]["value"];
+    }
+
+    const { user, backRef = undefined, title, tabs, defaultTabValue }: Props = $props();
+</script>
+
+<NavigationBar {user} {backRef} {tabs} {defaultTabValue}>
+    <h2 class="place-content-center truncate">{title}</h2>
+</NavigationBar>