Mobile friendly

Author: CodeStix

articles/Custom-input.md

@@ -4,7 +4,7 @@ If the default input types (FormInput, FormSelect ...) do not provide enough fun
 
 ![custom input](https://raw.githubusercontent.com/wiki/CodeStix/typed-react-form/images/custominput.gif)
 
-Custom input that shows an error when needed, paints gray background when modified, gets disabled when submitting and shows its defaultValue as a placeholder. You can tweak this custom input further by implementing transformations for different input types, allowing `HTMLInputAttributes` etc.
+The following code resembles a custom input component that shows an error when needed, paints gray background when modified, gets disabled when submitting and shows its defaultValue as a placeholder. You can tweak this custom input further by implementing transformations for different input types, allowing `HTMLInputAttributes` etc.
 
 ```jsx
 function CustomInput<T>(props: { form: FormState<T>; name: keyof T; children?: React.ReactNode }) {

components/NavBar.tsx

@@ -3,7 +3,8 @@ import styled from "styled-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGithub, faGithubAlt, faGithubSquare } from "@fortawesome/free-brands-svg-icons";
 import Link from "next/link";
-import { faBook } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faBook } from "@fortawesome/free-solid-svg-icons";
+import { useEffect, useState } from "react";
 
 const Name = styled.span`
     cursor: pointer;
@@ -12,6 +13,10 @@ const Name = styled.span`
     font-size: 1.5rem;
     color: #2065af;
     margin-right: auto;
+
+    @media only screen and (max-width: 600px) {
+        font-size: 1.2rem;
+    }
 `;
 
 const NavItem = styled.a`
@@ -37,7 +42,16 @@ const Icon = styled(FontAwesomeIcon)`
     /* color: #195daa; */
 `;
 
-export function NavBar() {
+function useWindowWidth() {
+    const [windowWidth, setWindowWidth] = useState(1200);
+    useEffect(() => {
+        setWindowWidth(window.innerWidth);
+    }, []);
+    return windowWidth;
+}
+
+export function NavBar(props: { onMenu: () => void }) {
+    const windowWidth = useWindowWidth();
     return (
         <CenterContainer>
             <Container>
@@ -47,14 +61,26 @@ export function NavBar() {
                         &nbsp;Typed React Form
                     </Name>
                 </Link>
-                <Link href="https://github.com/codestix/typed-react-form" passHref>
+
+                {/* <Link href="https://github.com/codestix/typed-react-form" passHref>
                     <NavItem>GitHub</NavItem>
-                </Link>
+                </Link> */}
+
                 <Link href="https://github.com/codestix/typed-react-form" passHref>
                     <NavItem>
                         <Icon icon={faGithub} />
                     </NavItem>
                 </Link>
+
+                {windowWidth < 600 && (
+                    <NavItem
+                        onClick={(ev) => {
+                            ev.stopPropagation();
+                            props.onMenu();
+                        }}>
+                        <Icon icon={faBars} />
+                    </NavItem>
+                )}
             </Container>
         </CenterContainer>
     );

pages/docs/[doc].tsx

@@ -2,7 +2,7 @@ import { GetStaticProps, GetServerSideProps, GetStaticPaths } from "next";
 import fs from "fs/promises";
 import path from "path";
 import ReactMarkdown from "react-markdown";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { CenterContainer } from "../../components/CenterContainer";
 import { NavBar } from "../../components/NavBar";
 import { SideBar } from "../../components/SideBar";
@@ -11,6 +11,7 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { materialOceanic } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import Link from "next/link";
 import Head from "next/head";
+import { useRouter } from "next/router";
 
 const ARTICLES_PATH = path.join(process.cwd(), "articles");
 
@@ -22,16 +23,29 @@ const Container = styled.div`
     display: grid;
     gap: 3em;
     grid-template-columns: 200px 1fr;
+
+    @media only screen and (max-width: 600px) {
+        grid-template-columns: 1fr;
+        /* display: block; */
+        /* max-width: 100vw; */
+    }
 `;
 
 const ReactMarkdownContainer = styled.div`
+    display: block;
     overflow: hidden;
     margin-bottom: 30em;
 
     code {
         font-size: 1.3em;
     }
 
+    /* @media only screen and (max-width: 600px) {
+        pre {
+            margin: 0 -2em !important;
+        }
+    } */
+
     a {
         padding: 0.3em 0;
         color: #186eee;
@@ -59,19 +73,39 @@ const ReactMarkdownContainer = styled.div`
     }
 `;
 
+const SidebarHolder = styled.div`
+    @media only screen and (max-width: 600px) {
+        top: 0em;
+        left: 0em;
+        width: 100%;
+        z-index: 100;
+        backdrop-filter: blur(50px);
+        height: 100%;
+        position: fixed;
+        padding: 1em;
+        transform: translateX(0);
+        transition: 100ms ease-in;
+        &.hidden {
+            transition: 100ms ease-in;
+            transform: translateX(-100vw);
+        }
+    }
+`;
+
 export default function DocPage(props: Props) {
+    const [showMobileMenu, setShowMobileMenu] = useState(false);
     return (
-        <>
+        <main onClick={() => setShowMobileMenu(false)}>
             <Head>
                 <link rel="preconnect" href="https://fonts.gstatic.com" />
                 <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap" rel="stylesheet" />
             </Head>
-            <NavBar />
-            <CenterContainer style={{ margin: "2em 0.5em" }}>
+            <NavBar onMenu={() => setShowMobileMenu(true)} />
+            <CenterContainer style={{ margin: "0 0.5em" }}>
                 <Container>
-                    <div>
+                    <SidebarHolder className={!showMobileMenu && "hidden"}>
                         <SideBar />
-                    </div>
+                    </SidebarHolder>
                     <ReactMarkdownContainer>
                         <ReactMarkdown
                             renderers={{
@@ -91,7 +125,7 @@ export default function DocPage(props: Props) {
                     </ReactMarkdownContainer>
                 </Container>
             </CenterContainer>
-        </>
+        </main>
     );
 }