From 92be783128105ea9e5294ca14e38bbc5d534febc Mon Sep 17 00:00:00 2001
From: esemyonov <132259164+esemyonov@users.noreply.github.com>
Date: Mon, 11 Dec 2023 12:48:35 +0600
Subject: [PATCH] feat: mobile layout (#280)

* Added test doc

* updated docs

* feat: header template

* feat: mobile-header

* feat: mobile-header

* feat: mobile-header

* feat: layout template

* feat: layout template

* feat: layout template

* feat: layout template

* feat: layout template

* feat: layout template

* fix: policy template

* fix: layout template

* fix: policy template

* feat: table of conext template

* feat: sidebar template

* feat: configure mdx

* fix: minor fixes

* feat: mobile layout

* feat: mobile navigation

* feat: mobile table of contents

---------

Co-authored-by: Nathan Totten <nathan@ntotten.com>
---
 src/app/policies/page.tsx                 |  4 +-
 src/components/DocsHeader.tsx             | 21 ++++--
 src/components/DocsLayout.tsx             |  4 +-
 src/components/Layout.tsx                 |  6 +-
 src/components/MobileNavigation.tsx       | 26 ++++----
 src/components/MobileTableOfContents.tsx  | 80 +++++++++++++++++++++++
 src/components/Search.tsx                 |  4 +-
 src/components/ThemeSelector.tsx          |  2 +-
 src/components/shared/article/Rate.tsx    | 22 ++++---
 src/components/shared/article/Support.tsx |  4 +-
 10 files changed, 134 insertions(+), 39 deletions(-)
 create mode 100644 src/components/MobileTableOfContents.tsx

diff --git a/src/app/policies/page.tsx b/src/app/policies/page.tsx
index 3fee926a..6097bb75 100644
--- a/src/app/policies/page.tsx
+++ b/src/app/policies/page.tsx
@@ -14,7 +14,7 @@ export default async function Page() {
   const policies = await getAllPolicies();
 
   return (
-    <DocsContainer className="w-full flex-col px-8 pb-[60px]">
+    <DocsContainer className="w-full flex-col px-1 pb-[60px] md:px-8">
       <DocsHeader title="Policies" />
       <Prose>
         <p>
@@ -42,7 +42,7 @@ export default async function Page() {
       <div>
         <Link
           href="/articles/policies"
-          className="btn btn-large btn-secondary-light mt-6 inline-block no-underline"
+          className="btn btn-large btn-secondary-light mt-6 inline-block w-full no-underline sm:w-auto"
         >
           Check out details
         </Link>
diff --git a/src/components/DocsHeader.tsx b/src/components/DocsHeader.tsx
index 59fdf547..6975ce5c 100644
--- a/src/components/DocsHeader.tsx
+++ b/src/components/DocsHeader.tsx
@@ -3,11 +3,18 @@
 import { usePathname } from "next/navigation";
 
 import { navigation } from "@/build/navigation.mjs";
-import { NavCategory, NavItem } from "@/lib/interfaces";
+import { NavCategory, NavItem, Section } from "@/lib/interfaces";
 import Link from "next/link";
 import ChevronRightIcon from "@/components/svgs/chevron-right.svg";
-
-export function DocsHeader({ title }: { title?: string }) {
+import { MobileTableOfContents } from "@/components/MobileTableOfContents";
+
+export function DocsHeader({
+  title,
+  tableOfContents,
+}: {
+  title?: string;
+  tableOfContents?: Array<Section>;
+}) {
   let pathname = usePathname();
 
   const findLink = (link: NavCategory | NavItem): boolean => {
@@ -26,16 +33,20 @@ export function DocsHeader({ title }: { title?: string }) {
 
   return (
     <header className="mb-5">
-      <div className="mb-10 flex items-center gap-x-[3px] text-sm leading-6 tracking-wider text-gray-600">
+      <div className="mb-4 flex items-center gap-x-[3px] text-sm leading-6 tracking-wider text-gray-600 lg:mb-10">
         <Link href="#">Home</Link>
         {section && (
           <>
             <ChevronRightIcon />
-            <p className="">{section.label}</p>
+            <p>{section.label}</p>
           </>
         )}
       </div>
 
+      {tableOfContents && (
+        <MobileTableOfContents tableOfContents={tableOfContents} />
+      )}
+
       {title && (
         <h1 className="mb-2.5 text-3xl leading-narrow text-white dark:text-black">
           {title}
diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx
index ac410813..9152c61d 100644
--- a/src/components/DocsLayout.tsx
+++ b/src/components/DocsLayout.tsx
@@ -19,9 +19,9 @@ export function DocsLayout({
   return (
     <>
       <DocsContainer>
-        <div className="w-full px-8">
+        <div className="w-full px-1 md:px-8">
           <article>
-            <DocsHeader title={title} />
+            <DocsHeader tableOfContents={sections} title={title} />
             <Prose>{children}</Prose>
           </article>
           <ArticleRate />
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index c7d85262..583e07a4 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -42,9 +42,7 @@ function Header() {
             <Logo className="block w-28 lg:w-36" />
           </div>
           <div className="flex flex-grow justify-end lg:justify-center">
-            <div className="">
-              <Search />
-            </div>
+            <Search />
           </div>
           <div className="hidden justify-end lg:flex">
             <ThemeSelector className="relative z-10 my-auto mr-8" />
@@ -70,7 +68,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
     <div className="flex w-full flex-col bg-white dark:bg-black">
       <Header />
       <div className="relative w-full px-5">
-        <div className="relative mx-auto w-full max-w-8xl rounded-xl bg-gray-400 dark:bg-white lg:mt-[92px]">
+        <div className="relative mx-auto mt-[70px] w-full max-w-8xl rounded-xl bg-gray-400 dark:bg-white lg:mt-[92px]">
           <Container className="flex h-[calc(100vh-7rem)] flex-auto justify-center">
             <aside className="hidden border-r border-gray-500 lg:relative lg:block lg:flex-none">
               {/* <div className="absolute inset-y-0 right-0 w-[50vw] dark:hidden" />
diff --git a/src/components/MobileNavigation.tsx b/src/components/MobileNavigation.tsx
index 897a9a6c..a9d2d291 100644
--- a/src/components/MobileNavigation.tsx
+++ b/src/components/MobileNavigation.tsx
@@ -6,8 +6,9 @@ import { usePathname, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useState } from "react";
 import { Bars3Icon as MenuIcon } from "@heroicons/react/24/outline";
 
-import Logo from "@/components/Logo";
+import LogoIcon from "./svgs/logo.svg";
 import { Navigation } from "@/components/Navigation";
+import { ThemeSelector } from "@/components/ThemeSelector";
 
 function CloseIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
@@ -71,18 +72,21 @@ export function MobileNavigation() {
         className="fixed inset-0 z-50 flex items-start overflow-y-auto bg-slate-900/50 pr-10 backdrop-blur lg:hidden"
         aria-label="Navigation"
       >
-        <Dialog.Panel className="min-h-full w-full max-w-xs bg-white px-4 pb-12 pt-5 dark:bg-slate-900 sm:px-6">
-          <div className="flex items-center">
-            <button
-              type="button"
-              onClick={() => close()}
-              aria-label="Close navigation"
-            >
-              <CloseIcon className="h-6 w-6 stroke-slate-500" />
-            </button>
+        <Dialog.Panel className="min-h-full w-full max-w-xs bg-gray-400 px-4 pb-12 pt-5 dark:bg-white sm:px-6">
+          <div className="flex items-center justify-between">
             <Link href="/" className="ml-6" aria-label="Home page">
-              <Logo className="h-9 w-9" />
+              <LogoIcon alt="Zuplo logo" className="w-28 text-transparent" />
             </Link>
+            <div className="flex">
+              <ThemeSelector className="relative z-10 my-auto mr-8" />
+              <button
+                type="button"
+                onClick={() => close()}
+                aria-label="Close navigation"
+              >
+                <CloseIcon className="h-6 w-6 stroke-slate-500" />
+              </button>
+            </div>
           </div>
           <Navigation className="mt-5 px-1" onLinkClick={onLinkClick} />
         </Dialog.Panel>
diff --git a/src/components/MobileTableOfContents.tsx b/src/components/MobileTableOfContents.tsx
new file mode 100644
index 00000000..6c36368d
--- /dev/null
+++ b/src/components/MobileTableOfContents.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { Section } from "@/lib/interfaces";
+import { Listbox, Transition } from "@headlessui/react";
+import clsx from "classnames";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
+import Link from "next/link";
+
+export function MobileTableOfContents({
+  tableOfContents,
+}: {
+  tableOfContents: Array<Section>;
+}) {
+  const optionClassName =
+    "text-normal w-full bg-white dark:bg-black dark:bg-opacity-5 bg-opacity-5 px-3 py-1.5";
+  const chevronClassName = "w-5 h-5";
+
+  return (
+    <>
+      {tableOfContents.length > 0 && (
+        <div className="my-4 block xl:hidden">
+          <Listbox>
+            {({ open }) => (
+              <>
+                <Listbox.Button
+                  className={clsx([
+                    optionClassName,
+                    "flex items-center justify-between text-left",
+                    open ? "rounded-t-md border-b" : "rounded-md",
+                  ])}
+                >
+                  On this page
+                  {open ? (
+                    <ChevronUpIcon className={chevronClassName} />
+                  ) : (
+                    <ChevronDownIcon className={chevronClassName} />
+                  )}
+                </Listbox.Button>
+                <Transition
+                  enter="transition duration-500 ease-out"
+                  enterFrom="transform scale-95 opacity-0"
+                  enterTo="transform scale-100 opacity-100"
+                  leave="transition duration-300 ease-out"
+                  leaveFrom="transform scale-100 opacity-100"
+                  leaveTo="transform scale-95 opacity-0"
+                >
+                  <Listbox.Options
+                    className={clsx([optionClassName, "rounded-b-md"])}
+                  >
+                    {tableOfContents.map((section) => (
+                      <Listbox.Option key={section.id} value={section}>
+                        <Link href={`#${section.id}`} className="block w-full">
+                          {section.title}
+                        </Link>
+                        {section.children.length > 0 && (
+                          <>
+                            {section.children.map((subSection) => (
+                              <li key={subSection.id}>
+                                <Link
+                                  href={`#${subSection.id}`}
+                                  className="block w-full"
+                                >
+                                  {subSection.title}
+                                </Link>
+                              </li>
+                            ))}
+                          </>
+                        )}
+                      </Listbox.Option>
+                    ))}
+                  </Listbox.Options>
+                </Transition>
+              </>
+            )}
+          </Listbox>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 389a833b..02a657a6 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -440,7 +440,7 @@ export function Search() {
   let { buttonProps, dialogProps } = useSearchProps();
 
   return (
-    <>
+    <div>
       <button
         type="button"
         className="group flex h-6 w-6 items-center justify-center rounded-xl bg-transparent px-3.5 hover:bg-white hover:ring-2 hover:ring-pink md:h-auto md:w-80 md:flex-none md:justify-start md:p-3.5 md:pr-5 md:text-sm md:ring-1 md:ring-inset md:ring-gray-600 lg:w-96"
@@ -452,6 +452,6 @@ export function Search() {
         </span>
       </button>
       <SearchDialog {...dialogProps} />
-    </>
+    </div>
   );
 }
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index 15bfe6f6..0df46d2c 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -50,7 +50,7 @@ export function ThemeSelector(
     <Listbox as="div" value={theme} onChange={setTheme} {...props}>
       <Listbox.Label className="sr-only">Theme</Listbox.Label>
       <Listbox.Button
-        className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:ring-inset dark:ring-gray-600"
+        className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-black/5 dark:ring-inset dark:ring-gray-600 lg:ring-1"
         aria-label="Theme"
       >
         <LightIcon className="h-4 w-4 fill-pink dark:hidden" />
diff --git a/src/components/shared/article/Rate.tsx b/src/components/shared/article/Rate.tsx
index 3fe618f9..cafd54f4 100644
--- a/src/components/shared/article/Rate.tsx
+++ b/src/components/shared/article/Rate.tsx
@@ -7,18 +7,20 @@ export default function ArticleRate() {
   const linkClassName = "btn btn-tertiary-dark flex items-center";
 
   return (
-    <div className="flex items-center pt-[60px]">
-      <h4 className="pr-5 text-2xl text-white dark:text-black">
+    <div className="flex flex-wrap items-center gap-5 pt-[60px]">
+      <h4 className="text-2xl text-white dark:text-black">
         Was this article helpful?
       </h4>
-      <Link className={clsx(linkClassName, "mr-2.5")} href={"#"}>
-        Yes
-        <LikeIcon />
-      </Link>
-      <Link className={linkClassName} href={"#"}>
-        No
-        <DislikeIcon />
-      </Link>
+      <div className="flex">
+        <Link className={clsx(linkClassName, "mr-2.5")} href={"#"}>
+          Yes
+          <LikeIcon />
+        </Link>
+        <Link className={linkClassName} href={"#"}>
+          No
+          <DislikeIcon />
+        </Link>
+      </div>
     </div>
   );
 }
diff --git a/src/components/shared/article/Support.tsx b/src/components/shared/article/Support.tsx
index ff4e05ff..745cf8fc 100644
--- a/src/components/shared/article/Support.tsx
+++ b/src/components/shared/article/Support.tsx
@@ -8,14 +8,14 @@ export default function ArticleSupport() {
 
   return (
     <div className="mt-[60px] flex flex-col justify-center gap-y-2.5 rounded-lg px-5 py-3.5 text-sm leading-6 ring-1 ring-gray-500">
-      <div className="flex gap-x-2.5">
+      <div className="flex flex-wrap gap-x-2.5">
         <ContactIcon />
         <span>Do you have any questions?</span>
         <a className={linkClassName} href="mailto:support@zuplo.com">
           Contact us
         </a>
       </div>
-      <div className="flex gap-x-2.5">
+      <div className="flex flex-wrap gap-x-2.5">
         <ChangelogIcon />
         <span>Check out our</span>
         <Link