On straching a div open sidenavbar

Question

Hi everyone when I'm using my phone i get to know that there is one feature given by my phone ,they provided a straight line while stretching that div I'm able to open sidenavbar navbar I'm wonder can we do this in html i'll post video what I'm talking about

Video link ' https://drive.google.com/file/d/1UB5WGIVIxuoCNaF_TLYJzhyMowqKzMHD/view?usp=drivesdk

'

Here you will you get video related to what I'm talking about

const element = document.getElementById("myBtn");
element.addEventListener("click", myFunction);

function myFunction() {
 var element = document.getElementById("myDIV");
   element.classList.add("mystyle");
   
   document.getElementById("myDIV").innerHTML='i want to open side navbar while stretching the  div ,right konow its opening at onClick event for more info watch the video link already assign'
}

.container{
background:red;
width:100%;
height:100vh;
}

.sideNavbar{
height:15vh;
width:1vw;
background:gray;
border-radius:10px;
position:fixed;
right:1%;
top:50%;
}

.mystyle {
  width: 20%;
  height:100vh;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
  
  position:absolute;
  right:1%;
}
#myBtn1{
top:50%;
right:2%;
position:absolute;
overflow-y:auto;
font-size:1px;
}
#myDIV{
font-size:8px;
}

<div class='container'>
<div id='myBtn' class='sideNavbar'></div>
<div id='myBtn1'>click me</div>
<div id='myDIV' class='sideNavBarContainer'></div>

</div>