1

I want the "Setting" drawer to respond to window resize like it does on this settings page. Taking a look at their style elements, I can see a lot of mat-drawer css classes that (I presume) handle the drawer's state and events:

mat-drawer mat-drawer-side mat-drawer-open etc.

Is there documentation on these css classes on how they function? Are they even Material classes?

Trying this, I would ignorantly expect the side-nav to be open by default without using opened on mat-drawer but it does not work.

<mat-drawer-container
    class="mat-drawer-container flex-auto sm:h-full mat-drawer-transition mat-drawer-container-has-open">
    <mat-drawer #drawer class="mat-drawer sm:w-96 dark:bg-gray-900 mat-drawer-side mat-drawer-opened"
        style="transform: none; visibility: visible;">
        <p>Sidenav open</p>
    </mat-drawer>
        <button type="button" mat-button (click)="drawer.toggle()">
            Toggle sidenav
        </button>
</mat-drawer-container>

I would like to achieve this drawer functionality with a similar method like theirs without using Angular HostListener decorator like this.

Jnr
  • 1,504
  • 2
  • 21
  • 36
  • I think that it's only use [css media querys](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) -remember that it's better defined for small screens and add more restrictions for bigger screens. e.g. `.side{width:100%} @media (min-width: 768px) {.side{width:400px }` – Eliseo Oct 13 '21 at 19:24

0 Answers0