basti1012.bplaced.net

Ich habe eine Menü-Sidebar, welche ich rechts positioniert habe. Ich möchte nun neben dem Link Seitenleiste schließen ein Icon anzeigen, welches aus der Sidebar herausragt. Hat jemand Tipps, wie ich das am besten umsetzen kann?

Code

                                    
                                <style>
  body{
  background:#023456;
  overflow:hidden;
}


div{
  position:absolute;
  top:10px;
  right:10px;
  background:#635e37;
  color:black;
  width:150px;
  height:100%;
  border-radius:16px;
    transition:2s all;
}
a{
    background:#635e37;
    display:inline-block;
  padding:5px;
  color:white;
 border-radius:13px;
line-height:3;
  margin:20px 0px 0px -70px;
 font-size:20px;

}
a:before{
    background:#635e37;
display:inline-block;
  content:'| | |';
  margin-left:20px;
  margin-right:70px;
  font-weight:900;
  transform:rotate(90deg);
  cursor:pointer;
}

li{
  
    color:white;
}

.rein{
right:-150px;
  transition:2s all;
}
</style>
<div>
  <a id="closeSidebar" href="#">Close</a> 
           <nav>
                
                <ul>
                    <li>Menüpunkt 1</li>
                    <li>Menüpunkt 2</li>
                    <li>Menüpunkt 3</li>
                </ul>
            </nav>
        
</div>
<script>
  document.getElementsByTagName('a')[0].addEventListener('click',function(){

document.getElementsByTagName('div')[0].classList.toggle('rein');
  
});
</script>