From 368700fb87f9ce106f95aca358cd2fd8c8e65925 Mon Sep 17 00:00:00 2001
From: Hubert Koster
 <hubertkoster@Hubert-Kosters-MacBook-Pro-C02F1N65MD6M.local>
Date: Thu, 6 Apr 2023 14:19:01 +0200
Subject: [PATCH] chore: swizzling and adjusting tableofcontents

---
 src/theme/TOC/index.js          | 20 ++++++++++++++++++++
 src/theme/TOC/styles.module.css | 24 ++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/theme/TOC/index.js
 create mode 100644 src/theme/TOC/styles.module.css

diff --git a/src/theme/TOC/index.js b/src/theme/TOC/index.js
new file mode 100644
index 000000000..bc8db27fb
--- /dev/null
+++ b/src/theme/TOC/index.js
@@ -0,0 +1,20 @@
+/* eslint-disable */
+import React from 'react';
+import clsx from 'clsx';
+import TOCItems from '@theme/TOCItems';
+import styles from './styles.module.css';
+// Using a custom className
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
+export default function TOC({ className, ...props }) {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+    </div>
+  );
+}
diff --git a/src/theme/TOC/styles.module.css b/src/theme/TOC/styles.module.css
new file mode 100644
index 000000000..73d1a773e
--- /dev/null
+++ b/src/theme/TOC/styles.module.css
@@ -0,0 +1,24 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+.tableOfContents li a {
+  color: var(--ifm-toc-link-color);
+}
+
+.tableOfContents li a:hover {
+  color: unset;
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}