diff --git a/website/components/common/colorful.tsx b/website/components/common/colorful.tsx
index 5709499..2ab0f5e 100644
--- a/website/components/common/colorful.tsx
+++ b/website/components/common/colorful.tsx
@@ -35,10 +35,7 @@ export const Colorful = ({ value, interval, backward, colors, ...props }: Colorf
return
{
range(value.length).map((position, i) => {
- let currentPosition = position
- if (backward) {
- currentPosition = (value.length - position)
- }
+ const currentPosition = backward ? (value.length - position) : position
let currentIteration = iteration - currentPosition
if (currentIteration < 0) {
currentIteration = 0
diff --git a/website/components/ui/markdown/code.tsx b/website/components/ui/markdown/code.tsx
index 86342cd..0551353 100644
--- a/website/components/ui/markdown/code.tsx
+++ b/website/components/ui/markdown/code.tsx
@@ -12,7 +12,7 @@ export const CodeBlock = ({ node, inline, className, children, ...props }) => {
{children}
:
{
return
@@ -18,6 +20,16 @@ export const HamburgerMenuElement = ({ href, name, ...props }: any) => {
export const HamburgerModal = ({ onClose, ...props }) => {
const { strings } = useLanguage();
const [exit, setExit] = useState(true);
+ const { pathname } = useRouter();
+ const [showTOC, setShowTOC] = useState(false);
+
+ useEffect(() => {
+ if (["/documentation", "/documentation/[...path]"].includes(pathname)) {
+ setShowTOC(true);
+ } else {
+ setShowTOC(false);
+ }
+ }, [pathname])
useEffect(() => {
setExit(false);
@@ -45,11 +57,14 @@ export const HamburgerModal = ({ onClose, ...props }) => {
{/* Menu */}
-
+
+ {
+ showTOC &&
+ }
diff --git a/website/pages/documentation/[...path].tsx b/website/pages/documentation/[...path].tsx
index 3614c13..d87ae9d 100644
--- a/website/pages/documentation/[...path].tsx
+++ b/website/pages/documentation/[...path].tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { HTMLAttributes, useEffect, useState } from 'react'
import { Colorful } from 'components/common/colorful'
import Configuration from 'config'
@@ -14,6 +14,26 @@ import remarkGfm from 'remark-gfm'
import { useLanguage } from 'contexts/language'
import { useRouter } from 'next/router'
+export const TOC = ({ ...props }: HTMLAttributes
) => {
+ const { strings } = useLanguage();
+ const { query } = useRouter();
+ const [path, setPath] = useState((query.path as string[]) || []);
+
+ useEffect(() => {
+ setPath((query.path as string[]) || [])
+ }, [query])
+
+ return
+ {
+ strings.documentation
+ ? strings.documentation.map((value, i) => {
+ return
+ })
+ : ""
+ }
+
+}
+
const Documentation: NextPage = () => {
const { strings } = useLanguage();
const router = useRouter();
@@ -54,21 +74,15 @@ const Documentation: NextPage = () => {
return
-
+
translatepy {}
- {
- strings.documentation
- ? strings.documentation.map((value, i) => {
- return
- })
- : ""
- }
+
-