From ef77fe72592d6223fdff8f08a5de8b3e23d9812a Mon Sep 17 00:00:00 2001
From: Jamon <jamon@operative.kiwi>
Date: Sun, 11 Aug 2024 17:06:42 +1200
Subject: [PATCH] Added burger button for mobile - to hide the Quit/Menu (and
 future) UI buttons, giving more room for UI elements

---
 index.html        |  3 +++
 static/js/game.js | 17 +++++++++++++++++
 static/styles.css | 47 ++++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 64 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index ceeca15..c1b7967 100644
--- a/index.html
+++ b/index.html
@@ -16,8 +16,11 @@
 <body>
 
     <div id="ui" style="display: none;">
+        <button id="burgerButton" class="mobile-only">☰</button>
+        <div id="menuButtons">
         <button id="quitButton" class="button">Quit</button>
         <button id="uiButton" class="button">Menu</button>
+        </div>
     </div>    
     <div id="uiWidget" class="hidden">
         <div class="widget-tabs">
diff --git a/static/js/game.js b/static/js/game.js
index 326aeb4..aaa01bb 100644
--- a/static/js/game.js
+++ b/static/js/game.js
@@ -3850,5 +3850,22 @@ function hideSongDurationBar() {
     document.getElementById('songDurationBar').style.display = 'none';
 }
 
+document.addEventListener('DOMContentLoaded', () => {
+    const burgerButton = document.getElementById('burgerButton');
+    const menuButtons = document.getElementById('menuButtons');
+  
+    burgerButton.addEventListener('click', () => {
+      menuButtons.classList.toggle('show');
+    });
+  
+    // Close the menu when clicking outside
+    document.addEventListener('click', (event) => {
+      if (!burgerButton.contains(event.target) && !menuButtons.contains(event.target)) {
+        menuButtons.classList.remove('show');
+      }
+    });
+  });
+  
+
 
 init();
diff --git a/static/styles.css b/static/styles.css
index dba672c..013723f 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -548,6 +548,49 @@ body {
     }
 }
 
+#burgerButton {
+    display: none;
+    background-color: #ff00ff;
+    color: white;
+    border: none;
+    padding: 10px;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 5px;
+  }
+  
+  #menuButtons {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+  }
+  
+  #menuButtons button {
+    margin-bottom: 5px;
+  }
+  
+@media screen and (max-width: 768px) {
+    #burgerButton {
+        display: block;
+    }
+
+    #menuButtons {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background-color: rgba(18, 4, 88, 0.9);
+        padding: 10px;
+        border-radius: 5px;
+        flex-direction: column;
+    }
+
+    #menuButtons.show {
+        display: flex;
+    }
+}
+  
+
 .song-duration-bar {
     position: fixed;
     top: 10px;
@@ -620,14 +663,12 @@ body {
         right: 10px;
         transform: none;
         width: calc(100% - 130px); /* Full width minus space for buttons and buffer */
-        max-width: 200px; /* Limit maximum width */
+        max-width: auto; /* Limit maximum width */
         height: 20px;
         border-radius: 10px;
     }
 
     #ui {
-        display: flex;
-        align-items: center;
         position: fixed;
         top: 10px;
         left: 10px;
