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>
+  )
+}