simplify nav (#8736)

* simplify nav * updates * fix link * Dont need this anymore * bump --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
sveltejs · Jun 16, 2023 · e964254 · e964254
1 parent aa8cc5d
commit e964254
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 75 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json
@@ -29,7 +29,7 @@
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-vercel": "^3.0.0",
 		"@sveltejs/kit": "^1.20.0",
-		"@sveltejs/site-kit": "6.0.0-next.3",
+		"@sveltejs/site-kit": "6.0.0-next.4",
 		"@sveltejs/vite-plugin-svelte": "^2.4.1",
 		"@types/marked": "^5.0.0",
 		"@types/node": "^20.2.6",

diff --git a/sites/svelte.dev/src/global.d.ts b/sites/svelte.dev/src/global.d.ts
diff --git a/sites/svelte.dev/src/routes/+layout.server.js b/sites/svelte.dev/src/routes/+layout.server.js
@@ -24,6 +24,9 @@ function get_nav_title(url) {
 	return '';
 }
 
+/**
+ * @returns {Promise<import('@sveltejs/site-kit').NavigationLink[]>}
+ */
 async function get_nav_context_list() {
 	const docs_list = get_docs_list(get_docs_data());
 	const processed_docs_list = docs_list.map(({ title, pages }) => ({
@@ -58,17 +61,42 @@ async function get_nav_context_list() {
 		}))
 		.filter(({ title }) => title !== 'Embeds');
 
-	return {
-		docs: processed_docs_list,
-		blog: processed_blog_list,
-		tutorial: processed_tutorial_list,
-		examples: processed_examples_list
-	};
+	return [
+		{
+			title: 'Tutorial',
+			prefix: 'tutorial',
+			pathname: '/tutorial',
+			sections: processed_tutorial_list
+		},
+		{
+			title: 'Docs',
+			prefix: 'docs',
+			pathname: '/docs/introduction',
+			sections: processed_docs_list
+		},
+		{
+			title: 'Examples',
+			prefix: 'examples',
+			pathname: '/examples',
+			sections: processed_examples_list
+		},
+		{
+			title: 'REPL',
+			prefix: 'repl',
+			pathname: '/repl'
+		},
+		{
+			title: 'Blog',
+			prefix: 'blog',
+			pathname: '/blog',
+			sections: processed_blog_list
+		}
+	];
 }
 
 export const load = async ({ url }) => {
 	return {
 		nav_title: get_nav_title(url),
-		nav_context_list: get_nav_context_list()
+		nav_links: get_nav_context_list()
 	};
 };
diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
@@ -2,9 +2,11 @@
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { Icon, Shell } from '@sveltejs/site-kit/components';
-	import { Nav, NavItem, Separator } from '@sveltejs/site-kit/nav';
+	import { Nav, Separator } from '@sveltejs/site-kit/nav';
 	import { Search, SearchBox } from '@sveltejs/site-kit/search';
 	import '@sveltejs/site-kit/styles/index.css';
+
+	export let data;
 </script>
 
 <svelte:head>
@@ -17,7 +19,7 @@
 
 <div style:display={$page.url.pathname !== '/docs' ? 'contents' : 'none'}>
 	<Shell nav_visible={$page.url.pathname !== '/repl/embed'}>
-		<Nav slot="top-nav">
+		<Nav slot="top-nav" title={data.nav_title} links={data.nav_links}>
 			<svelte:fragment slot="home-large">
 				<strong>svelte</strong>.dev
 			</svelte:fragment>
@@ -26,62 +28,24 @@
 				<strong>svelte</strong>
 			</svelte:fragment>
 
-			<svelte:fragment slot="nav-center">
+			<svelte:fragment slot="search">
 				{#if $page.url.pathname !== '/search'}
-					<li><Search /></li>
+					<Search />
 				{/if}
 			</svelte:fragment>
 
-			<svelte:fragment slot="nav-right">
-				<NavItem
-					href="/tutorial"
-					selected={$page.url.pathname.startsWith('/tutorial') || null}
-					relatedMenuName="tutorial"
-				>
-					Tutorial
-				</NavItem>
-
-				<NavItem
-					href="/docs/introduction"
-					selected={$page.url.pathname.startsWith('/docs') || null}
-					relatedMenuName="docs"
-				>
-					Docs
-				</NavItem>
-
-				<NavItem
-					href="/examples"
-					selected={$page.url.pathname.startsWith('/examples') || null}
-					relatedMenuName="examples"
-				>
-					Examples
-				</NavItem>
-
-				<NavItem href="/repl" selected={$page.url.pathname.startsWith('/repl') || null}>
-					REPL
-				</NavItem>
-
-				<NavItem
-					href="/blog"
-					selected={$page.url.pathname.startsWith('/blog') || null}
-					relatedMenuName="blog"
-				>
-					Blog
-				</NavItem>
-
-				<Separator />
-
-				<NavItem href="https://kit.svelte.dev" external>SvelteKit</NavItem>
+			<svelte:fragment slot="external-links">
+				<a href="https://kit.svelte.dev">SvelteKit</a>
 
-				<NavItem href="/chat" external title="Discord Chat">
-					<span slot="small">Discord</span>
-					<Icon name="discord" />
-				</NavItem>
+				<a href="/chat" title="Discord Chat">
+					<span class="small">Discord</span>
+					<span class="large"><Icon name="discord" /></span>
+				</a>
 
-				<NavItem href="https://github.com/sveltejs/svelte" external title="GitHub Repo">
-					<span slot="small">GitHub</span>
-					<Icon name="github" />
-				</NavItem>
+				<a href="https://github.com/sveltejs/svelte" title="GitHub Repo">
+					<span class="small">GitHub</span>
+					<span class="large"><Icon name="github" /></span>
+				</a>
 			</svelte:fragment>
 		</Nav>