Fit ToC styling to theme

src/app.css

@@ -154,20 +154,6 @@
     @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
   }
 
-  /* Sidebar */
-  aside.sidebar-leather {
-    @apply fixed md:sticky top-[130px] sm:top-[146px] h-[calc(100vh-130px)] sm:h-[calc(100vh-146px)] z-10;
-    @apply bg-primary-0 dark:bg-primary-1000 px-5 w-full sm:w-auto sm:max-w-xl;
-  }
-
-  aside.sidebar-leather > div {
-    @apply bg-primary-50 dark:bg-gray-800 h-full px-5 py-0;
-  }
-
-  a.sidebar-item-leather {
-    @apply hover:bg-primary-100 dark:hover:bg-gray-800;
-  }
-
   div.skeleton-leather div {
     @apply bg-primary-100 dark:bg-primary-800;
   }

src/lib/components/publications/Publication.svelte

@@ -37,6 +37,7 @@
   let isLoading = $state<boolean>(false);
   let isDone = $state<boolean>(false);
   let lastElementRef = $state<HTMLElement | null>(null);
+  let activeAddress = $state<string | null>(null);
 
   let observer: IntersectionObserver;
 
@@ -169,7 +170,11 @@
   {#if $publicationColumnVisibility.toc}
     <Sidebar
       activeUrl={`#${activeAddress ?? ''}`}
+      asideClass='fixed md:sticky top-[130px] sm:top-[146px] h-[calc(100vh-130px)] sm:h-[calc(100vh-146px)] z-10 bg-primary-0 dark:bg-primary-1000 px-5 w-80 left-0 pt-4 md:!pr-16 overflow-y-auto rounded-lg border-primary-200 dark:border-primary-800'
+      activeClass='flex items-center p-2 bg-primary-50 dark:bg-primary-800 p-2 rounded-lg'
+      nonActiveClass='flex items-center p-2 hover:bg-primary-50 dark:hover:bg-primary-800 p-2 rounded-lg'
     >
+      <CloseButton onclick={closeToc} class='btn-leather absolute top-4 right-4 hover:bg-primary-50 dark:hover:bg-primary-800' />
       <TableOfContents
         displayMode='sidebar'
         rootAddress={rootAddress}

src/lib/components/publications/TableOfContents.svelte

@@ -73,6 +73,8 @@
     {/each}
   </Accordion>
 {:else}
+  <!-- TODO: Figure out how to style indentations. -->
+  <!-- TODO: Make group title fonts the same as entry title fonts. -->
   <SidebarGroup>
     {#each entries as entry}
       {@const address = entry.address}
@@ -82,12 +84,14 @@
         <SidebarItem
           label={entry.title}
           href={`#${address}`}
+          spanClass='px-2 text-ellipsis'
           onclick={() => onSectionFocused?.(address)}
         />
       {:else}
         {@const childDepth = depth + 1}
         <SidebarDropdownWrapper
           label={entry.title}
+          btnClass='flex items-center p-2 w-full font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-primary-50 dark:text-white dark:hover:bg-primary-800'
           bind:isOpen={
             () => expanded,
             (open) => setEntryExpanded(address, open)

src/lib/components/util/ArticleNav.svelte

@@ -139,8 +139,13 @@
         {/if}
       {/if}
     </div>
-    <div class="flex flex-grow text justify-center items-center">
+    <div class="flex flex-col flex-grow text justify-center items-center">
-      <p class="max-w-[60vw] line-ellipsis"><b class="text-nowrap">{title}</b><span class="whitespace-nowrap">by {@render userBadge(pubkey, author)}</span></p>
+      <p class="max-w-[60vw] line-ellipsis">
+        <b class="text-nowrap">{title}</b>
+      </p>
+      <p>
+        <span class="whitespace-nowrap">by {@render userBadge(pubkey, author)}</span>
+      </p>
     </div>
     <div class="flex justify-end items-center space-x-2 md:min-w-52 min-w-8">
       {#if $publicationColumnVisibility.inner}