I've seen various implementations (Including this youtube) that implement a responsive navigation for the Angular Material Sidenav using media queries.
For Angular 8 do we still need custom media queries / CDK Media Queries to implement this, or is there a way to do it declaratively with the component?
My goal is to implement a responsive sidenav similar to the one used in the Angular Material Documentation.
If you read angular schematics you can actually generate responsive NAV bar using Angular Material
You can't do it completely with media queries, because the DOM structure between desktop, tablet and mobile are often different.
For example, here is a desktop with a sidebar.
+-----+----------+
| | |
| | |
| | |
| | |
+-----+----------+
The DOM structure might be something like this:
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
When we switch to something like mobile, then the sidebar is often overlapped with the .container so that the user can open or close the sidebar. The sidebar is shown over top of the container and sometimes has a darkened background overlay.
The DOM structure might be something like this:
<div class="sidebar"></div>
<div class="container">
<div class="content"></div>
</div>
With flex layout you can modify the order of DOM elements, but it's not possible to change the DOM structure. The only alternative is to render the sidebar twice in the HTML so you show one for desktop and the other for mobile, but itself isn't the best practice.
