Angular Material SideNav - Rail mode hidden on mobile

I'm using the excellent Rail directive for Angular Material SideNav component written by Jordan Hall https://github.com/Jordan-Hall/angular-material-rail-drawer-plugin

The directive adds a new mode for the sidenav, which creates a "rail" view that mimics the sidenav in Visual Studio Code. What I am trying to do is have that rail completely hidden when the app is in low resolution mode (mobile or less than small).

I tried binding the "mode" property to a class property which swaps between "over" and "rail" based on a media query in the class:

<mat-sidenav #appDrawer [mode]="sideNavMode" [opened]="isOpen">

sideNavMode: string {
   if (this.media.isActive('gt-sm')) {
   return 'rail';}
   return 'over';
}

This works perfectly when I switch between the standard sidenav modes, "over", "side" and "push", but will not work for the mode "rail". If I bind the mode property to "rail", the rail directive extension is never used, and the sidenav behaves as the original "over". I see other people have raised exactly the same issue with the developer - but he is unable to help at the moment.

I have done some general research as to why extension directives might behave like this, but have been unable to understand the cause.

I also tried coding around the issue - having two versions of the sidenav each with its own mode, but this causes formatting issues with the margins and flexlayout.

Edit: Original example from Author's page https://stackblitz.com/edit/angular-material-mini-variant

Example with bound "mode" property, not working: https://stackblitz.com/edit/angular-material-mini-variant-ubxuto

from Angular Material SideNav - Rail mode hidden on mobile