From e9e8719a939ccc3aff29970aacc6221844a54ba4 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sat, 16 Mar 2024 07:58:14 +0100
Subject: [PATCH] feat: improve sidebar UX with toggle functionality

Introduced new styles for the sidebar's open and close buttons to
enhance visibility and user interaction. Updated the sidebar logic in
the JavaScript to include a toggle functionality, allowing users to
easily open and close the sidebar. This improves the user experience by
making navigation more intuitive and the UI cleaner. The 'Close Sidebar'
button now directly closes the sidebar, and a new 'Open Sidebar' button
appears when the sidebar is closed, providing a clear action cue to the
users.
---
 assets/css/scene.css | 36 ++++++++++++++++++++++++++++++++++++
 assets/js/scene.js   | 37 ++++++++++++++++++++++++++++++-------
 2 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/assets/css/scene.css b/assets/css/scene.css
index 5d188d9..0a1ef53 100644
--- a/assets/css/scene.css
+++ b/assets/css/scene.css
@@ -12,3 +12,39 @@
   background-color: #f8f9fa;
   opacity: 0.7;
 }
+
+.btn-close-sidebar {
+  width: 100%;
+  padding: 10px;
+  background-color: #ff4081;
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 0;
+}
+
+.btn-close-sidebar:hover {
+  background-color: #e03570;
+}
+
+.hide {
+  display: none;
+}
+
+.btn-open-sidebar {
+  z-index: 99999;
+  position: fixed;
+  width: 250px;
+  background-color: #40ffbe;
+  color: black;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 0;
+  opacity: 0.7;
+}
+
+.btn-open-sidebar:hover {
+  background-color: #0dffad;
+}
diff --git a/assets/js/scene.js b/assets/js/scene.js
index 3f40ef9..c0a6f48 100644
--- a/assets/js/scene.js
+++ b/assets/js/scene.js
@@ -80,18 +80,27 @@ async function loadSidebar(scene_id, destination) {
       p.appendChild(ul);
 
       var button = document.createElement("button");
-      button.setAttribute("class", "btn btn-primary");
+      button.setAttribute("class", "btn-close-sidebar");
       button.setAttribute("type", "button");
-      button.setAttribute("data-bs-toggle", "collapse");
-      button.setAttribute("data-bs-target", "#sceneSidebar");
-      button.setAttribute("aria-expanded", false);
-      button.setAttribute("aria-controls", "sceneSidebar");
-      button.textContent = "<";
+      button.setAttribute("id", "btnCloseSidebar");
+      button.textContent = "Close Sidebar";
 
-      //p.appendChild(button); // TODO: Make it prettier before enabling.
+      button.addEventListener("click", function () {
+        toggleSidebar();
+      });
 
+      sidebar.appendChild(button); // TODO: Make it prettier before enabling.
       sidebar.appendChild(p);
 
+      var reopenButton = document.createElement("button");
+      reopenButton.setAttribute("class", "btn-open-sidebar hide");
+      reopenButton.textContent = "Open Sidebar";
+      reopenButton.addEventListener("click", function () {
+        toggleSidebar();
+      });
+
+      destination.prepend(reopenButton);
+
       destination.prepend(sidebar);
     });
   });
@@ -271,6 +280,20 @@ async function loadScene(
   });
 }
 
+function toggleSidebar() {
+  const sidebar = document.getElementById("sceneSidebar");
+  const reopenButton = document.querySelector(".btn-open-sidebar");
+  
+  if (!sidebar.classList.contains("show")) {
+    sidebar.classList.add("show");
+    reopenButton.classList.add("hide");
+  } else {
+    sidebar.classList.remove("show");
+    reopenButton.classList.remove("hide");
+  }
+}
+
+
 window.loadScene = loadScene;
 
 export { loadScene };