Set split panel resizable between views

components/Editor/Editor.jsx

@@ -15,7 +15,6 @@ const Editor = ({ initialDoc, onChange }) => {
 
   const handleEditorDidMount = (editor, monaco) => {
     editorRef.current = editor
-    console.log(monaco)
     // monaco.editor.defineTheme("onedark", onedark)
     // monaco.editor.setTheme("onedark")
   }

components/Editor/editor.module.css

@@ -1,15 +1,7 @@
 .editor {
-  height: 100%;
-  max-height: calc((100vh - var(--md-nav-height)) / 2);
+  min-height: 100%;
+  width: 100%;
   user-select: none;
-  position: relative;
   background-color: var(--md-bg-editor);
   color: inherit;
 }
-
-@media screen and (min-width: 640px ){
-  .editor {
-    max-height: min-content;
-    max-width: 50vw;
-  }
-}

components/Preview/preview.module.css

@@ -1,6 +1,7 @@
 .preview {
   height: 100%;
   width: 100%;
-  background-color: var(--md-bg-2);
+  background-color: var(--md-bg-preview);
   position: relative;
-}
+  overflow: hidden;
+}

package.json

@@ -24,6 +24,7 @@
     "next": "12.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-split-grid": "^1.0.4",
     "rehype-react": "7.1.1",
     "remark-gfm": "2.0.0",
     "remark-parse": "10.0.0",

pages/app.js

@@ -1,22 +1,66 @@
-import React, { useCallback, useState } from 'react'
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useCallback, useEffect, useState } from 'react'
+import Split from 'react-split-grid'
 import Editor from '../components/Editor/Editor'
-import Navigation from '../components/Navbar'
+import NavEditor from '../components/Navbar/NavEditor/NavEditor'
 import Preview from '../components/Preview/Preview'
 import style from '../styles/app.module.css'
 
+/** @todo move state matched in custom hook */
 const App = () => {
   const [doc, setDoc] = useState(INITIAL_STATE)
+  const [matched, setMatched] = useState(false)
+
   const handleChange = useCallback((/** @type string */ newDoc) => {
     setDoc(newDoc)
   }, [])
 
+  const matchQuery = useCallback((query) => {
+    const gridElement = document.getElementById('grid')
+    if (query.matches) {
+      setMatched(true)
+      gridElement.style.gridTemplateColumns = '1fr 5px 1fr'
+      gridElement.style.gridTemplateRows = '1fr'
+    } else {
+      setMatched(false)
+      gridElement.style.gridTemplateRows = '1fr 5px 1fr'
+      gridElement.style.gridTemplateColumns = '1fr'
+    }
+  }, [])
+
+  const mediaQuery = typeof window !== 'undefined' && window.matchMedia('(min-width: 640px)')
+
+  let subscribe = true
+  useEffect(() => {
+    subscribe && matchQuery(mediaQuery)
+    return () => {
+      subscribe = false
+    }
+  }, []);
+
+  useEffect(() => {
+    if (subscribe) {
+      typeof window !== 'undefined' && mediaQuery.addEventListener('change', matchQuery)
+    }
+    return () => {
+      subscribe = false
+    }
+  }, [mediaQuery])
+
   return (
     <main className={style.app}>
-      <Navigation />
-      <section className={style.workArea}>
-        <Editor initialDoc={doc} onChange={handleChange} />
-        <Preview doc={doc} />
-      </section>
+      <NavEditor />
+      <Split rowMinSize={100} columnMinSize={200} render={({ getGridProps, getGutterProps }) => (
+        <div id='grid' className={matched ? style.gridColumn : style.gridRow} {...getGridProps()}>
+          <div style={{ height: '100%', position: 'relative', overflow: 'hidden' }}>
+            <Editor initialDoc={doc} onChange={handleChange} />
+          </div>
+          <div className={matched ? style.gutterColumn : style.gutterRow} {...getGutterProps(matched ? 'column' : 'row', 1)} />
+          <div>
+            <Preview doc={doc} />
+          </div>
+        </div>
+      )} />
     </main>
   )
 }

styles/app.module.css

@@ -10,18 +10,52 @@
   justify-content: flex-end;
 }
 
-.workArea {
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - var(--md-nav-height));
+.gridColumn, .gridRow {
+  height: calc(100vh - 48px);
   width: 100%;
-  overflow: hidden;
-  background-color: var(--md-bg-blur);
-  backdrop-filter: blur(10px);
+  display: grid;
+  background-color: var(--md-divider-light-1);
+}
+
+.gridColumn {
+  grid-template-columns: 1fr 5px 1fr;
+}
+
+.gutterColumn {
+  grid-row: 1/-1;
+  cursor: col-resize;
+  grid-column: 2;
+  transition: background-color 0.2s ease-out;
+
+}
+
+.gridRow {
+  grid-template-rows: 1fr 5px 1fr;
+}
+
+.gutterRow {
+  grid-column: 1/-1;
+  cursor: row-resize;
+  grid-row: 2;
+  transition: background-color 0.2s ease-out;
+
+}
+
+.gutterColumn:hover, .gutterRow:hover {
+  background-color: var(--md-malibu);
+  transition: background-color 0.2s ease-out;
+}
+
+.gutterColumn:active, .gutterRow:active {
+  background-color: var(--md-cursor);
+
 }
 
 @media screen and (min-width: 640px ){
-  .workArea {
+  .app {
     flex-direction: row;
   }
+  .gridColumn, .gridRow {
+    height: 100vh;
+  }
 }

yarn.lock

@@ -1901,7 +1901,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.7, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -1938,6 +1938,14 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-split-grid@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-split-grid/-/react-split-grid-1.0.4.tgz#e17d90c6229da76ac50f40c361a08ae6c7bae742"
+  integrity sha512-RMEzFFnntgn+u5GFq+ognmv30CsTgrR97zB4RkMx2VSX9Sw8A7fjzCUfw/Avj7m8GCEw19GIjoUQGOQUOOjlcA==
+  dependencies:
+    prop-types "^15.5.7"
+    split-grid "^1.0.9"
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -2108,6 +2116,11 @@ space-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
   integrity sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==
 
+split-grid@^1.0.9:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/split-grid/-/split-grid-1.0.11.tgz#2df26ac4fd4153f23a42471ab2f618ade81b69fd"
+  integrity sha512-ELtFtxc3r5we5GZfe6Fi0BFFxIi2M6BY1YEntBscKRDD3zx4JVHqx2VnTRSQu1BixCYSTH3MTjKd4esI2R7EgQ==
+
 state-local@^1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"