From b6802e93d8621efb82c3cdb61c8c45175740af9f Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sun, 7 Apr 2024 14:45:09 -0700
Subject: [PATCH] refactor: isolate tocstore and move tocheader into navbar

---
 src/lib/components/Navbar/Navbar.svelte    | 15 +++++++++++++++
 src/lib/components/Toc/TocHeader.svelte    |  9 ++++++---
 src/lib/stores.ts                          |  3 +++
 src/routes/blog/[year]/[slug]/+page.svelte |  7 ++-----
 4 files changed, 26 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/stores.ts

diff --git a/src/lib/components/Navbar/Navbar.svelte b/src/lib/components/Navbar/Navbar.svelte
index e142629..643a7ac 100644
--- a/src/lib/components/Navbar/Navbar.svelte
+++ b/src/lib/components/Navbar/Navbar.svelte
@@ -8,8 +8,11 @@
 	import ThemePicker from '../ThemePicker.svelte';
 	import Button from '../ui/button/button.svelte';
 	import { Moon, Sun } from 'svelte-radix';
+	import { tocStore } from '$lib/stores';
+	import TocHeader from '../Toc/TocHeader.svelte';
 
 	let current: 'blog' | 'about' | 'home' | 'portfolio' | string;
+	let readingPost = false;
 
 	const updateCurrent = () => {
 		const path = window.location.pathname;
@@ -17,8 +20,17 @@
 			current = 'home';
 		} else {
 			const segments = path.split('/');
+
 			current = segments[1] || 'home';
+			if (current === 'blog' && segments.length > 2) {
+				readingPost = true;
+				console.log(readingPost);
+			} else {
+				readingPost = false;
+				console.log(readingPost);
+			}
 		}
+		console.log(current);
 	};
 
 	onMount(() => {
@@ -66,6 +78,9 @@
 	</div>
 	<Separator />
 </nav>
+{#if readingPost}
+	<TocHeader {tocStore} placeholder="On this page" />
+{/if}
 
 <style lang="postcss">
 	.selected {
diff --git a/src/lib/components/Toc/TocHeader.svelte b/src/lib/components/Toc/TocHeader.svelte
index b247579..9e7d5a7 100644
--- a/src/lib/components/Toc/TocHeader.svelte
+++ b/src/lib/components/Toc/TocHeader.svelte
@@ -4,7 +4,7 @@
 	import { Accordion } from 'bits-ui';
 	import { toclink } from '@svelte-put/toc';
 	import { CaretDown } from 'svelte-radix';
-	import { slide } from 'svelte/transition';
+	import { fly, slide } from 'svelte/transition';
 
 	export let tocStore: TocStore;
 	export let placeholder: string;
@@ -23,7 +23,10 @@
 	};
 </script>
 
-<nav class="fixed top-24 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden">
+<div
+	transition:fly={{ y: -50, duration: 300 }}
+	class="fixed top-24 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden"
+>
 	<Accordion.Root class="px-8" bind:value>
 		<Accordion.Item value="toc">
 			<Accordion.Trigger
@@ -55,7 +58,7 @@
 		</Accordion.Item>
 	</Accordion.Root>
 	<Separator />
-</nav>
+</div>
 
 <style lang="postcss">
 	.highlighted {
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
new file mode 100644
index 0000000..bf7b017
--- /dev/null
+++ b/src/lib/stores.ts
@@ -0,0 +1,3 @@
+import { createTocStore } from '@svelte-put/toc';
+
+export const tocStore = createTocStore();
diff --git a/src/routes/blog/[year]/[slug]/+page.svelte b/src/routes/blog/[year]/[slug]/+page.svelte
index b53ce34..2e6a63a 100644
--- a/src/routes/blog/[year]/[slug]/+page.svelte
+++ b/src/routes/blog/[year]/[slug]/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import Article from '$lib/components/Blog/Article.svelte';
-	import { toc, createTocStore } from '@svelte-put/toc';
+	import { toc } from '@svelte-put/toc';
 	import StickyToc from '$lib/components/Toc/StickyToc.svelte';
 	import TocHeader from '$lib/components/Toc/TocHeader.svelte';
-
-	const tocStore = createTocStore();
+	import { tocStore } from '$lib/stores';
 
 	export let data: PageData;
 
@@ -29,8 +28,6 @@
 	<meta name="author" content="Youwen Wu" />
 </svelte:head>
 
-<TocHeader {tocStore} placeholder="On this page" />
-
 <div class="lg:flex mx-auto mt-24 lg:mt-14 px-4">
 	<div class="flex-shrink xl:basis-1/4" />
 	<main