feat(v2-alpha): add collapsible toolbox and refine binary simulator layout

- Introduce collapsible right-hand toolbox for the binary simulator
- Pin toolbox to the right edge with responsive fallback on smaller screens
- Rework tools and bit-width controls into a shared side layout
- Adjust control sizing, spacing, and visual hierarchy for clarity

Notes:
- Toolbox collapse is functional but requires refinement
- Tools and Bit Width should be merged into a single module/card
- Collapsed state does not yet fully hide the panel or re-centre content

Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
2025-12-16 15:13:18 +00:00
parent 1519032f5b
commit 91a07e49ae
3 changed files with 132 additions and 97 deletions

View File

@@ -464,6 +464,17 @@
/* -----------------------------
EVENTS
----------------------------- */
// Collapsible right panel
const sidePanel = document.getElementById("sidePanel");
const btnPanelToggle = document.getElementById("btnPanelToggle");
btnPanelToggle?.addEventListener("click", () => {
sidePanel?.classList.toggle("isCollapsed");
// flip the chevron
btnPanelToggle.textContent = sidePanel?.classList.contains("isCollapsed") ? "" : "";
});
modeToggle?.addEventListener("change", () => {
updateUI();
});
@@ -506,3 +517,4 @@
updateModeHint();
buildBits(bitCount);
})();