Angular Material Sidenav CSS issue

Issue

So I'm trying the route using mat-sideNav, but I got a CSS issue in sidenav after selecting on new route. what happens when I click on the new route using the sidenav module and open a particular route page when I again go back to the sidenav to change the route, I get the hover/focus on the first route in the background and that does not look good.

image of the sidenav module

html template file

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
    <div class="d-flex flex-column justify-content-center align-items-center py-2">
      <img class="avatar my-2" src="./assets/Images/DefaultPicture.jpg" />
      <div class="d-flex justify-content-center flex-column text-center">
        <p class="name md-info sm-header mb-0">{{ProfileDatails?.title[0]?.id != 'other' ? ProfileDatails?.title[0]?.title_name:
          ProfileDatails?.other_title }}</p>
        <!-- <p class="designation">{{ProfileDatails?.title[0]?.title_name ? ProfileDatails?.title[0]?.title_name:
          ProfileDatails?.other_title }}</p> -->
          <h5 class="">{{ProfileDatails?.first_name}} {{ ProfileDatails?.last_name }}</h5>
      </div>
    </div>

    <mat-divider></mat-divider>

    <mat-nav-list>
      <a routerLinkActive="active_list_item" mat-list-item routerLink="appointments">
        <mat-icon class="me-2 post-rel-top-5 fw-bold">list_alt</mat-icon>
        <span>Poojas</span>
      </a>

      <a routerLinkActive="active_list_item" mat-list-item routerLink="host">
        <mat-icon class="me-2 post-rel-top-5">group</mat-icon>
        <span>Yajmans</span>
      </a>

      <a routerLinkActive="active_list_item" mat-list-item routerLink="pooja">
        <mat-icon class="me-2 post-rel-top-5">edit_square</mat-icon>
        <span>Pooja's & Material</span>
      </a>

      <a routerLinkActive="active_list_item" mat-list-item routerLink="settings">
        <mat-icon class="me-2 post-rel-top-5">settings</mat-icon>
        <span>Settings</span>
      </a>

      <!-- <a mat-list-item (click)="openDialog()">
        <mat-icon class="me-2 post-rel-top-5">logout</mat-icon>
        <span>Logout</span>
      </a> -->
      <!-- <a
        routerLinkActive="active_list_item"
        mat-list-item
        class="d-flex align-items-center justify-content-between flex-row"
      >
        <mat-icon class="me-2 post-rel-top-5">info</mat-icon>
        <span>About</span>
      </a> -->
    </mat-nav-list>

    <mat-divider></mat-divider>
    <mat-nav-list>
      <a mat-list-item (click)="openDialog()">
        <mat-icon class="me-2 post-rel-top-5">logout</mat-icon>
        <span>Logout</span>
      </a>
    </mat-nav-list>
    <!-- <mat-nav-list>
      <a routerLinkActive="active_list_item" mat-list-item
        class="d-flex align-items-center justify-content-between flex-row">
        <mat-icon class="me-2 post-rel-top-5">help</mat-icon>
        <span>Help</span>
      </a>
    </mat-nav-list> -->
  </mat-sidenav>
  <mat-sidenav-content class="overflow-x-hidden">
    <mat-toolbar color="primary" class="z-3">
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
    </mat-toolbar>
    <mat-progress-bar class="position-absolute" color="accent" mode="indeterminate" value="40"
      *ngIf="this.ds.progressbar"></mat-progress-bar>
    <!--  -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

ts File

import { AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnChanges, OnInit, SimpleChanges, ViewChild, inject } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable, firstValueFrom } from 'rxjs';
import { filter, map, shareReplay, withLatestFrom } from 'rxjs/operators';
import { MatSidenav } from '@angular/material/sidenav';
import { NavigationEnd, Router } from '@angular/router';
import { LogoutComponent } from './logout/logout.component';
import { MatDialog } from '@angular/material/dialog';
import { DashboardService } from './dashboard.service';
import { Title } from '@angular/platform-browser';
import { CommonService } from '../services/common.service';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit, AfterViewInit, OnChanges, AfterViewChecked {
  @ViewChild(MatSidenav) sidenav!: MatSidenav;
  private breakpointObserver = inject(BreakpointObserver);

  constructor(private titleService: Title, private router: Router, public dialog: MatDialog, public ds: DashboardService, private cdr: ChangeDetectorRef, private comserv: CommonService, private toaster: ToastrService) {
    router.events.pipe(withLatestFrom(this.isHandset$),
      filter(([a, b]) => b && a instanceof NavigationEnd)
    ).subscribe(_ => {  
      //  this.sidenav?.close()
    }
    );
  }

  theme!: string;
  ProfileDatails: any;
  ngOnInit(): void {
    this.getProfile();
    // let data: any = localStorage.getItem('details');
    // this.ProfileDatails = JSON.parse(data);


    this.titleService.setTitle("Panditji | Dashboard");
    let theme = localStorage.getItem('theme');
    if (theme) {
      this.theme = theme;
    } else {
      this.theme = 'theme-light';
    }
    this.ds.renderBodywithClass(this.theme);
  }

  async getProfile() {
    try {
      let res: any = await firstValueFrom(this.ds.getProfile());
      if (res.status) {
        this.ProfileDatails = res.data;
      }
    } catch (e: any) {
      if (e.error.code == 401 || e.error.code == 403) {
        this.ds.sessionTimeout();
      } else {
        this.toaster.error('', e.error?.message ? e.error.message : 'Something went wrong');
      }
    }
  }

  ngAfterViewInit(): void {
    this.cdr.detectChanges();
  }

  ngOnChanges(changes: SimpleChanges): void { }

  ngAfterViewChecked() {
    this.cdr.detectChanges();
  }

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );

  openDialog(): void {
    const dialogRef = this.dialog.open(LogoutComponent, {
      width: '340px',
    });
  }
}

CSS file

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 250px;
}

.sidenav .mat-toolbar {
  background: inherit;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
}

.post-rel-top-5 {
  position: relative;
  top: 5px;
}


.active_list_item {
  border-left: 5px solid #ff8f00;
  background-color: #b8b8b8;
  word-wrap: normal;
}

.active_list_item>a {
  word-wrap: normal;
  background-color: #b8b8b8;
  border-left: 5px solid #ff8f00;
}

.z-index {
  z-index: 1000;
}

.avatar {
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

I tried to understand multiple articles/questions about this, did experiment with CSS in developer tool but didn't got solution

Solution

As per docs, the autofocus for the mat-drawer (and by extension mat-sidenav):

Defaults to false in when mode is set to side, otherwise defaults to true.

You can manually set the autoFocus behavior, like so:

  <mat-sidenav #drawer class="sidenav" fixedInViewport 
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" 
    [opened]="(isHandset$ | async) === false" 
    [autoFocus]="false">
    ...
    ...
  </mat-sidenav>

Answered By - TotallyNewb