{badgeNumber}
diff --git a/src/components/Inputs/Switch.tsx b/src/components/Inputs/Switch.tsx index f7b1a7f..fd3a74d 100644 --- a/src/components/Inputs/Switch.tsx +++ b/src/components/Inputs/Switch.tsx @@ -21,10 +21,14 @@ export const Switch = ({ value, onClick, className, disabled = false }: Props):
{
diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx
index ca9ddea..67d85ce 100644
--- a/src/components/Markdown/Markdawn.tsx
+++ b/src/components/Markdown/Markdawn.tsx
@@ -1,5 +1,5 @@
import Markdown from "markdown-to-jsx";
-import React, { Fragment, useMemo } from "react";
+import React, { Fragment, MouseEventHandler, useMemo } from "react";
import ReactDOMServer from "react-dom/server";
import { HorizontalLine } from "components/HorizontalLine";
import { Img } from "components/Img";
@@ -218,13 +218,13 @@ export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Eleme
interface TableOfContentsProps {
text: string;
title?: string;
- horizontalLine?: boolean;
+ onContentClicked?: MouseEventHandler;
}
export const TableOfContents = ({
text,
title,
- horizontalLine = false,
+ onContentClicked,
}: TableOfContentsProps): JSX.Element => {
const { format } = useFormat();
const toc = getTocFromMarkdawn(preprocessMarkDawn(text), title);
@@ -233,17 +233,20 @@ export const TableOfContents = ({
<>
{toc.children.length > 0 && (
<>
- {horizontalLine && ;
}
const TocLevel = ({
tocchildren,
parentNumbering,
allowIntersection = true,
+ onContentClicked,
}: LevelProps): JSX.Element => {
const ids = useMemo(() => tocchildren.map((child) => child.slug), [tocchildren]);
const currentIntersection = useIntersectionList(ids);
@@ -354,7 +359,7 @@ const TocLevel = ({
cIf(allowIntersection && currentIntersection === childIndex, "text-dark")
)}>
{`${parentNumbering}${childIndex + 1}.`}{" "}
-
+
{{child.title}}
@@ -362,6 +367,7 @@ const TocLevel = ({
tocchildren={child.children}
parentNumbering={`${parentNumbering}${childIndex + 1}.`}
allowIntersection={allowIntersection && currentIntersection === childIndex}
+ onContentClicked={onContentClicked}
/>
))}
diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx
index 7c582d0..e8d20f3 100644
--- a/src/components/PanelComponents/NavOption.tsx
+++ b/src/components/PanelComponents/NavOption.tsx
@@ -23,7 +23,7 @@ interface Props {
reduced?: boolean;
active?: boolean;
disabled?: boolean;
- onClick?: MouseEventHandler;
+ onClick?: MouseEventHandler;
}
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx
index 6d15879..bacb85a 100644
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from "react";
import { HorizontalLine } from "components/HorizontalLine";
import { Button } from "components/Inputs/Button";
import { NavOption } from "components/PanelComponents/NavOption";
@@ -21,6 +22,8 @@ export const MainPanel = (): JSX.Element => {
const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
const { format } = useFormat();
const [isMainPanelReduced, setMainPanelReduced] = useAtomPair(atoms.layout.mainPanelReduced);
+ const setMainPanelOpened = useAtomSetter(atoms.layout.mainPanelOpened);
+ const closeMainPanel = useCallback(() => setMainPanelOpened(false), [setMainPanelOpened]);
const setSettingsOpened = useAtomSetter(atoms.layout.settingsOpened);
const setSearchOpened = useAtomSetter(atoms.layout.searchOpened);
@@ -53,7 +56,10 @@ export const MainPanel = (): JSX.Element => {
)}
{format("table_of_contents")}
- + {{toc.title}}
-
-
+
{
placement={isMainPanelReduced ? "right" : "top"}>