feat: add mobile navigation (#388)

ginifizz · web-flow · commit 39bd3018b1b6 · 2023-06-13T09:39:25.000+02:00
diff --git a/pwa/app/(common)/components/Admin.tsx b/pwa/app/(common)/components/Admin.tsx
@@ -14,7 +14,7 @@ export default function Admin() {
           API Platform Admin exposes your data trough a beautiful UI.
         </p>
         <div className="flex flex-col w-full justify-between items-start py-8 gap-y-8 | sm:flex-row sm:max-w-xl sm:gap-x-24 sm:gap-y-0 sm:mt-8 | md:max-w-none | xl:min-h-[450px]">
-          <div className="flex flex-col text-left w-full | lg:w-1/4">
+          <div className="flex flex-col items-center text-center w-full | lg:text-left lg:w-1/4">
             <ListPoint direction="left">
               Entirely <strong>customizable</strong>
             </ListPoint>
@@ -26,7 +26,7 @@ export default function Admin() {
               <strong>React Admin</strong>
             </ListPoint>
           </div>
-          <div className="flex flex-col text-left w-full | lg:w-1/4">
+          <div className="flex flex-col items-center text-center w-full | lg:text-left lg:w-1/4">
             <ListPoint direction="right">
               100% <strong>no code</strong>
             </ListPoint>
diff --git a/pwa/app/(common)/components/References.tsx b/pwa/app/(common)/components/References.tsx
@@ -83,7 +83,7 @@ export default function References({ refs, ossRefs }: ReferencesProps) {
                 src={`/images/references/${ref.logo}.png`}
                 height={50}
                 width={200}
-                className="max-w-[120px] "
+                className="max-w-[120px] mx-auto"
               />
             </Link>
           ))}
diff --git a/pwa/app/(common)/docs/(new)/guides/page.tsx b/pwa/app/(common)/docs/(new)/guides/page.tsx
@@ -1,3 +1,11 @@
+import BreadCrumbs from "components/docs/BreadCrumbs";
+
 export default async function Page() {
-  return <h1>Guides</h1>;
+  return (
+    <>
+      {" "}
+      <BreadCrumbs breadCrumbs={[{ title: "Guides" }]} />
+      <h1>Guides</h1>
+    </>
+  );
 }
diff --git a/pwa/app/(common)/docs/[...slug]/layout.tsx b/pwa/app/(common)/docs/[...slug]/layout.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import Sidebar from "components/docs/Sidebar";
 import { loadV2DocumentationNav } from "api/doc";
 import { versions, current } from "consts";
+import { DocProvider } from "contexts/DocContext";
+import MobileSideBar from "components/docs/MobileSidebar";
 
 async function DocLayout({
   params: { slug },
@@ -17,10 +19,13 @@ async function DocLayout({
 
   return (
     <div className="max-w-8xl mx-auto overflow-x-clip">
-      <div className="flex flex-row flex-wrap items-start justify-start">
-        <Sidebar docMenuParts={nav} />
-        <div className="flex-1 overflow-clip">{children}</div>
-      </div>
+      <DocProvider>
+        <MobileSideBar docMenuParts={nav} />
+        <div className="flex flex-row flex-wrap items-start justify-start">
+          <Sidebar docMenuParts={nav} />
+          <div className="flex-1 overflow-clip">{children}</div>
+        </div>
+      </DocProvider>
     </div>
   );
 }
diff --git a/pwa/app/(common)/docs/[...slug]/page.tsx b/pwa/app/(common)/docs/[...slug]/page.tsx
@@ -8,6 +8,7 @@ import classNames from "classnames";
 import { current, versions } from "consts";
 import Script from "next/script";
 import { Metadata, ResolvingMetadata } from "next";
+import BreadCrumbs from "components/docs/BreadCrumbs";
 
 export async function generateStaticParams() {
   const slugs: { slug: string[] }[] = [];
@@ -51,6 +52,19 @@ export default async function Page({
   );
 
   const html = await getHtmlFromGithubContent({ data, path });
+  const title = await getDocTitle(version, slug);
+
+  const breadCrumbs = [
+    {
+      title: version,
+      link: version === current ? `/docs/${version}` : "/docs",
+    },
+    { title },
+  ];
+
+  if (slug.length > 2 || (slug.length === 2 && !versions.includes(slug[0]))) {
+    breadCrumbs.splice(1, 0, { title: "..." });
+  }
 
   return (
     <div
@@ -59,7 +73,8 @@ export default async function Page({
         "dark:text-white/80"
       )}
     >
-      <div className="prose max-w-none dark:prose-invert prose-headings:font-title prose-h1:font-bold prose-code:after:hidden prose-code:before:hidden prose-code:py-1 prose-code:px-1.5 prose-code:bg-gray-100 prose-code:dark:bg-blue-darkest prose-h1:border-b-px prose-h1:border-b-gray-300 prose-h1:pb-2 max-md:prose-tr:flex max-md:prose-tr:flex-col max-md:prose-td:px-0 max-md:prose-td:py-1">
+      <BreadCrumbs breadCrumbs={breadCrumbs} />
+      <div className="prose max-w-none dark:prose-invert prose-img:max-w-full prose-headings:font-title prose-h1:font-bold prose-code:after:hidden prose-code:before:hidden prose-code:py-1 prose-code:px-1.5 prose-code:bg-gray-100 prose-code:dark:bg-blue-darkest prose-h1:border-b-px prose-h1:border-b-gray-300 prose-h1:pb-2 max-md:prose-tr:flex max-md:prose-tr:flex-col max-md:prose-td:px-0 max-md:prose-td:py-1">
         <div className="doc" dangerouslySetInnerHTML={{ __html: html }}></div>
       </div>
       <Script id="codeselector-switch">
diff --git a/pwa/app/(common)/docs/page.tsx b/pwa/app/(common)/docs/page.tsx
@@ -4,8 +4,10 @@ import {
   getHtmlFromGithubContent,
 } from "api/doc";
 import classNames from "classnames";
+import MobileSideBar from "components/docs/MobileSidebar";
 import Sidebar from "components/docs/Sidebar";
 import { current } from "consts";
+import { DocProvider } from "contexts/DocContext";
 
 export default async function Page() {
   const nav = await loadV2DocumentationNav(current);
@@ -14,24 +16,27 @@ export default async function Page() {
 
   return (
     <div className="max-w-8xl mx-auto overflow-x-clip">
-      <div className="flex flex-row flex-wrap items-start justify-start">
-        <Sidebar docMenuParts={nav} />
-        <div className="flex-1 overflow-clip">
-          <div
-            className={classNames(
-              "px-6 md:px-10 py-6 leading-loose text-blue-black/80 ",
-              "dark:text-white/80"
-            )}
-          >
-            <div className="prose max-w-none dark:prose-invert prose-headings:font-title prose-h1:font-bold prose-code:after:hidden prose-code:before:hidden prose-code:py-1 prose-code:px-1.5 prose-code:bg-gray-100 prose-code:dark:bg-blue-darkest prose-h1:border-b-px prose-h1:border-b-gray-300 prose-h1:pb-2 max-md:prose-tr:flex max-md:prose-tr:flex-col max-md:prose-td:px-0 max-md:prose-td:py-1">
-              <div
-                className="doc"
-                dangerouslySetInnerHTML={{ __html: html }}
-              ></div>
+      <DocProvider>
+        <MobileSideBar docMenuParts={nav} />
+        <div className="flex flex-row flex-wrap items-start justify-start">
+          <Sidebar docMenuParts={nav} />
+          <div className="flex-1 overflow-clip">
+            <div
+              className={classNames(
+                "px-6 md:px-10 py-6 leading-loose text-blue-black/80 ",
+                "dark:text-white/80"
+              )}
+            >
+              <div className="prose max-w-none dark:prose-invert prose-img:max-w-full prose-headings:font-title prose-h1:font-bold prose-code:after:hidden prose-code:before:hidden prose-code:py-1 prose-code:px-1.5 prose-code:bg-gray-100 prose-code:dark:bg-blue-darkest prose-h1:border-b-px prose-h1:border-b-gray-300 prose-h1:pb-2 max-md:prose-tr:flex max-md:prose-tr:flex-col max-md:prose-td:px-0 max-md:prose-td:py-1">
+                <div
+                  className="doc"
+                  dangerouslySetInnerHTML={{ __html: html }}
+                ></div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </DocProvider>
     </div>
   );
 }
diff --git a/pwa/app/(con)/[locale]/con/2022/layout.tsx b/pwa/app/(con)/[locale]/con/2022/layout.tsx
diff --git a/pwa/common.tailwind.config.js b/pwa/common.tailwind.config.js
@@ -51,6 +51,15 @@ module.exports = {
       white: "#ffffff",
     },
     extend: {
+      screens: {
+        "-lg": { max: "1023px" },
+      },
+      height: {
+        0.75: "3px",
+      },
+      width: {
+        0.75: "3px",
+      },
       fontFamily: {
         title: ["var(--font-poppins)"],
       },
diff --git a/pwa/components/docs/BreadCrumbs.tsx b/pwa/components/docs/BreadCrumbs.tsx
@@ -13,6 +13,7 @@ export default function BreadCrumbs({
 
   useEffect(() => {
     setBreadCrumbs(breadCrumbs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return null;
diff --git a/pwa/components/docs/DocMenu.tsx b/pwa/components/docs/DocMenu.tsx
@@ -16,13 +16,15 @@ export interface NavPartProps {
 
 function NavPart({ title, link, links, basePath, autoOpen }: NavPartProps) {
   const pathname = usePathname();
-  const [isOpen, setOpen] = useState(false);
+  const [isOpen, setOpen] = useState(
+    pathname === link || pathname.startsWith(basePath)
+  );
 
   useEffect(() => {
     if (!autoOpen) return;
     if (pathname === link || pathname.startsWith(basePath)) setOpen(true);
     else setOpen(false);
-  }, [pathname, autoOpen]);
+  }, [pathname, autoOpen, basePath, link]);
 
   return (
     <div
diff --git a/pwa/components/docs/MobileSidebar.tsx b/pwa/components/docs/MobileSidebar.tsx
@@ -14,15 +14,14 @@ export default function MobileSideBar({
   docMenuParts: NavPartProps[];
 }) {
   const [isOpen, setOpen] = useState(false);
-  const { breadCrumbs, setBreadCrumbs } = useContext(DocContext);
+  const { breadCrumbs } = useContext(DocContext);
   const pathname = usePathname();
 
   const menu = useRef<HTMLDivElement>(null);
 
   useOnClickOutside(menu, () => setOpen(false));
 
   useEffect(() => {
-    setBreadCrumbs([]);
     setOpen(false);
   }, [pathname]);
 
diff --git a/pwa/components/layout/Nav.tsx b/pwa/components/layout/Nav.tsx
@@ -5,12 +5,31 @@ import ThemeToggle from "components/common/ThemeToggle";
 import { Github } from "components/icons/social";
 import { usePathname } from "next/navigation";
 import NavLink from "./NavLink";
+import { useState, useEffect } from "react";
 
 export default function Nav() {
+  const [isOpen, setOpen] = useState(false);
   const pathname = usePathname();
   const withBg = pathname !== "/";
   const fixed = pathname?.startsWith("/docs");
 
+  const forceClose = () => {
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      window.addEventListener("resize", forceClose);
+    } else {
+      document.body.style.overflow = "auto";
+      window.removeEventListener("resize", forceClose);
+    }
+    return () => {
+      window.removeEventListener("resize", forceClose);
+    };
+  }, [isOpen]);
+
   return (
     <div
       className={classNames(
@@ -19,9 +38,18 @@ export default function Nav() {
         fixed ? "sticky" : "absolute"
       )}
     >
+      <div
+        onClick={forceClose}
+        className={classNames(
+          "fixed z-40 inset-0 transition-all duration-500",
+          isOpen
+            ? "backdrop-blur-sm bg-blue/30"
+            : "opacity-0 pointer-events-none"
+        )}
+      />
       <nav
         className={classNames(
-          "mx-auto px-6 md:px-8 h-16 flex flex-row items-center",
+          "mx-auto px-6 md:px-8 h-16 flex flex-row items-center gap-x-8",
           withBg
             ? "text-blue-black dark:text-white"
             : "text-white dark:text-blue-black",
@@ -38,17 +66,59 @@ export default function Nav() {
         >
           <Logo className="h-5" inline />
         </NavLink>
-        <div className="hidden flex-row gap-6 md:flex justify-center items-center">
-          <NavLink href="/docs">Docs</NavLink>
-          <NavLink href="https://api-platform.myspreadshop.net/">Shop</NavLink>
-          <NavLink href="/events">Events</NavLink>
-          <NavLink href="/help">Need help?</NavLink>
-          <div className="border-l-2 pl-6 border-current">
-            <Github className="h-5 w-5" />
-          </div>
-          <div className="border-l-2 pl-4 border-current">
-            <ThemeToggle withBgNav={withBg} />
+        <div
+          className={classNames(
+            "-lg:uppercase -lg:font-bold -lg:text-xl fixed h-screen w-5/6 max-w-md top-0 bg-white dark:bg-blue-black z-40 transition-all duration-500 flex flex-col gap-6 justify-start items-center",
+            "lg:bg-transparent lg:dark:bg-transparent lg:h-auto lg:w-auto lg:flex-row lg:static lg:justify-end",
+            isOpen
+              ? "right-0 text-blue dark:text-blue-extralight"
+              : "-right-full"
+          )}
+        >
+          <div className="flex flex-col flex-1 items-center justify-center gap-8 lg:flex-row">
+            <NavLink href="/docs">Docs</NavLink>
+            <NavLink href="https://api-platform.myspreadshop.net/">
+              Shop
+            </NavLink>
+            <NavLink href="/events">Events</NavLink>
+            <NavLink href="/help">Need help?</NavLink>
+            <div className="lg:border-l-2 lg:pl-6 lg:border-current">
+              <Github className="h-8 w-8 lg:h-5 lg:w-5" />
+            </div>
           </div>
+          <NavLink
+            href="/"
+            className={classNames(
+              "bg-blue text-white dark:text-blue-black py-16 w-full px-12 block lg:hidden"
+            )}
+            title="API Platform"
+          >
+            <Logo className="w-full" inline />
+          </NavLink>
+        </div>
+        <ThemeToggle withBgNav={withBg} />
+        <div
+          onClick={() => setOpen(!isOpen)}
+          className={classNames(
+            "w-7 h-5 flex relative items-center justify-center z-50 cursor-pointer",
+            "lg:hidden",
+            isOpen
+              ? "text-blue dark:text-blue"
+              : withBg
+              ? "text-blue dark:text-blue-light"
+              : "text-white dark:text-blue-black"
+          )}
+        >
+          <div
+            className={classNames(
+              "h-0.75 bg-current transition-all",
+              "after:absolute after:w-full after:left-1/2 after:h-0.75 after:bg-current  after:-translate-x-1/2 after:transition-all",
+              "before:absolute before:w-full before:h-0.75 before:bg-current before:left-1/2 before:-translate-x-1/2 before:transition-all",
+              isOpen
+                ? "w-0 before:top-1/2 after:top-1/2 before:-rotate-45 before:-translate-y-1/2 after:rotate-45 after:-translate-y-1/2"
+                : "w-8 before:top-0 after:bottom-0"
+            )}
+          />
         </div>
       </nav>
     </div>
