我该怎么做才能将这个菜单按钮从我的侧边栏移到右边？

Question

你能帮帮我吗？

目前我正在创建这个 Angular Sidenav 组件，没有 jquery 或 Angular Material，只有 Angular 工具， css 和 html.

我正在使用 ng-If 在单击红色按钮时销毁组件，我在按钮中使用 ng-class 来更改图标，我也在使用 ng- class 尝试用按钮移动包装器 Div，但它不起作用。 div 和按钮不动。

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;
}

Answer 1

我想你想要这样的东西：

堆栈闪电战： https://stackblitz.com/edit/angular-ki5mus

我该怎么做才能将这个菜单按钮从我的侧边栏移到右边？

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

html

javascript

css

angular

sidenav