I'm currently working on a project that is supposed to have a certain look and feel.
https://i.sstatic.net/xmDtH.png
As part of the project, I created a collapsible side drawer. I positioned it absolutely to the document body with left 0 and top set to the height of the top bar. Initially, everything was working as planned until I resized the browser window to a smaller height, which resulted in the following display:
https://i.sstatic.net/mVplp.png
Despite my efforts, including setting the side drawer height to 100vh - top bar height and 100% - top bar height, I couldn't resolve the issue. As someone who is still learning about front-end development, any guidance or insights would be greatly appreciated!
Below is a snippet of the SCSS code used:
.control-panel {
position: absolute;
z-index: 1;
background-color: lighten($profile-cards-role-extra-light-grey, 45%);
width: 30rem;
left: 0;
min-height: calc(100vh - 9.4rem);
box-shadow: 0 2px 6px 0 rgba(#000, 0.2);
transition: margin, box-shadow, 0.3s ease-out;
padding: 0 2rem;
.toggler-btn {
position: absolute;
right: 0.8rem;
top: 0.8rem;