refactor: isolate tocstore and move tocheader into navbar

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 {

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 {

src/lib/stores.ts

@@ -0,0 +1,3 @@
+import { createTocStore } from '@svelte-put/toc';
+
+export const tocStore = createTocStore();

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';
-
+	import { tocStore } from '$lib/stores';
-	const tocStore = createTocStore();
 
 	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