improve TOC style somewhat

Still needs considerable work

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) + (types?.length ?? 0) != 0 &&
+  <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;