feat: docs flyout menu

Adds a dropdown menu that has one main a tag and flyout sub a tags on hover. The menu is used for the docs entry

Related to #3 / #61

Author: dummdidumm

apps/svelte.dev/src/routes/nav.json/+server.ts

@@ -11,6 +11,7 @@ export const GET = async () => {
 async function get_nav_list(): Promise<NavigationLink[]> {
 	const docs = index.docs.children.map((topic) => ({
 		title: topic.metadata.title,
+		path: '/' + topic.slug, // this will make the UI show a flyout menu for the docs nav entry
 		sections: topic.children.map((section) => ({
 			title: section.metadata.title,
 			sections: section.children.map((page) => ({

packages/site-kit/src/lib/components/LinksDropdown.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import type { NavigationLink } from '../types';
+
+	let { links: _links, prefix }: { links: string[] | NavigationLink; prefix: string } = $props();
+
+	const links = $derived(
+		Array.isArray(_links)
+			? _links.map((l) => ({ title: l, path: l }))
+			: [
+					{ title: _links.title, path: _links.pathname },
+					..._links.sections!.map((s) => ({ title: s.title, path: s.path! }))
+				]
+	);
+</script>
+
+<div class="dropdown">
+	<a
+		href={links[0].path}
+		class="main-action"
+		aria-current={$page.url.pathname.startsWith(`/${prefix}`) ? 'page' : null}>{links[0].title}</a
+	>
+	<nav class="dropdown-content">
+		{#each links.slice(1) as link}
+			<a href={link.path}>{link.title}</a>
+		{/each}
+	</nav>
+</div>
+
+<style>
+	.dropdown {
+		position: relative;
+		display: inline-block;
+	}
+
+	.dropdown-content {
+		display: none;
+		position: absolute;
+		background-color: var(--sk-back-1);
+		min-width: 10rem;
+		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+		z-index: 1;
+		animation: flyout 0.3s ease-in-out;
+	}
+
+	@keyframes flyout {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.dropdown:hover .dropdown-content {
+		display: block;
+	}
+
+	.dropdown-content a {
+		color: var(--sk-text-3);
+		padding: 12px 16px;
+		text-decoration: none;
+		display: block;
+		margin: 0 !important;
+	}
+
+	.dropdown-content a:hover {
+		background-color: var(--sk-back-4);
+	}
+</style>

packages/site-kit/src/lib/components/index.ts

@@ -4,3 +4,4 @@ export { default as Icons } from './Icons.svelte';
 export { default as Section } from './Section.svelte';
 export { default as Shell } from './Shell.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as LinksDropdown } from './LinksDropdown.svelte';

packages/site-kit/src/lib/nav/Nav.svelte

@@ -13,6 +13,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	import Separator from './Separator.svelte';
 	import type { NavigationLink } from '../types';
 	import type { Snippet } from 'svelte';
+	import LinksDropdown from '../components/LinksDropdown.svelte';
 
 	interface Props {
 		home_title?: string;
@@ -103,12 +104,16 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 		<div class="menu">
 			{#each links as link}
-				<a
-					href={link.pathname}
-					aria-current={$page.url.pathname.startsWith(`/${link.prefix}`) ? 'page' : null}
-				>
-					{link.title}
-				</a>
+				{#if link.sections?.[0].path}
+					<LinksDropdown links={link} prefix={link.prefix} />
+				{:else}
+					<a
+						href={link.pathname}
+						aria-current={$page.url.pathname.startsWith(`/${link.prefix}`) ? 'page' : null}
+					>
+						{link.title}
+					</a>
+				{/if}
 			{/each}
 
 			<Separator />

packages/site-kit/src/lib/types.d.ts

@@ -4,8 +4,10 @@ export interface NavigationLink {
 	pathname: string;
 	sections?: {
 		title: string;
+		path?: string;
 		sections: {
 			title: string;
+			path?: string;
 			sections: {
 				title: string;
 				path: string;