Hey there! I'm in the process of designing a dashboard UI using CSS grid. Do you think CSS Grid is the right choice for this project? I'd love to hear your thoughts.
Currently, I'm facing a challenge with implementing a sidebar that needs to be 100% height with an overflow scrollbar when the content exceeds that height. The sidebar should have a default minimum width of 100px, but expand when toggled without resorting to arbitrary values.
The ultimate goal is to achieve a responsive 2-column layout with two scrollbars, a full-height sidebar column, and a main column featuring a header navbar.
If you need visual references, here's what I'm aiming to build: View Image
Here's what I've done so far: CodePen Link
function toggleClass() {
console.log("test");
document.querySelector('.app-sidenav').classList.toggle("expanded");
}*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: sans-serif;
}
/* mobile first */
.app-layout {
display: grid;
height: 100vh;
grid-template-rows: auto 1fr;
}
... (CSS code continued)
(HTML structure included)I would really appreciate any suggestions or advice on how to tackle this challenge. Thank you!