Change Mat-drawer State on Window Resize

Question

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.