[update] docs responsiveness

Animenosekai · Jun 27, 2022 · f507f1a · f507f1a · vercel · Jun 27, 2022
1 parent b87145d
commit f507f1a
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 16 deletions.
diff --git 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 <div {...props}>
         {
             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
@@ -12,7 +12,7 @@ export const CodeBlock = ({ node, inline, className, children, ...props }) => {
         <code className="rounded bg-slate-100 m-0 text-[85%] py-[0.2em] px-[.4em]">{children}</code>
         : <div className='rounded-sm overflow-hidden w-max h-max'>
             <Lowlight
-                className="overflow-x-auto w-[80vw] text-[85%] my-4"
+                className="overflow-x-auto w-[calc(100vw-2rem)] sm:w-[66vw] md:w-[71vw] lg:w-[78vw] xl:w-[80vw] text-[85%] my-4"
                 value={String(children).replace(/\n$/, '')}
                 language={common.includes((match && match[1])) ? match[1] : undefined}
                 inline={inline}

diff --git a/website/components/ui/modals/hamburger.tsx b/website/components/ui/modals/hamburger.tsx
@@ -2,8 +2,10 @@ import { useEffect, useState } from "react";
 
 import { CloseIcon } from "components/icons/close";
 import Link from "next/link";
+import { TOC } from "pages/documentation/[...path]";
 import classNames from "classnames";
 import { useLanguage } from "contexts/language";
+import { useRouter } from "next/router";
 
 export const HamburgerMenuElement = ({ href, name, ...props }: any) => {
     return <Link passHref={true} href={href}>
@@ -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 }) => {
             <CloseIcon className="absolute top-0 right-0 mx-10 my-5 cursor-pointer opacity-60 hover:opacity-100 transition" onClick={clickHandler} />
             {/* <span className="text-xl justify-center">Menu</span> */}
             <div className="h-12"></div>
-            <div className="w-full">
+            <div className="w-full overflow-y-auto">
                 <hr />
                 <HamburgerMenuElement onClick={clickHandler} href="/translate" name={strings.pages.translate} />
                 <hr />
                 <HamburgerMenuElement onClick={clickHandler} href="/documentation" name={strings.pages.documentation} />
+                {
+                    showTOC && <TOC onClick={clickHandler} className="ml-6" />
+                }
                 <hr />
                 <HamburgerMenuElement onClick={clickHandler} href="/stats" name={strings.pages.stats} />
                 <hr />

diff --git 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<HTMLDivElement>) => {
+    const { strings } = useLanguage();
+    const { query } = useRouter();
+    const [path, setPath] = useState<string[]>((query.path as string[]) || []);
+
+    useEffect(() => {
+        setPath((query.path as string[]) || [])
+    }, [query])
+
+    return <div {...props}>
+        {
+            strings.documentation
+                ? strings.documentation.map((value, i) => {
+                    return <TableOfContent data={value} key={i} level={1} query={path} />
+                })
+                : ""
+        }
+    </div>
+}
+
 const Documentation: NextPage = () => {
     const { strings } = useLanguage();
     const router = useRouter();
@@ -54,21 +74,15 @@ const Documentation: NextPage = () => {
     return <div className='h-full'>
         <SEO title='translatepy — Documentation' description='Learn how to use translatepy!' />
         <div className='flex gap-2 w-screen'>
-            <div className="p-5 ml-3 overflow-y-auto h-1/2 w-max flex flex-col -mt-5 gap-2 sticky top-0">
+            <div className="p-5 ml-3 overflow-y-auto h-1/2 w-max flex-col -mt-5 gap-2 sticky top-0 sm:flex hidden">
                 <Link passHref={true} href="/documentation">
                     <a>
                         <span className='mx-auto self-center text-xl font-semibold m-5 cursor-pointer'>translatepy {<Colorful value='docs' />}</span>
                     </a>
                 </Link>
-                {
-                    strings.documentation
-                        ? strings.documentation.map((value, i) => {
-                            return <TableOfContent data={value} key={i} level={1} query={path} />
-                        })
-                        : ""
-                }
+                <TOC />
             </div>
-            <div className='w-3/4 mb-5'>
+            <div className='sm:w-3/4 sm:mx-0 mb-5 w-full mx-5'>
                 <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} components={MarkdownComponent}>{content}</ReactMarkdown>
             </div>
         </div>