Add hamburger toggle

TwoSquirrels · Jul 12, 2024 · 7a8667b · 7a8667b
1 parent 6d1c7bf
commit 7a8667b
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 48 deletions.
diff --git a/src/index.html b/src/index.html
@@ -7,13 +7,7 @@
     <title>Virtual Gamepad</title>
   </head>
   <body>
-    <main>
-      <div id="joystick-zone"></div>
-      <div id="buttons-zone">
-        <button type="button" class="button-a">A</button>
-        <button type="button" class="button-b">B</button>
-      </div>
-    </main>
+    <button type="button" class="hamburger"><span>&lt;</span><span class="erase">&gt;</span></button>
     <article>
       <h1>Virtual Gamepad</h1>
       <section>
@@ -52,6 +46,13 @@ <h2>References</h2>
         </p>
       </section>
     </article>
+    <main>
+      <div id="joystick-zone"></div>
+      <div id="buttons-zone">
+        <button type="button" class="button-a">A</button>
+        <button type="button" class="button-b">B</button>
+      </div>
+    </main>
     <script type="module" src="/main.js"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -2,18 +2,32 @@ import nipplejs from "nipplejs";
 import "./style.css";
 
 const elms = {
-  body: document.querySelector("body"),
-  main: {
-    joystickZone: document.querySelector("#joystick-zone"),
-    buttonsZone: document.querySelector("#buttons-zone"),
-  },
+  hamburgers: [...document.querySelectorAll(".hamburger")],
+  burgerIcons: [...document.querySelectorAll(".hamburger > span")],
+  articles: [...document.querySelectorAll("article")],
   settings: {
     host: document.querySelector("#settings-host"),
     interval: document.querySelector("#settings-interval"),
     buttons: document.querySelector("#settings-buttons"),
   },
+  body: document.querySelector("body"),
+  main: {
+    joystickZone: document.querySelector("#joystick-zone"),
+    buttonsZone: document.querySelector("#buttons-zone"),
+  },
 };
 
+/// hamburgers
+
+for (const burger of elms.hamburgers) {
+  burger.onclick = () => {
+    for (const article of elms.articles) article.classList.toggle("hide-left");
+    for (const icon of elms.burgerIcons) icon.classList.toggle("erase");
+  };
+}
+
+/// poster
+
 let host = "http://localhost";
 let interval = 125;
 let showButtons = true;

diff --git a/src/style.css b/src/style.css
@@ -16,6 +16,67 @@
   opacity: 0;
 }
 
+/* hamburger */
+
+.hamburger {
+  position: absolute;
+  padding: 0;
+  height: 4rem;
+  width: 4rem;
+  z-index: 1;
+  font-size: 3rem;
+  box-shadow: 0 0 0.5em 0.25em #5555;
+}
+
+/* article */
+
+article {
+  position: relative;
+  left: 0;
+  padding: 1em;
+  height: 100dvh;
+  width: 50dvw;
+  overflow: auto;
+  background-color: #5559;
+  box-shadow: 0 0 0.5rem 0.25rem #5553;
+  transition: left 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+article.hide-left {
+  left: -50dvw;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+article * {
+  margin: 0;
+}
+
+article a {
+  color: #fcc;
+}
+
+article h1 {
+  margin: 0.2em 0;
+  margin-left: 4rem;
+}
+
+article h2 {
+  margin: 0.1em 0;
+}
+
+article input[type="checkbox"] {
+  height: 1.5em;
+  width: 1.5em;
+}
+
+article code {
+  padding: 0.25em;
+  background: #335;
+}
+
+/* gamepad */
+
 main {
   position: absolute;
   display: flex;
@@ -53,44 +114,10 @@ main {
 
 .button-a {
   background-color: #f33;
+  box-shadow: 0 0 0.5rem 0.25rem #f335;
 }
 
 .button-b {
   background-color: #3f3;
-}
-
-article {
-  margin: 0.5em;
-  padding: 0.5em;
-  max-height: min(24em, calc(100dvh - 240px));
-  width: 50dvw;
-  overflow: scroll;
-  font-size: max(0.75rem, 2dvmin);
-  background-color: #5559;
-}
-
-article * {
-  margin: 0;
-}
-
-article a {
-  color: #fcc;
-}
-
-article h1 {
-  margin: 0.2em 0.1em;
-}
-
-article h2 {
-  margin: 0.1em 0;
-}
-
-article input[type="checkbox"] {
-  height: 1.5em;
-  width: 1.5em;
-}
-
-article code {
-  padding: 0.25em;
-  background: #335;
+  box-shadow: 0 0 0.5rem 0.25rem #3f35;
 }