From d5b176087e0d77d498e956cc7c91c8e488d3fc58 Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Mon, 29 May 2023 01:52:02 +0300
Subject: [PATCH] InputControls: menu button scaffold

---
 src/components/Player/InputBox.jsx | 27 ++++++++++++++++++---------
 src/components/Player/player.css   | 15 ++++++++++++---
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/Player/InputBox.jsx b/src/components/Player/InputBox.jsx
index c9dc81a..0e08a7d 100644
--- a/src/components/Player/InputBox.jsx
+++ b/src/components/Player/InputBox.jsx
@@ -129,14 +129,23 @@ export default function InputBox ({
   }
 
   return (
-    <input {...inputHandlers[inputType]}
-      className='inputBox'
-      ref={inputEl}
-      value={inputText}
-      autofocus
-      autocomplete='off'
-      onDblClick={onFullscreenRequest}
-      onInput={({ target: { value } }) => setInputText(value)}
-      type='text' />
+    <section className='inputControls'>
+      <input {...inputHandlers[inputType]}
+        className='inputBox'
+        ref={inputEl}
+        value={inputText}
+        autofocus
+        autocomplete='off'
+        onDblClick={onFullscreenRequest}
+        onInput={({ target: { value } }) => setInputText(value)}
+        type='text' />
+      <button
+        aria-label='Menu'
+        className='menuButton'
+        onClick={() => setMenuOpen(true)}
+      >
+        =
+      </button>
+    </section>
   )
 }
diff --git a/src/components/Player/player.css b/src/components/Player/player.css
index 6b1b8c2..4559ea4 100644
--- a/src/components/Player/player.css
+++ b/src/components/Player/player.css
@@ -9,9 +9,18 @@
   padding: var(--outer-padding);
 }
 
-.ifplayer .inputBox {
-  flex: 0 1 auto;
+.ifplayer .inputControls {
+  position: relative;
+  margin-top: var(--input-box-margin);
+}
 
+.ifplayer .inputControls .menuButton {
+  position: absolute;
+  right: 0;
+  height: 100%;
+}
+
+.ifplayer .inputBox {
   font: inherit;
   color: inherit;
   outline: 0;
@@ -21,7 +30,7 @@
   border-top: var(--separator-width) solid var(--main-color);
   padding: var(--inner-padding);
   margin: 0;
-  margin-top: var(--input-box-margin);
+  width: 100%;
 }
 
 .ifplayer .inputBox::placeholder {