Showing directories in v2 in Navigation

Author: ciscoheat

package.json

@@ -155,6 +155,7 @@
 		"@sveltejs/package": "^2.2.6",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/json-schema": "^7.0.15",
+		"@types/node": "^20.11.19",
 		"@types/throttle-debounce": "^5.0.2",
 		"@types/uuid": "^9.0.8",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",

pnpm-lock.yaml

@@ -0,0 +1,10 @@
+import type { LayoutServerLoad } from './$types.js';
+import * as fs from 'fs/promises';
+
+export const load = (async () => {
+	const testDirs = (await fs.readdir('./src/routes/(v2)/v2', { withFileTypes: true }))
+		.filter((d) => d.isDirectory() && !d.name.startsWith('_'))
+		.map((d) => d.name);
+
+	return { testDirs };
+}) satisfies LayoutServerLoad;

src/routes/(v2)/Navigation.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import Navigation from './Navigation.svelte';
+	export let data;
 </script>
 
-<Navigation />
+<Navigation testDirs={data.testDirs} />
 
 <slot />

src/routes/(v2)/v2/+layout.server.ts

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let testDirs: string[];
+</script>
+
+<nav class="flex-list">
+	<ul>
+		<li><a href="/">v1</a></li>
+		<li><a href="/v2">v2</a></li>
+		{#each testDirs as dir}
+			<li><a href="/v2/{dir}">{dir}</a></li>
+		{/each}
+	</ul>
+</nav>
+
+<style lang="scss">
+	.flex-list {
+		position: relative;
+		overflow: hidden;
+	}
+	.flex-list ul {
+		padding: 0;
+		list-style-type: none;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		margin-left: -1px;
+	}
+	.flex-list li {
+		flex-grow: 1;
+		flex-basis: auto;
+		margin: 0;
+		padding: 0 0.2em;
+		text-align: center;
+		border-left: 1px solid #bbb;
+	}
+</style>