Адаптивная навигация с Angular 8 Material Sidenav?

Question

Я видел различные реализации (включая эту YouTube) , которые реализуют адаптивную навигацию для Angular Material Sidenav с использованием медиа-запросов.

Для Angular 8 нам все еще нужны пользовательские медиа-запросы/ CDK Media Запросы для реализации этого, или есть ли способ сделать это декларативно с компонентом?

Моя цель - реализовать адаптивный sidenav, подобный тому, который используется в Angular Material Documentation .

Answer 1

Если вы читаете угловые схемы , вы можете сгенерировать отзывчивый NAV-бар, используя Angular Material

Answer 2

Вы не можете сделать это полностью с медиазапросами, потому что структура DOM между рабочим столом, планшетом и мобильным устройством часто различается.

Например, вот рабочий стол с боковой панелью.

+-----+----------+
|     |          |
|     |          |
|     |          |
|     |          |
+-----+----------+

Структура DOM может выглядеть примерно так:

<div class="container">
   <div class="sidebar"></div>
   <div class="content"></div>
</div>

Когда мы переключаемся на что-то вроде мобильного, тогда боковая панель часто перекрывается с.container, чтобы пользователь мог открывать или закрывать боковую панель.Боковая панель отображается поверх контейнера и иногда имеет наложение темного фона.

Структура DOM может выглядеть примерно так:

<div class="sidebar"></div>
<div class="container">
   <div class="content"></div>
</div>

С макетом flex Вы можете изменить порядок элементов DOM, но изменить структуру DOM невозможно.Единственная альтернатива - визуализировать боковую панель дважды в HTML, чтобы вы показывали одну для настольного компьютера, а другую для мобильного, но сама по себе это не лучшая практика.