Как показать меню гамбургеров только на мобильном Angular?

У меня обычная навбар на больших экранах. Я хочу, чтобы гамбургер-меню отображалось только на мобильных устройствах, а значок меню отображался только на мобильных устройствах. Я хочу добиться этого с помощью 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;
}

angular toggle hamburger-menu
person Sarah Barlow    schedule 23.01.2021    source источник
comment
youtube.com/ Посмотрите это видео, она использовала scss , и она показывает гамбургер на мобильном и прячет на рабочем столе.   -  person Cegone    schedule 23.01.2021

Ответы (2)


arrow_upward
0
arrow_downward

Если вы хотите отобразить что-то только на маленьких экранах, вы можете использовать медиа-запросы в CSS.

.hamburger {
  display: block;
}

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

Вот окончательное решение в Stackbiltz

person Hojjatollah Bakhtiyari Kiya    schedule 23.01.2021
comment
Когда я это делаю, вся панель навигации исчезает, она даже не отображается в больших размерах. Что делать? - person Sarah Barlow; 24.01.2021
comment
Добавьте другие стили для нормального размера - person Hojjatollah Bakhtiyari Kiya; 24.01.2021
comment
Я отредактировал ответ для вас - person Hojjatollah Bakhtiyari Kiya; 24.01.2021
comment
Когда я это делаю, все навигационное меню исчезает на большом экране, а не только значок гамбургера. - person Sarah Barlow; 24.01.2021
comment
дай мне пример. потому что обновление включает и эту проблему - person Hojjatollah Bakhtiyari Kiya; 24.01.2021
comment
paste.ofcode.org/vXkYNJeMzkNPW75t5PkQKF Вот код css - person Sarah Barlow; 24.01.2021
comment
До сих пор не видно, как приходит код: linkedin.com/in/hojjatollah- бахтияри-кия-391009100 - person Hojjatollah Bakhtiyari Kiya; 24.01.2021
comment
Я посылаю вам соединение на linkedin - person Sarah Barlow; 24.01.2021

arrow_upward
1
arrow_downward

Как правило, использование медиа-запросов является лучшим подходом: сначала для мобильных устройств, а затем скорректируйте дизайн для более крупных устройств.

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

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