Declutter publication navi

src/lib/components/util/ArticleNav.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import TocToggle from "$components/util/TocToggle.svelte";
-  import { EyeOutline, BookOutline,  BookOpenOutline, GlobeOutline } from "flowbite-svelte-icons";
+  import { BookOutline, CaretLeftOutline } from "flowbite-svelte-icons";
   import { Button } from "flowbite-svelte";
   import { publicationColumnVisibility } from "$lib/stores";
   import InlineProfile from "$components/util/InlineProfile.svelte";
@@ -21,7 +21,7 @@
   let pubkey: string = $derived(indexEvent.getMatchingTags('p')[0]?.[1] ?? null);
 
   // Function to toggle column visibility
-  function toggleColumn(column: 'details'|'blog'|'inner'|'social') {
+  function toggleColumn(column: 'blog'|'inner'|'social') {
     publicationColumnVisibility.update(store => {
       store[column] = !store[column]; // Toggle true/false
       if (window.innerWidth < 1140) {
@@ -31,29 +31,32 @@
     });
   }
 
+  function backToMain() {
+    $publicationColumnVisibility.blog = true;
+    $publicationColumnVisibility.inner = false;
+  }
+
 </script>
 
 <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 items-stretch space-x-2 container">
-    <div class="buttons hidden">
-      <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>
-      </Button>
+  <div class="flex flex-wrap space-x-2 container">
+    <div class="flex items-center space-x-2">
       {#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>
+        {#if $publicationColumnVisibility.inner}
+        <Button class='btn-leather !w-auto' outline={true} onclick={backToMain}>
+          <CaretLeftOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Back</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>
+        {/if}
+        <Button class="btn-leather !w-auto {$publicationColumnVisibility.blog ? 'active' : ''}"
+                outline={true} onclick={() => toggleColumn('blog')} >
+          <BookOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Table of Contents</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">
+    <div class="flex text items-center">
         <p class="line-ellipsis"><b>{title}</b> <span>by <InlineProfile pubkey={pubkey} title={author} /></span></p>
     </div>
   </div>