如何仅在移动 Angular 上显示汉堡菜单？

Question

我在大屏幕上有一个常规的导航栏。我希望仅在移动设备上拥有汉堡菜单，并且仅在移动设备上显示菜单图标。我想用 Angular 来实现这一点（我是初学者）。我该怎么做，不想使用 Angular 材料。这是我的代码。

<div class="b-navbar">
    <div class="b-navbar__toggle">
      <button (click)="onToggle()" class="b-navbar__button">
        <fa-icon [icon]="hamburgerBars" class="b-navbar__icon"></fa-icon>
      </button>
    </div>
    <ul class="b-navbar__nav" *ngIf="showToggle">
      <li class="b-navbar__nav">
        <a routerLink="/home" class="b-navbar__link">Home</a>
      </li>
      <li class="b-navbar__nav">
        <a class="b-navbar__link" href="#">Services</a>
      </li>
      <li class="b-navbar__nav">
        <a routerLink="/about" class="b-navbar__link">About</a>
      </li>
      <li class="b-navbar__nav">
        <a class="b-navbar__link" href="#">Reviews</a>
      </li>
      <li class="b-navbar__nav">
        <a class="b-navbar__link" href="#">Locations</a>
      </li>
      <li class="b-navbar__nav">
        <a routerLink="/contact" class="b-navbar__link">Contacts</a>
      </li>
    </ul>
  </div>

角度代码`

hamburgerBars = faBars;
onToggle() {
    this.showToggle = !this.showToggle;
}





    

Answer 1

通常，使用媒体查询是更好的方法：“首先是移动设备，然后为更大的设备调整设计”

.b-navbar__nav { //by defect not show
  display: none;
}

@media (min-width: 600px) { //when larger screen
  .b-navbar__nav {
    display: block;
  }
}

Answer 2

如果您只想在小屏幕上显示某些内容，您可以在 CSS 中使用媒体查询。

.hamburger {
  display: block;
}

@media (max-width: 600px) {
  .hamburger {
    display: none;
  }
}

这是Stackbiltz中的最终解决方案