Update ArticleNav

src/lib/components/util/ArticleNav.svelte

@@ -5,24 +5,6 @@
   import { publicationColumnVisibility } from "$lib/stores";
   import InlineProfile from "$components/util/InlineProfile.svelte";
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
-  import { onMount } from 'svelte';
-  import { fade } from 'svelte/transition';
-
-  let scrollY = $state(0);
-
-  // Run this every time the scroll event happens
-  function updateScroll() {
-    scrollY = window.scrollY;
-  }
-
-  onMount(() => {
-    window.addEventListener('scroll', updateScroll);
-    updateScroll(); // Set initial value
-
-    return () => {
-      window.removeEventListener('scroll', updateScroll);
-    };
-  });
 
   let {
     rootId,
@@ -51,31 +33,28 @@
 
 </script>
 
-<nav class="Navbar navbar-leather sticky top-[75px] w-full min-h-[70px] px-2 sm:px-4 py-2.5 z-10">
+<nav class="Navbar navbar-leather flex sticky top-[76px] w-full min-h-[70px] px-2 sm:px-4 py-2.5 z-10">
-  <div class="mx-auto flex flex-wrap justify-around space-x-2 container">
+  <div class="mx-auto flex flex-wrap justify-around items-stretch space-x-2 container">
-    {#if scrollY < 100}
+    <div class="buttons hidden">
-      <div class="buttons" transition:fade={{ duration: 300 }}>
+      <Button class='btn-leather !w-auto hidden' outline={true} onclick={() => toggleColumn('details')} >
-        <Button class='btn-leather !w-auto hidden' outline={true} onclick={() => toggleColumn('details')} >
+        <EyeOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Details</span>
-          <EyeOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Details</span>
+      </Button>
+      {#if publicationType === 'blog'}
+        <Button class='btn-leather !w-auto hidden' outline={true} onclick={() => toggleColumn('blog')} >
+          <BookOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Table of Contents</span>
         </Button>
-        {#if publicationType === 'blog'}
+        <Button class='btn-leather !w-auto hidden' outline={true} onclick={() => toggleColumn('inner')} >
-          <Button class='btn-leather !w-auto hidden' outline={true} onclick={() => toggleColumn('blog')} >
+          <BookOpenOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Content</span>
-            <BookOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Table of Contents</span>
-          </Button>
-          <Button class='btn-leather !w-auto hidden' outline={true} onclick={() => toggleColumn('inner')} >
-            <BookOpenOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Content</span>
-          </Button>
-        {:else}
-          <TocToggle rootId={rootId} />
-        {/if}
-        <Button class='btn-leather !w-auto hidden' outline={true} onclick={() => toggleColumn('social')} >
-          <GlobeOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Social</span>
         </Button>
+      {:else}
+        <TocToggle rootId={rootId} />
+      {/if}
+      <Button class='btn-leather !w-auto hidden' outline={true} onclick={() => toggleColumn('social')} >
+        <GlobeOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Social</span>
+      </Button>
+    </div>
+    <div class="flex text max-w-full items-center">
+        <p class="line-ellipsis"><b>{title}</b> <span>by <InlineProfile pubkey={pubkey} title={author} /></span></p>
       </div>
-    {:else if scrollY > 200 }
-      <div class="text max-w-full" transition:fade={{ duration: 300 }}>
-        <p class="line-ellipsis"><b>{title}</b><br><span>by <InlineProfile pubkey={pubkey} title={author} /></span></p>
-      </div>
-    {/if}
   </div>
 </nav>

src/routes/publication/+page.svelte

@@ -46,14 +46,14 @@
   <meta name="twitter:image" content="{image}" />
 </svelte:head>
 
-{#key data}
-  <ArticleNav publicationType={data.publicationType} rootId={data.parser.getRootIndexId()} indexEvent={data.indexEvent} />
-{/key}
 
 <main class="publication {data.publicationType}">
   {#await data.waitable}
     <TextPlaceholder divClass='skeleton-leather w-full' size="xxl" />
   {:then}
+    {#key data}
+      <ArticleNav publicationType={data.publicationType} rootId={data.parser.getRootIndexId()} indexEvent={data.indexEvent} />
+    {/key}
     <Publication
       rootAddress={data.indexEvent.tagAddress()}
       publicationType={data.publicationType}