THC 854 create toc

package.json

@@ -27,6 +27,7 @@
     "classnames": "^2.3.2",
     "html-escaper": "^3.0.3",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "nanostores": "^0.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -42,6 +43,7 @@
   },
   "devDependencies": {
     "@types/html-escaper": "^3.0.1",
+    "@types/lodash-es": "^4.17.10",
     "@types/node": "^20.8.9",
     "@types/react": "^18.2.32",
     "@types/react-dom": "^18.2.14",

src/components/Header/SidebarToggle.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import type { FC } from "react";
 import { useState, useEffect } from "react";
 
@@ -16,7 +17,10 @@ const MenuToggle: FC = () => {
   return (
     <button
       type="button"
-      className="xs:block lg:hidden top-0 mb-2 z-40 p-0"
+      className={classNames("xs:block lg:hidden top-0 mb-2 z-40 p-0", {
+        "bg-secondary": sidebarShown,
+        "bg-white": !sidebarShown,
+      })}
       id="menu-toggle"
       onClick={() => setSidebarShown(!sidebarShown)}
     >
@@ -29,9 +33,9 @@ const MenuToggle: FC = () => {
         stroke="currentColor"
       >
         <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
           d="M4 6h16M4 12h16M4 18h16"
         />
       </svg>

src/components/Icons/react/ChevronLeft.tsx

@@ -0,0 +1,33 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+const ChevronLeft: FC<IconProps> = (props) => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.265 19.178L7.64 12l6.626-7.178 1.47 1.356L10.36 12l5.374 5.822-1.47 1.356z"
+        fill="currentColor"
+      />
+      <rect
+        x={23.5}
+        y={23.5}
+        width={23}
+        height={23}
+        rx={2.5}
+        transform="rotate(-180 23.5 23.5)"
+        stroke="#000"
+      />
+    </svg>
+  );
+};
+
+export default ChevronLeft;

src/components/Icons/react/ChevronRight.tsx

@@ -0,0 +1,25 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+const ChevronRight: FC<IconProps> = (props) => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.735 4.822L16.36 12l-6.626 7.178-1.47-1.356L13.64 12 8.265 6.178l1.47-1.356z"
+        fill="currentColor"
+      />
+      <rect x={0.5} y={0.5} width={23} height={23} rx={2.5} stroke="#000" />
+    </svg>
+  );
+};
+
+export default ChevronRight;

src/components/LeftSidebar/NavigationItem.tsx

@@ -70,6 +70,7 @@ const LeftSidebarItem: FC<{
       {isOpen
         ? sidebarData?.children?.map((child) => (
             <LeftSidebarItem
+              key={child.path}
               currentPage={currentPage}
               sidebarData={child}
               level={child.level}

src/components/PageBreadcrumbs/PageBreadcrumbs.astro

@@ -18,7 +18,7 @@ const currentPageMatch = currentPage.endsWith("/")
 
 <div aria-label="breadcrumbs" class="mb-8">
   <nav>
-    <ul class="flex flex-row gap-x-6">
+    <ul class="flex flex-row flex-wrap gap-x-6">
       {
         breadcrumbs.map((breadcrumb, i) => (
           <li

src/components/PageContent/PageContent.astro

@@ -1,6 +1,7 @@
 ---
 import type { MarkdownHeading } from "astro";
-import TableOfContents from "../RightSidebar/TableOfContents";
+
+import RightSidebar from "@components/RightSidebar/RightSidebar.astro";
 
 type Props = {
   title: string;
@@ -12,10 +13,14 @@ const { title, headings } = Astro.props;
 
 <article id="article" class="article-main w-full">
   <section class="main-section">
-    <h1 class="content-title" id="overview">{title}</h1>
-    <nav class="block sm:hidden">
-      <TableOfContents client:media="(max-width: 50em)" headings={headings} />
-    </nav>
-    <slot />
+    <h1 class="text-heading-1 font-bold leading-[1] mb-4" id="overview">
+      {title}
+    </h1>
+    <aside title="Table of Contents">
+      <RightSidebar headings={headings} title={title} />
+    </aside>
+    <div class="article-content" id="article-content">
+      <slot />
+    </div>
   </section>
 </article>

src/components/RightSidebar/RightSidebar.astro

@@ -1,16 +1,14 @@
 ---
 import type { MarkdownHeading } from "astro";
+
 import TableOfContents from "./TableOfContents";
 
 type Props = {
   headings: MarkdownHeading[];
+  title: string;
 };
 
-const { headings } = Astro.props;
+const { headings, title } = Astro.props;
 ---
 
-<nav class="w-full sticky top-10" aria-labelledby="grid-right">
-  <div class="h-full p-0 overflow-auto xs:hidden lg:block">
-    <TableOfContents client:visible headings={headings} />
-  </div>
-</nav>
+<TableOfContents client:only="react" headings={headings} title={title} />

src/components/RightSidebar/TableOfContents/CollapsedTOC.tsx

@@ -0,0 +1,22 @@
+import type { FC } from "react";
+
+import ChevronLeft from "@components/Icons/react/ChevronLeft";
+
+interface CollapsedTOCProps {
+  setIsOpened: (value: boolean) => void;
+}
+
+const CollapsedTOC: FC<CollapsedTOCProps> = ({ setIsOpened }) => {
+  return (
+    <div className="xs:hidden lg:fixed top-0 bottom-0 md:right-0 xxl:left-0 mt-32 xxl:ml-[calc(100vw-2rem-(100vw-100rem)/2)] items-start w-8 sm:hidden lg:flex z-10 border-[1px] border-t rounded-tl-lg border-bluish-grey">
+      <button
+        onClick={() => setIsOpened(true)}
+        className="toc-state-button absolute rounded-md mt-8 -ml-4 bg-white z-50 w-6 h-6"
+      >
+        <ChevronLeft />
+      </button>
+    </div>
+  );
+};
+
+export default CollapsedTOC;

src/components/RightSidebar/TableOfContents/TOCMobile.tsx

@@ -0,0 +1,39 @@
+import type { MarkdownHeading } from "astro";
+import type { FC } from "react";
+import { unescape } from "html-escaper";
+
+import "../right-sidebar.css";
+
+interface TableOfContentsMobileProps {
+  onThisPageID: string;
+  toc: React.RefObject<HTMLUListElement>;
+  headingsLocal: MarkdownHeading[];
+}
+
+const TableOfContentsMobile: FC<TableOfContentsMobileProps> = ({
+  onThisPageID,
+  toc,
+  headingsLocal,
+}) => {
+  return (
+    <div className="xs:block lg:hidden border-[1px] p-2 my-4">
+      <h2 id={onThisPageID} className="heading">
+        On this page
+      </h2>
+      <ul ref={toc} className="pl-4">
+        {headingsLocal
+          .filter(({ depth }) => depth > 1 && depth < 4)
+          .map((heading) => (
+            <li
+              key={heading.slug}
+              className={`header-link before:content-none depth-${heading.depth}`}
+            >
+              <a href={`#${heading.slug}`}>{unescape(heading.text)}</a>
+            </li>
+          ))}
+      </ul>
+    </div>
+  );
+};
+
+export default TableOfContentsMobile;