fix: jargons word editor mobile responsiveness (relates to #9)

src/components/islands/word-editor.jsx

@@ -4,22 +4,25 @@ import { useStore } from "@nanostores/react";
 import useRouter from "../../lib/hooks/use-router.js";
 import { capitalizeText } from "../../lib/utils/index.js";
 import useWordEditor from "../../lib/hooks/use-word-editor.js";
-import { $isWordSubmitLoading, $isWordSubmitted } from "../../lib/stores/dictionary.js";
+import { $isWordSubmitLoading, $isWordSubmitted, $togglePreview } from "../../lib/stores/dictionary.js";
 
 /**
  * Main Word Editor Component - Island
  */
 export default function WordEditor({ title = "", content = "", metadata = {}, action }) {
+  const togglePreview = useStore($togglePreview);
+
   return (
     <div className="w-full flex border rounded-lg">
       <Editor
         action={action}
         eTitle={title} 
         eContent={content} 
         eMetadata={metadata}
-        className="w-full h-full flex flex-col p-5 border-r"
+        className={` ${ !togglePreview ? "flex" : "hidden" } w-full h-full lg:!flex flex-col p-5 border-r`}
       />
-      <Preview className="w-full h-full flex flex-col p-5" />
+      <Preview className="w-full h-full hidden lg:flex flex-col p-5" />
+      <Preview className={`${ togglePreview ? "flex" : "hidden" } w-full h-full lg:!hidden flex-col p-5`} />
     </div>
   );
 }
@@ -32,7 +35,7 @@ export function SubmitButton({ children = "Submit" }) {
   const isSubmitLoading = useStore($isWordSubmitLoading);
 
   return (
-    <button className={`flex items-center justify-center no-underline text-white ${isSubmitted ? "bg-green-700" : "bg-gray-900 hover:bg-gray-700"} focus:ring-0 font-medium rounded-lg text-base px-5 py-2.5 text-center ml-1 sm:ml-3`}
+    <button className={`flex items-center justify-center no-underline text-white ${isSubmitted ? "bg-green-700" : "bg-gray-900 hover:bg-gray-700"} focus:ring-0 font-medium rounded-lg text-base px-5 py-2.5 text-center`}
       type="submit"
       form="jargons.dev:word_editor"
       disabled={isSubmitLoading || isSubmitted}
@@ -50,6 +53,18 @@ export function SubmitButton({ children = "Submit" }) {
   );
 }
 
+export function TogglePreview() {
+  const togglePreview = useStore($togglePreview);
+
+  return (
+    <label class="inline-flex lg:hidden items-center cursor-pointer border-r pr-2.5 mr-2.5">
+      <span class="me-3 text-sm font-medium text-gray-900 dark:text-gray-300">Preview</span>
+      <input type="checkbox" class="sr-only peer" onChange={() => $togglePreview.set(!togglePreview)} />
+      <div class="relative w-8 h-5 bg-gray-400 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-[75%] rtl:peer-checked:after:-translate-x-[75%] peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-black"></div>
+    </label>
+  );
+};
+
 /**
  * Editor Markdown Input Component
  */

src/components/navbar.astro

@@ -2,12 +2,12 @@
 const { returnNav = { label: "Back", location: "../" } } = Astro.props;
 ---
 
-<nav class="flex items-center justify-between px-5 md:px-6 py-4">
-  <a href={ returnNav.location } class="flex items-center">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+<nav class="@container flex items-center justify-between px-5 md:px-6 py-4">
+  <a href={ returnNav.location } class="flex items-center w-8 h-8 @md:w-auto @md:h-auto bg-black @md:bg-transparent text-white @md:text-black rounded-full @md:rounded-none">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mx-auto @md:mx-0">
       <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
     </svg> 
-    <span>
+    <span class="hidden @md:flex">
       { returnNav.label }
     </span>       
   </a>

src/lib/stores/dictionary.js

@@ -19,4 +19,6 @@ export const $wordEditor = map({
 
 export const $isWordSubmitLoading = atom(false);
 
-export const $isWordSubmitted = atom(false);
+export const $isWordSubmitted = atom(false);
+
+export const $togglePreview = atom(false);

src/pages/editor/edit/[word].astro

@@ -5,7 +5,7 @@ import Navbar from "../../../components/navbar.astro";
 import doAuth from "../../../lib/actions/do-auth.js";
 import doEditWord from "../../../lib/actions/do-edit-word.js";
 import { resolveEditorActionFromPathname } from "../../../lib/utils/index.js";
-import WordEditor, { SubmitButton as WordEditorSubmitButton } from "../../../components/islands/word-editor.jsx";
+import WordEditor, { SubmitButton as WordEditorSubmitButton, TogglePreview } from "../../../components/islands/word-editor.jsx";
 
 const { url: { pathname }, redirect } = Astro;
 
@@ -25,7 +25,10 @@ const action = resolveEditorActionFromPathname(pathname);
     label: `Return to ${word.data.title}`,
     location: `/browse/${wordMetadata.title}`
   }}>
-    <WordEditorSubmitButton client:load />
+    <div class="flex space-x-3">
+      <TogglePreview client:load />
+      <WordEditorSubmitButton client:load />
+    </div>
   </Navbar>
 
   <main class="flex grow px-5 md:px-6 pb-4">

src/pages/editor/new/index.astro

@@ -3,7 +3,7 @@ import BaseLayout from "../../../layouts/base.astro";
 import doAuth from "../../../lib/actions/do-auth.js";
 import Navbar from "../../../components/navbar.astro";
 import { resolveEditorActionFromPathname } from "../../../lib/utils/index.js";
-import WordEditor, { SubmitButton as WordEditorSubmitButton } from "../../../components/islands/word-editor.jsx";
+import WordEditor, { SubmitButton as WordEditorSubmitButton, TogglePreview } from "../../../components/islands/word-editor.jsx";
 
 const { url: { pathname }, redirect } = Astro;
 
@@ -28,7 +28,10 @@ const action = resolveEditorActionFromPathname(pathname);
       location: "/editor"
     }}
   >
-    <WordEditorSubmitButton client:load />
+    <div class="flex space-x-3">
+      <TogglePreview client:load />
+      <WordEditorSubmitButton client:load />
+    </div>
   </Navbar>
 
   <main class="flex grow px-5 md:px-6 pb-4">