What can I do to move this menu button from my sidebar to the right?

coud you help me please?.

Currently I'm creating this Angular Sidenav component, without jquery or Angular Material, just Angular tools, css and html.

I'm usin a ng-If to destroy the component when the red button is clicked, I'm using ng-class in the button to change the icon and also I'm using ng-class to try to move the wrapper Div with the button, but It doesn't work. The div and the button don't move.

HTML

<div class="sidebar" *ngIf="!open">
  <header>My App</header>
<ul>
  <li><a href="#"><i  class="fa fa-tachometer"></i>Dashboard</a></li>
  <li><a href="#"><i class="fa fa-external-link" aria-hidden="true"></i>Shortcuts</a></li>
  <li><a href="#"><i  class="fa fa-eye" aria-hidden="true"></i>Overview</a></li>
  <li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i>Events</a></li>
  <li><a href="#"><i class="fa fa-building-o" aria-hidden="true"></i>About</a></li>
  <li><a href="#"><i class="fa fa-paper-plane" aria-hidden="true"></i>Contact</a></li>
</ul>
</div>
<!-- SideNav -->
<!-- close / open button -->
<div id="menu" (click)="prueba()" [ngClass]="{'closed': !open}">
  <a  id="open-close">
    <i class="fa" [ngClass]="{'fa-bars': !open, 'fa-times': open}" ></i>
  </a>
</div>
<!-- close / open button -->

TypeScript

    export class SidenavaComponent implements OnInit {

  open: boolean;

  constructor() {

  }

  prueba() {
    this.open = !this.open;
    console.log(this.open);
  }

  ngOnInit() {
    this.open = true;
  }

}

Css

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.sidebar {
  position: fixed;
  width: 20%;
  height: 100%;
  background: white;
  box-shadow: 2px 2px 5px #999;
}
.sidebar header {
  font-size: 22px;
  color: white;
  line-height: 70px;
  text-align: center;
  background: #063146;
  user-select: none;
}
.sidebar ul a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color:#063146;
  padding-left: 40px;
  box-sizing: border-box;
  transition: .4s;
}
ul li:hover a{
  padding-left: 50px;
}
.sidebar ul a i{
  margin-right: 16px;
}


/* boton de cierre */

#menu {
position: fixed;
background-color: tomato;
width: 40px;
height:40px;
margin-left: 21%;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px solid #000000;
}

#open-close{
margin-top: 12%;
width: 35px;
height:35px;
margin-left: 21%;
}

.closed{
  margin-left: 1px;
}

I think you want something like this:

Stackblitz: https://stackblitz.com/edit/angular-ki5mus