how to make sidebar with a top navbar CSS

I have been trying to make a top navbar together with a side navbar like the one shown here.

The blue part is a responsive navbar, where its height will change according to different devices. Therefore, the green portion's position is made relative. The red portion is a side navbar. When I click a hamburger on the blue portion, it will collapse. I want it to be fixed to the screen even when I scroll on the green portion, AND the red overflow-y should be scrollable too.

I am NOT using any javascript and only purely ruby on rails and html.erb

I have already coded out some parts but I am stuck at making the red portion fixed when scrolling and height == (viewport height - top navbar height)

  <body>
    <header class="header">
      <%= render 'layouts/navbar'%>
      <main>
        <%= render 'main/sidebar' %>
        <div class="custom-main-padding">
        <turbo-frame id="flash">
          <%= render 'layouts/flash' %>
        </turbo-frame>
        <%= yield %>
        </div>
      </main>
    </header>
  </body>

main and body tags CSS + custom-main-padding

main {
    width: 100vw;
    overflow: scroll;
    position: relative;
}
body {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    margin-left: auto;
    margin-right: auto;
}

navbar CSS

.navbar {
    position: sticky;
    width: 100vw;
    overflow-y: scroll;
}

main/sidebar CSS

.custom-sidebar {
    position: absolute;
    display: flex;
    overflow-y: scroll;
    background-color: #201C4C;
    top: 0;
    bottom: 0;
    width: 200px;
    color: white;
    z-index: 1;
}

.custom-main-padding {
    padding: 5% 5% 5% 5%;
    z-index: -1;
}