Keep calendar header visible while scrolling

src/app/calendar-app/calendar-app.component.html

@@ -198,7 +198,7 @@ <h3 class="sideNavHeader">Calendar Menu</h3>
     </mat-sidenav>
 
     <mat-sidenav-content>
-        <mat-toolbar>
+        <mat-toolbar class="calendarToolbar">
             <button mat-icon-button (click)="sidemenu.toggle()">
                 <mat-icon svgIcon="menu"></mat-icon>
             </button>

src/app/calendar-app/calendar-app.component.scss

@@ -31,3 +31,21 @@
         padding: 16px;
     }
 }
+
+@media(min-width: 1025px) {
+    .calendarToolbar {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
+
+    :host ::ng-deep {
+        .cal-month-view .cal-header,
+        .cal-week-view .cal-day-headers {
+            background-color: #fff;
+            position: sticky;
+            top: 64px;
+            z-index: 9;
+        }
+    }
+}

src/app/calendar-app/calendar-app.component.spec.ts

@@ -228,6 +228,13 @@ END:VCALENDAR
         expect(icon.style.color).toBe('pink');
     });
 
+    it('should mark the calendar toolbar for sticky positioning', () => {
+        fixture.detectChanges();
+
+        const toolbar = fixture.debugElement.nativeElement.querySelector('mat-toolbar.calendarToolbar');
+        expect(toolbar).toBeTruthy();
+    });
+
     it('should display events', () => {
         mockData['events'] = simpleEvents;
         component.calendarservice.syncCaldav(true);