improve TOC style somewhat

src/components/Header.astro

@@ -39,25 +39,21 @@ if (!data) {
   sidebarData = undefined;
 }
 
-const { headings } = Astro.props;
+const {
+  title = null,
+  headings = [],
+} = Astro.props;
 ---
 <div class="header">
   <div class="header-item header-left">
-    {url.length > 2 ?
-      <Nav mobile={true}/>
-      <div class="nav-collapsed-spacer header-spacer"/>
-    : null}
+    <Nav mobile={true}/>
     <h3 class="header-title">
       <a href="/">Quickshell</a>
     </h3>
   </div>
   <div class="header-item header-right">
     <Search/>
-    <div class="header-spacer"/>
     <ThemeSelect client:load />
-    {url.length > 2 ?
-			<div class="toc-collapsed-spacer header-spacer"/>
-      <TOC headings={headings} types={sidebarData} mobile={true}/>
-    : null}
+    <TOC title={title} headings={headings} types={sidebarData} mobile={true}/>
   </div>
 </div>

src/components/hooks/TOCIntersectionObserver.astro

@@ -4,7 +4,7 @@
   window.addEventListener('DOMContentLoaded', () => {
     const observer = new IntersectionObserver(entries => {
       entries.forEach(entry => {
-        const heading = entry.target.querySelector('h2, h3, h4, h5, h6')
+        const heading = entry.target.querySelector('h1, h2, h3, h4, h5, h6')
         if(heading) {
           const id = heading.id
           if (entry.intersectionRatio > 0) {

src/components/marquee/Marquee.astro

@@ -52,7 +52,7 @@ const videos = [
         </video>
         <p>
           Configuration by <Fragment set:html={author}/>
-          {source ? <Fragment>(<a href={source}>source code</a>)</Fragment> : null}
+          {source && <>(<a href={source}>source code</a>)</>}
         </p>
       </div>
     </div>)}

src/components/navigation/sidebars/TOC.astro

@@ -3,19 +3,22 @@ import TableOfContents from "./toc";
 import type { ConfigHeading, TypeTOC } from "./types.d.ts";
 
 export interface Props {
+  title?: string;
   headings?: ConfigHeading[];
   types?: TypeTOC;
   mobile: boolean;
 }
 
-const { headings, types, mobile } = Astro.props;
+const { title, headings, types, mobile } = Astro.props;
 ---
-
-<div id="toc" aria-mobile={mobile} class=`toc-wrapper${mobile ? "-mobile":""}`>
-  <TableOfContents
-    config={headings}
-    type={types}
-    mobile={mobile}
-    client:idle
-  />
-</div>
+{((headings?.length ?? 0) != 0 || types) &&
+  <div id="toc" aria-mobile={mobile} class=`toc-wrapper${mobile ? "-mobile":""}`>
+    <TableOfContents
+      title={title}
+      config={headings}
+      type={types}
+      mobile={mobile}
+      client:idle
+    />
+  </div>
+}

src/components/navigation/sidebars/toc/Table.tsx

@@ -11,15 +11,19 @@ import {
 import { Heading } from "./Heading";
 
 export const Table: Component<{
+  title?: string;
   typeTOC?: TypeTOC;
   configTOC?: ConfigTOC[];
 }> = props => {
-  const { typeTOC, configTOC } = props;
+  const { title, typeTOC, configTOC } = props;
 
   if (configTOC) {
     return (
       <div class="toc-content">
-        <p>Contents</p>
+        {title && <>
+          <p>{title}</p>
+          <hr/>
+        </>}
         <For each={configTOC}>
           {heading => (
             <Heading

src/components/navigation/sidebars/toc/index.tsx

@@ -15,7 +15,7 @@ const TableOfContents: Component<TOCProps> = props => {
   const [open, setOpen] = createSignal<boolean>(false);
   const [clientWidth, setClientWidth] = createSignal<number>(0);
   const [screenWidth, setScreenWidth] = createSignal<number>(0);
-  const { mobile, config, type } = props;
+  const { mobile, title, config, type } = props;
   let tocRef: HTMLDivElement;
 
   function toggle(e: MouseEvent) {
@@ -27,9 +27,10 @@ const TableOfContents: Component<TOCProps> = props => {
     return type ? (
       <Table typeTOC={type} />
     ) : (
-      <Table configTOC={buildHierarchy(config!)} />
+      <Table title={title} configTOC={buildHierarchy(config!)} />
     );
   }
+
   const handleClickOutside = (event: MouseEvent) => {
     const isLink = "href" in (event.target || {});
     const isInBody = document.body.contains(event.target as Node);
@@ -97,7 +98,7 @@ const TableOfContents: Component<TOCProps> = props => {
         {type ? (
           <Table typeTOC={type} />
         ) : (
-          <Table configTOC={buildHierarchy(config!)} />
+          <Table title={title} configTOC={buildHierarchy(config!)} />
         )}
       </div>
     </div>

src/components/navigation/sidebars/types.d.ts

@@ -17,6 +17,7 @@ export interface TreeProps {
 
 // Right
 export interface TOCProps {
+  title?: string;
   config?: ConfigHeading[];
   type?: TypeTableProps;
   mobile: boolean;