From 8bc54c76ae6f27b92afc396d55444ca12c46207f Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Mon, 13 May 2024 00:16:22 -0700
Subject: [PATCH] feat: hide navbar on blog posts to reduce clutter

---
 src/lib/components/Navbar/Navbar.svelte | 23 ++++++++++++++++++-----
 src/lib/components/Toc/TocHeader.svelte |  2 +-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Navbar/Navbar.svelte b/src/lib/components/Navbar/Navbar.svelte
index b415f63..faba6cf 100644
--- a/src/lib/components/Navbar/Navbar.svelte
+++ b/src/lib/components/Navbar/Navbar.svelte
@@ -9,12 +9,21 @@
   import Button from '../ui/button/button.svelte'
   import { Moon, Sun } from 'svelte-radix'
 
-  let current: 'blog' | 'about' | 'home' | 'portfolio' | string
+  let current: 'blogpost' | 'blog' | 'about' | 'home' | 'portfolio' | string
 
   const updateCurrent = () => {
     const path = window.location.pathname
-    if (path === '/') {
-      current = 'home'
+    // if (path === '/') {
+    //   current = 'home'
+    // } else {
+    //   const segments = path.split('/')
+    //   current = segments[1] || 'home'
+    // }
+
+    if (path === '/blog') {
+      current = 'blog'
+    } else if (path.startsWith('/blog')) {
+      current = 'blogpost'
     } else {
       const segments = path.split('/')
       current = segments[1] || 'home'
@@ -24,10 +33,14 @@
   onMount(() => navigating.subscribe(updateCurrent))
 </script>
 
-<nav class="h-16 lg:h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-40 font-serif">
+<nav
+  class="h-16 lg:h-24 bg-background bg-opacity-50 backdrop-blur-lg md:fixed w-full z-40 font-serif"
+  class:fixed={current !== 'blogpost'}
+  class:absolute={current === 'blogpost'}
+>
   <div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
     <Drawer />
-    {#if current === 'blog'}
+    {#if current === 'blog' || current === 'blogpost'}
       <Coredump height="95%" href="/blog" />
     {:else}
       <Name height="95%" href="/" />
diff --git a/src/lib/components/Toc/TocHeader.svelte b/src/lib/components/Toc/TocHeader.svelte
index 15786a5..249a4e9 100644
--- a/src/lib/components/Toc/TocHeader.svelte
+++ b/src/lib/components/Toc/TocHeader.svelte
@@ -23,7 +23,7 @@
   }
 </script>
 
-<nav class="fixed top-16 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden">
+<nav class="sticky top-0 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