Блог

У меня есть фиксированная панель навигации, которая открывается, когда пользователь нажимает на значок гамбургера. Проблема в том, что оно охватывает все элементы страницы, за исключением элементов, которые на самом деле являются компонентами Angular material.

Как вы можете видеть на рисунке, кнопки «Начать» и «маркеры» не включены в меню «гамбургер», как на остальной части страницы.

Это моя исправленная панель навигации scss:

 position: fixed;
width: 80vw;
height: 100vh;
z-index: 1000;
transition: 0.23s;
background-color: $snd-dark-lighter;

padding: 0 28px;

top: 0;
right: -100vw;

 

Кнопки действий html:

       <div class="container__action--buttons">
        <button mat-flat-button>
          Get started
          <mat-icon>arrow_forward</mat-icon>
        </button>
        <button mat-stroked-button>
          <mat-icon>info</mat-icon>
          Sonido token
        </button>
      </div>
 

кнопки действий scss:

         .container__action--buttons {
            button {
              font-size: 14px;
              font-weight: 400;

              height: 48px;

              amp;.mat-flat-button {
                background-color: $snd-green;
                margin-right: 25px;
              }

              amp;.mat-stroked-button {
                border: 1px solid $snd-white;
              }
            }
          }
 

Вместо того, чтобы использовать z-index и пытаться поместить свое меню поверх всех элементов на странице, вы можете попробовать использовать наложение Angular Material CDK. С помощью наложения вы можете отобразить свое меню, и наложение гарантирует, что оно будет выше всех элементов, отображаемых на странице.