moved top 3 buttons and mcplant to a burger menu

index.html

@@ -17,9 +17,18 @@ <h1 style="margin-bottom: 0px">nudel</h1>
       </span>
       <nav>
         <!-- <button id="zen-button">☮ Zen</button> -->
-        <button id="about-button">? About</button>
-        <button id="export-button">⇓ Export</button>
-        <button id="settings-button">⚙ Settings</button>
+        <div class="dropdown">
+          <button>☰</button>
+          <div class="dropdown-content">
+            <button id="about-button">? About</button>
+            <button id="export-button">⇓ Export</button>
+            <button id="settings-button">⚙ Settings</button>
+            <div class="mcplant">
+              <button>🌱 McPlant</button>
+              <span class="tooltip">Vegetarianism propaganda in my burger menu?!</span>
+            </div>
+          </div>
+        </div>
       </nav>
     </header>
     <div class="slots">

src/settings.js

@@ -237,6 +237,15 @@ function getDocumentText(view) {
   return doc.children ? doc.children.flatmap((c) => c.text) : doc.text;
 }
 
+document.addEventListener('click', (e) => {
+  const dropdown = document.querySelector('.dropdown');
+  if (e.target.closest('.dropdown button')) {
+    dropdown.classList.toggle('open');
+  } else {
+    dropdown.classList.remove('open');
+  }
+});
+
 exportButton.addEventListener('click', () => {
   const date = new Date().toISOString().substr(0, 16).replace('T', ' ');
   const bundle = [`// "nudel ${date}" @by pastagang`, '//'];

src/style.css

@@ -382,3 +382,34 @@ iframe#shader {
   bottom: 0;
   right: 0;
 }
+
+.dropdown {
+  position: relative;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  background: white;
+  z-index: 1;
+}
+.dropdown.open .dropdown-content,
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+.mcplant {
+  position: relative;
+}
+.tooltip {
+  display: none;
+  position: absolute;
+  right: 100%;
+  white-space: nowrap;
+  background: black;
+  color: white;
+  padding: 4px;
+}
+.mcplant:hover .tooltip {
+  display: block;
+}