Show text in the toolbar when title of the page is not visible in the sidenav content

Question

I'm working on an angular project (I'm still learning, still a newbie). I would like to know how to set the title (driver name and information) in the toolbar when the toolbar overlaps the text (JAMES SMITH- PLACA: ABC1234) when the user scrolls down the sidenav page content.

I forked a boilerplate sidenav code to share with you https://stackblitz.com/edit/angular-closing-side-nav-in-mobile-z35xfw?file=app/sidenav-responsive-example.html

This is what I want to achieve.

Thanks in advance for your help.

Answer 1

I did this feature, and you can see it here in stackblitz basically, I did a ref to the title (check the line 39 in the HTML), and the logic to check if this title is visible is:

this.titleIsVisible =
      bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.right <=
        (window.innerWidth || document.documentElement.clientWidth) &&
      bounding.bottom <=
        (window.innerHeight || document.documentElement.clientHeight);

To listen the scroll event I used @HostListener("window:scroll", ["$event"]) in the TS and in the HTML I just used (scroll). To see this check the line 28 in the TS and the line 30 in the HTML.

Just in case, this is the code.

import { Component, ViewChild, ElementRef, HostListener } from "@angular/core";
import {
  BreakpointObserver,
  Breakpoints,
  BreakpointState
} from "@angular/cdk/layout";
import { FormControl } from "@angular/forms";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
/** @title Responsive sidenav */
@Component({
  selector: "sidenav-responsive-example",
  templateUrl: "sidenav-responsive-example.html",
  styleUrls: ["sidenav-responsive-example.css"]
})
export class SidenavResponsiveExample {
  @ViewChild("drawer") drawer: any;
  @ViewChild("title") title: ElementRef;

  public selectedItem: string = "";
  public isHandset$: Observable<boolean> = this.breakpointObserver
    .observe(Breakpoints.Handset)
    .pipe(map((result: BreakpointState) => result.matches));
  public titleIsVisible: boolean = true;

  constructor(private breakpointObserver: BreakpointObserver) {}

  @HostListener("window:scroll", ["$event"])
  onScroll() {
    const bounding = this.title.nativeElement.getBoundingClientRect();
    this.titleIsVisible =
      bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.right <=
        (window.innerWidth || document.documentElement.clientWidth) &&
      bounding.bottom <=
        (window.innerHeight || document.documentElement.clientHeight);

  }

  closeSideNav() {
    if (this.drawer._mode == "over") {
      this.drawer.close();
    }
  }
}

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary" style="margin-top:30px;"> Business</mat-toolbar>

    <mat-nav-list >
      <mat-list-item  (click)="closeSideNav()">
        <mat-icon matListIcon>home</mat-icon>
        <a matLine>Home</a>
      </mat-list-item>

      <mat-list-item (click)="closeSideNav()">
        <mat-icon matListIcon>person</mat-icon>
        <a matLine>Customers</a>
      </mat-list-item>

      <mat-list-item (click)="closeSideNav()">
        <mat-icon matListIcon>group_work</mat-icon>
        <a matLine>employees</a>
      </mat-list-item>

      <mat-list-item (click)="closeSideNav()">
        <mat-icon matListIcon>business</mat-icon>
        <a matLine>business</a>
      </mat-list-item>

    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content (scroll)="onScroll($event)">
    <mat-toolbar color="primary">
      <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>
      <h1 *ngIf=!titleIsVisible>TITLE</h1>
    </mat-toolbar>

    <div class="ylb-app-content">
      <h1 #title >TITLE</h1>
      <div >
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

      </div>
      <ng-content>



      </ng-content>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>