PrivateCoffee/quackscape
PrivateCoffee/quackscape
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: improve sidebar UX with toggle functionality

Browse source 
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:
Kumi 2024-03-16 07:58:14 +01:00
parent c9971f22fe
commit e9e8719a93
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 66 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
assets/css/scene.css
View file

@ -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;
}

37
assets/js/scene.js
View file

@ -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 };