refactor: separate top bar component

web/src/lib/components/kit/ui/TopNav.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+</script>
+
+<nav class="nav">
+	<a href={resolve("/preview/demo")}>Workspace</a>
+	<a href={resolve("/preview/list-tools")}>Catalog</a>
+	<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
+	<a href={resolve("/preview/tools/remove-background-png")}>
+		Background remover
+	</a>
+</nav>
+
+<style>
+	.nav {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xxl);
+		margin-right: var(--space-xxxl);
+		margin-left: auto;
+	}
+	.nav a {
+		color: var(--color-text);
+		font: bold var(--font-text) var(--font-mono);
+		white-space: nowrap;
+		text-decoration: none;
+	}
+	.nav a:hover {
+		color: var(--color-main);
+	}
+</style>