diff --git a/src/pages/wiki/[slug]/index.tsx b/src/pages/wiki/[slug]/index.tsx
index 718da65..dd3a031 100644
--- a/src/pages/wiki/[slug]/index.tsx
+++ b/src/pages/wiki/[slug]/index.tsx
@@ -22,9 +22,11 @@ import { cIf, cJoin } from "helpers/className";
import { Terminal } from "components/Cli/Terminal";
import { prettyTerminalBoxedTitle, prettyTerminalUnderlinedTitle } from "helpers/terminal";
import { atoms } from "contexts/atoms";
-import { useAtomGetter } from "helpers/atoms";
+import { useAtomGetter, useAtomSetter } from "helpers/atoms";
import { useFormat } from "hooks/useFormat";
import { getFormat } from "helpers/i18n";
+import { getTocFromMarkdawn, Markdawn, TableOfContents } from "components/Markdown/Markdawn";
+import { ElementsSeparator } from "helpers/component";
/*
* ╭────────╮
@@ -39,6 +41,7 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
const { format } = useFormat();
const router = useRouter();
const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
+ const setSubPanelOpened = useAtomSetter(atoms.layout.subPanelOpened);
const { showLightBox } = useAtomGetter(atoms.lightBox);
const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
items: page.translations,
@@ -50,9 +53,27 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
});
const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
+ const toc = getTocFromMarkdawn(selectedTranslation?.body?.body, selectedTranslation?.title);
+
const subPanel = is3ColumnsLayout ? (