feat(shared): Use modal menu as main menu

sites/shared/components/wrappers/modal.mjs

@@ -1,6 +1,8 @@
+import { useState, useEffect } from 'react'
+
 export const ModalWrapper = ({
   app,
-  children,
+  children = null,
   flex = 'row',
   justify = 'center',
   items = 'center',
@@ -8,17 +10,27 @@ export const ModalWrapper = ({
   bgOpacity = '100 lg:bg-opacity-95',
   bare = false,
   keepOpenOnClick = false,
-}) => (
-  <div
-    className={`fixed top-0 left-0 m-0 p-0 shadow w-full h-screen
+}) => {
+  const [animate, setAnimate] = useState(true)
+
+  useEffect(() => {
+    if (animate) setAnimate(false)
+  }, [children, animate])
+
+  return (
+    <div
+      className={`fixed top-0 left-0 m-0 p-0 shadow w-full h-screen
+        transform-all duration-100
+        ${animate ? 'opacity-0 -translate-x-full lg:translate-x-0' : 'opacity-100 -translate-x-0'}
         bg-${bg} bg-opacity-${bgOpacity} z-50 hover:cursor-pointer
         flex flex-${flex} justify-${justify} overflow-auto items-${items}`}
-    onClick={keepOpenOnClick ? null : () => app.updateState('modal', false)}
-  >
-    {bare ? (
-      children
-    ) : (
-      <div className="bg-base-100 p-4 lg:px-8 lg:rounded-lg lg:shadow-lg">{children}</div>
-    )}
-  </div>
-)
+      onClick={keepOpenOnClick ? null : () => app.updateState('modal', false)}
+    >
+      {bare ? (
+        children
+      ) : (
+        <div className="bg-base-100 p-4 lg:px-8 lg:rounded-lg lg:shadow-lg">{children}</div>
+      )}
+    </div>
+  )
+}

sites/shared/components/wrappers/page.mjs

@@ -9,6 +9,7 @@ import { LayoutWrapper, ns as layoutNs } from 'site/components/wrappers/layout.m
 import { DocsLayout, ns as docsNs } from 'site/components/layouts/docs.mjs'
 import { Feeds } from 'site/components/feeds.mjs'
 import { Spinner } from 'shared/components/spinner.mjs'
+import { ModalMenu } from 'site/components/navigation/modal-menu.mjs'
 
 export const ns = [...new Set([...layoutNs, ...docsNs])]
 
@@ -33,8 +34,8 @@ export const PageWrapper = ({
    * Swipe handling for the entire site
    */
   const swipeHandlers = useSwipeable({
-    onSwipedLeft: () => (app.state?.menu?.main ? app.updateState('menu.main', false) : null),
-    onSwipedRight: () => (app.state?.menu?.main ? null : app.updateState('menu.main', true)),
+    onSwipedLeft: () => app.setModal(false),
+    onSwipedRight: () => app.setModal(<ModalMenu app={app} />),
     trackMouse: true,
   })