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.
This commit is contained in:
parent
c9971f22fe
commit
e9e8719a93
2 changed files with 66 additions and 7 deletions
|
@ -12,3 +12,39 @@
|
||||||
background-color: #f8f9fa;
|
background-color: #f8f9fa;
|
||||||
opacity: 0.7;
|
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;
|
||||||
|
}
|
||||||
|
|
|
@ -80,18 +80,27 @@ async function loadSidebar(scene_id, destination) {
|
||||||
p.appendChild(ul);
|
p.appendChild(ul);
|
||||||
|
|
||||||
var button = document.createElement("button");
|
var button = document.createElement("button");
|
||||||
button.setAttribute("class", "btn btn-primary");
|
button.setAttribute("class", "btn-close-sidebar");
|
||||||
button.setAttribute("type", "button");
|
button.setAttribute("type", "button");
|
||||||
button.setAttribute("data-bs-toggle", "collapse");
|
button.setAttribute("id", "btnCloseSidebar");
|
||||||
button.setAttribute("data-bs-target", "#sceneSidebar");
|
button.textContent = "Close Sidebar";
|
||||||
button.setAttribute("aria-expanded", false);
|
|
||||||
button.setAttribute("aria-controls", "sceneSidebar");
|
|
||||||
button.textContent = "<";
|
|
||||||
|
|
||||||
//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);
|
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);
|
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;
|
window.loadScene = loadScene;
|
||||||
|
|
||||||
export { loadScene };
|
export { loadScene };
|
||||||
|
|
Loading…
Reference in a new issue