From 6c394927306b79c67a525f4b79679e7c707d9cee Mon Sep 17 00:00:00 2001
From: NiklasBuchfink <niklas.buchfink@web.de>
Date: Wed, 22 Mar 2023 21:14:33 +0100
Subject: [PATCH] #36 add: simple mobile editing

---
 README.md                                     |   1 -
 src/client/components/Container.tsx           |   2 +-
 src/client/components/DashboardHeader.tsx     |   6 +-
 src/client/components/studio/Navigation.tsx   | 225 +++++++++++++-----
 src/client/components/studio/StudioEditor.tsx |   9 +-
 5 files changed, 174 insertions(+), 69 deletions(-)

diff --git a/README.md b/README.md
index 56f14c6c..8c48eb54 100644
--- a/README.md
+++ b/README.md
@@ -77,5 +77,4 @@ All the others are used in CI or by those three main scripts, but you should onl
 
 ---
 
-
 For more information, check out [the in-depth docs](./docs/README.md)
diff --git a/src/client/components/Container.tsx b/src/client/components/Container.tsx
index 2eff685b..ef4e4c9f 100644
--- a/src/client/components/Container.tsx
+++ b/src/client/components/Container.tsx
@@ -6,7 +6,7 @@ interface ContainerProps {
 
 const Container: FC<ContainerProps> = ({ children }) => {
   return (
-    <div className="mx-auto flex min-h-screen w-full flex-col items-start justify-start px-2 sm:w-full sm:px-4 md:w-[750] lg:w-[1200px]">
+    <div className="mx-auto flex min-h-screen w-full flex-col items-start justify-start px-4 sm:w-full sm:px-4 md:w-[750] lg:w-[1200px]">
       {children}
     </div>
   );
diff --git a/src/client/components/DashboardHeader.tsx b/src/client/components/DashboardHeader.tsx
index 6683e709..6c98c8c0 100644
--- a/src/client/components/DashboardHeader.tsx
+++ b/src/client/components/DashboardHeader.tsx
@@ -17,7 +17,7 @@ export default function DashboardHeader() {
   const gradient = generateGradient(user?.firstName ? user.firstName : "Horst");
 
   return (
-    <div className="mx-auto w-full px-2 sm:w-full sm:px-4 md:w-[750] lg:w-[1200px]">
+    <div className="mx-auto w-full px-4 sm:w-full sm:px-4 md:w-[750] lg:w-[1200px]">
       <Disclosure as="div" className="relative w-full">
         {({ open }) => (
           <>
@@ -154,7 +154,7 @@ export default function DashboardHeader() {
                 </div>
               </div>
 
-              <Disclosure.Panel className="lg:hidden">
+              <Disclosure.Panel className="md:hidden">
                 <div className="pt-4 pb-3">
                   <div className="flex items-center px-4">
                     {user.image && (
@@ -166,7 +166,7 @@ export default function DashboardHeader() {
                         />
                       </div>
                     )}
-                    <div className="ml-3">
+                    <div className="ml-1">
                       <div className="text-base font-medium text-zinc-800">
                         {user.name}
                       </div>
diff --git a/src/client/components/studio/Navigation.tsx b/src/client/components/studio/Navigation.tsx
index e141ae6d..2cb42ec2 100644
--- a/src/client/components/studio/Navigation.tsx
+++ b/src/client/components/studio/Navigation.tsx
@@ -1,6 +1,9 @@
+import { Popover, Transition } from "@headlessui/react";
 import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { Bars2Icon, XMarkIcon } from "@heroicons/react/24/solid";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import clsx from "clsx";
+import { Fragment } from "react";
 import { toast } from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { useRecoilState, useRecoilValue } from "recoil";
@@ -71,70 +74,174 @@ export default function Navigation() {
   ];
 
   return (
-    <TooltipPrimitive.Provider>
-      <div className="flex w-16 flex-col items-center overflow-y-auto border-r border-zinc-300 bg-white pt-5 pb-4 dark:border-zinc-600 dark:bg-zinc-900">
-        <div className="flex h-full flex-col">
-          <div className="px-2">
-            <button
-              onClick={() => navigate("/s")}
-              aria-label={"Back to all sites"}
-              className={clsx(
-                "cursor-pointer text-zinc-600 hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-700",
-                "group m-0 flex items-center justify-center rounded-md px-2 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300"
-              )}
-            >
-              <ArrowLeftIcon
-                className={clsx(
-                  "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700",
-                  "h-6 w-6 flex-shrink-0"
-                )}
-                aria-hidden="true"
-              />
-            </button>
+    <>
+      <div className="absolute top-3 left-4 z-10 block sm:hidden">
+        <button
+          onClick={() => navigate("/s")}
+          aria-label={"Back to all sites"}
+          className={clsx(
+            "cursor-pointer text-zinc-600 hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-700",
+            "group m-0 flex items-center justify-center rounded-md px-2 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300"
+          )}
+        >
+          <ArrowLeftIcon
+            className={clsx(
+              "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700",
+              "h-6 w-6 flex-shrink-0"
+            )}
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+      <div className="absolute top-3 right-4 z-10 block sm:hidden">
+        <div className="w-full">
+          <div className="relative z-10 flex items-center md:hidden">
+            {/* Mobile menu button */}
           </div>
-          <nav
-            className="flex h-full flex-col justify-center gap-4 px-2 pb-12"
-            aria-label="Sidebar"
-          >
-            {navigation.map((item) => (
-              <TooltipPrimitive.Root key={item.name}>
-                <TooltipPrimitive.Trigger asChild>
-                  <button
-                    key={item.name}
-                    aria-label={item.name}
-                    onClick={() => item.action()}
-                    className={clsx(
-                      "cursor-pointer dark:text-zinc-300 dark:hover:bg-zinc-700",
-                      "group flex items-center rounded-md p-1 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300",
-                      item.name === "Add block"
-                        ? "border border-zinc-200 bg-zinc-800 text-zinc-100 hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:focus:ring-zinc-300 dark:focus:ring-offset-zinc-900"
-                        : "text-zinc-600 hover:bg-zinc-100"
-                    )}
+
+          <Popover className="relative">
+            {({ open }) => (
+              <>
+                <Popover.Button className="group m-0 flex cursor-pointer items-center justify-center rounded-md px-2 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700 dark:focus:ring-zinc-300">
+                  <span className="sr-only">Open menu</span>
+                  {open ? (
+                    <XMarkIcon
+                      className={clsx(
+                        "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700",
+                        "h-6 w-6 flex-shrink-0"
+                      )}
+                    />
+                  ) : (
+                    <Bars2Icon
+                      className={clsx(
+                        "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700",
+                        "h-6 w-6 flex-shrink-0"
+                      )}
+                    />
+                  )}
+                </Popover.Button>
+
+                <Transition
+                  as={Fragment}
+                  enter="transition ease-out duration-200"
+                  enterFrom="opacity-0 translate-y-1"
+                  enterTo="opacity-100 translate-y-0"
+                  leave="transition ease-in duration-150"
+                  leaveFrom="opacity-100 translate-y-0"
+                  leaveTo="opacity-0 translate-y-1"
+                >
+                  <Popover.Panel
+                    as="div"
+                    className="absolute right-0 z-10 mt-5 w-screen max-w-min rounded bg-white shadow-lg dark:bg-zinc-800 dark:shadow-none"
                   >
-                    <item.icon aria-hidden="true" />
-                  </button>
-                </TooltipPrimitive.Trigger>
-                <TooltipPrimitive.Content
-                  sideOffset={4}
-                  side="right"
+                    {navigation.map(
+                      (item) =>
+                        item.name !== "Add block" && (
+                          <Popover.Button
+                            as="div"
+                            key={item.name}
+                            onClick={item.action}
+                            className="block rounded-md py-2 px-3 text-base font-medium text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
+                          >
+                            {item.name}
+                          </Popover.Button>
+                        )
+                    )}
+                  </Popover.Panel>
+                </Transition>
+              </>
+            )}
+          </Popover>
+        </div>
+      </div>
+      <div className="absolute bottom-12 right-12 z-10 block sm:hidden">
+        {navigation.map(
+          (item) =>
+            item.name === "Add block" && (
+              <button
+                key={item.name}
+                aria-label={item.name}
+                onClick={() => item.action()}
+                className={clsx(
+                  "cursor-pointer shadow-lg dark:text-zinc-300 dark:shadow-none dark:hover:bg-zinc-700",
+                  "group flex items-center rounded-md p-1 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300",
+                  item.name === "Add block"
+                    ? "border border-zinc-200 bg-zinc-800 text-zinc-100 hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:focus:ring-zinc-300 dark:focus:ring-offset-zinc-900"
+                    : "text-zinc-600 hover:bg-zinc-100"
+                )}
+              >
+                <item.icon aria-hidden="true" />
+              </button>
+            )
+        )}
+      </div>
+      <div className="hidden sm:flex">
+        <TooltipPrimitive.Provider>
+          <div className="flex w-16 flex-col items-center overflow-y-auto border-r border-zinc-300 bg-white pt-5 pb-4 dark:border-zinc-600 dark:bg-zinc-900">
+            <div className="flex h-full flex-col">
+              <div className="px-2">
+                <button
+                  onClick={() => navigate("/s")}
+                  aria-label={"Back to all sites"}
                   className={clsx(
-                    "radix-side-top:animate-slide-down-fade",
-                    "radix-side-right:animate-slide-left-fade",
-                    "radix-side-bottom:animate-slide-up-fade",
-                    "radix-side-left:animate-slide-right-fade",
-                    "inline-flex items-center rounded-md px-2.5 py-2",
-                    "z-10 bg-zinc-800 font-semibold hover:text-zinc-100"
+                    "cursor-pointer text-zinc-600 hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-700",
+                    "group m-0 flex items-center justify-center rounded-md px-2 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300"
                   )}
                 >
-                  <span className="block text-sm leading-none text-zinc-100">
-                    {item.name}
-                  </span>
-                </TooltipPrimitive.Content>
-              </TooltipPrimitive.Root>
-            ))}
-          </nav>
-        </div>
+                  <ArrowLeftIcon
+                    className={clsx(
+                      "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700",
+                      "h-6 w-6 flex-shrink-0"
+                    )}
+                    aria-hidden="true"
+                  />
+                </button>
+              </div>
+              <nav
+                className="flex h-full flex-col justify-center gap-4 px-2 pb-12"
+                aria-label="Sidebar"
+              >
+                {navigation.map((item) => (
+                  <TooltipPrimitive.Root key={item.name}>
+                    <TooltipPrimitive.Trigger asChild>
+                      <button
+                        key={item.name}
+                        aria-label={item.name}
+                        onClick={() => item.action()}
+                        className={clsx(
+                          "cursor-pointer dark:text-zinc-300 dark:hover:bg-zinc-700",
+                          "group flex items-center rounded-md p-1 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-zinc-800 dark:focus:ring-zinc-300",
+                          item.name === "Add block"
+                            ? "border border-zinc-200 bg-zinc-800 text-zinc-100 hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:focus:ring-zinc-300 dark:focus:ring-offset-zinc-900"
+                            : "text-zinc-600 hover:bg-zinc-100"
+                        )}
+                      >
+                        <item.icon aria-hidden="true" />
+                      </button>
+                    </TooltipPrimitive.Trigger>
+                    <TooltipPrimitive.Content
+                      sideOffset={4}
+                      side="right"
+                      className={clsx(
+                        "radix-side-top:animate-slide-down-fade",
+                        "radix-side-right:animate-slide-left-fade",
+                        "radix-side-bottom:animate-slide-up-fade",
+                        "radix-side-left:animate-slide-right-fade",
+                        "inline-flex items-center rounded-md px-2.5 py-2",
+                        "z-10 bg-zinc-800 font-semibold hover:text-zinc-100"
+                      )}
+                    >
+                      <span className="block text-sm leading-none text-zinc-100">
+                        {item.name}
+                      </span>
+                    </TooltipPrimitive.Content>
+                  </TooltipPrimitive.Root>
+                ))}
+              </nav>
+            </div>
+          </div>
+        </TooltipPrimitive.Provider>
       </div>
-    </TooltipPrimitive.Provider>
+    </>
   );
 }
diff --git a/src/client/components/studio/StudioEditor.tsx b/src/client/components/studio/StudioEditor.tsx
index 11abb46f..c373a6f3 100644
--- a/src/client/components/studio/StudioEditor.tsx
+++ b/src/client/components/studio/StudioEditor.tsx
@@ -16,7 +16,6 @@ import { PageHeader } from "../PageHeader";
 import EmptyState from "./EmptyState";
 import { useDropImage } from "./hooks/useDropImage";
 import { useHandleLayoutChange } from "./hooks/useHandleLayoutChange";
-import MobileEditor from "./MobileEditor";
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
@@ -135,10 +134,10 @@ const StudioEditor = () => {
         <meta property="og:description" content={site.bio ? site.bio : ""} />
         <meta property="og:url" content={getBaseUrl() + "/" + site.subdomain} />
       </Head>
-      <div className="h-full w-full sm:hidden">
+      {/* <div className="h-full w-full sm:hidden">
         <MobileEditor />
-      </div>
-      <div className="hidden h-full w-full sm:block">
+      </div> */}
+      <div className="block h-full w-full">
         <div
           {...getRootProps({
             className: "h-full w-full",
@@ -147,7 +146,7 @@ const StudioEditor = () => {
           })}
         >
           <div className="flex h-full flex-col justify-between overflow-x-hidden overflow-y-scroll bg-white @container dark:bg-zinc-900">
-            <div className="h-fit w-full max-w-[1200px] pb-24 sm:p-4 lg:mx-auto">
+            <div className="h-fit w-full max-w-[1200px] p-8 pb-24 sm:p-16 lg:mx-auto xl:p-4">
               <div className="py-8">
                 <PageHeader />
               </div>