MenuOverlay: add dialog

src/components/Player/MenuOverlay.css

@@ -0,0 +1,41 @@
+.menu {
+  width: 100%;
+
+  border-left: none;
+  border-right: none;
+  text-align: center;
+  padding-top: 0;
+  padding-bottom: 0;
+
+  background-color: var(--bg-color);
+  border-color: var(--main-color);
+  color: var(--main-color);
+}
+
+.menu::backdrop {
+  background: none;
+  backdrop-filter: blur(2px);
+}
+
+.menu > section {
+  margin: 32px auto 40px;
+  gap: 32px;
+  max-width: 250px;
+  display: flex;
+  flex-direction: column;
+}
+
+.menu .navigation {
+  color: var(--accent-color);
+}
+
+.menu .appearance {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.menu select,
+.menu button {
+  width: 100%;
+}

src/components/Player/MenuOverlay.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from 'preact/hooks'
+import { Link } from 'wouter-preact'
+
+import ThemeSelector from
+  '~/src/components/ThemeSelector/ThemeSelector'
+
+import './MenuOverlay.css'
+
+export default function MenuOverlay ({ themeEngine }) {
+  const dialog = useRef(null)
+
+  useEffect(() => {
+    const closeHandler = () => {
+      console.log('dialog closed')
+    }
+
+    dialog.current.addEventListener('close', closeHandler)
+    return () => dialog.current.removeEventListener('close', closeHandler)
+  }, [dialog])
+
+
+  return (
+    <dialog ref={dialog} className='menu'>
+      <section>
+        <div className='navigation'>
+          <Link href="/">
+            ElseIfPlayer
+          </Link>
+        </div>
+        <div className='appearance'>
+          <button>Request fullscreen</button>
+          <button
+            onClick={() => themeEngine.setRandomTheme()}
+          >
+            Set a random theme
+          </button>
+          <label>
+            Current theme:
+            <ThemeSelector {...{
+              themeEngine,
+            }} />
+          </label>
+        </div>
+        <div>
+          <button
+            onClick={() => dialog.current.close()}
+          >
+            Close
+          </button>
+        </div>
+      </section>
+    </dialog>
+  )
+}