How to style sidenav

Styles from the material/sidenav package can be customized using the sidenav-overrides mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example:
@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.sidenav-overrides((
    container-background-color: orange,
    container-text-color: red,
  ));
}
You can find the full list of supported mixins and tokens below.

Tokens supported by sidenav-overrides

NameTypeBased on system token
container-shapeBase None
container-elevation-shadowBase None
container-widthBase None
container-divider-colorBase None
container-background-colorColor--mat-sys-surface
container-text-colorColor--mat-sys-on-surface-variant
content-background-colorColor--mat-sys-background
content-text-colorColor--mat-sys-on-background
scrim-colorColor None
Azure & Blue theme selected.