chore: update sidebar and widgets styles

I'm now using a widget that can be expanded/collapsed. It also allows
me to handle more effectively widgets overflow and to avoid styles
repetitions.
However, with stylelint rule "no-descending-specificity", I'm not sure
if the stylesheets are really logical... Maybe I should deactivate this
rule.

1 files changed, 30 insertions, 0 deletions

diff --git a/src/components/Widgets/ToC/ToC.tsx b/src/components/Widgets/ToC/ToC.tsx
new file mode 100644
index 0000000..6010354
--- /dev/null
+++ b/src/components/Widgets/ToC/ToC.tsx
@@ -0,0 +1,30 @@
+import { ExpandableWidget, OrderedList } from '@components/WidgetParts';
+import { t } from '@lingui/macro';
+import { Heading } from '@ts/types/app';
+import useHeadingsTree from '@utils/hooks/useHeadingsTree';
+
+const ToC = () => {
+  const headingsTree = useHeadingsTree('article');
+  const title = t`Table of contents`;
+
+  const getItems = (headings: Heading[]) => {
+    return headings.map((heading) => {
+      return (
+        <li key={heading.id}>
+          <a href={`#${heading.id}`}>{heading.title}</a>
+          {heading.children.length > 0 && (
+            <OrderedList items={getItems(heading.children)} />
+          )}
+        </li>
+      );
+    });
+  };
+
+  return (
+    <ExpandableWidget title={title} expand={true} withBorders={true}>
+      <OrderedList items={getItems(headingsTree)} />
+    </ExpandableWidget>
+  );
+};
+
+export default ToC;