Mat-toolbar won't take primary colour

Question

Following the very simple steps to create a responsive toolbar with sidenav, I have a small issue that's been driving me crazy.

From the basic schematic of ng generate @angular/material:navigation sideNav

I want the toolbar to seem to extend over the sidebar. There's already a toolbar there but in the default schematic it's css is set to inherit the background:

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

So if I comment that out and then add the colour to the <mat-toolbar color="primary">Menu</mat-toolbar>

I get this white line separating the two toolbars.

I could manually make a toolbar outside of the sidenav div but I'm pretty sure that's the wrong way to go about it and I feel like there's something really simple and obvious I'm not getting.

Any pointers greatly appreciated.

Answer 1

Try to implement fixedTopGap from the MatSidenav API - this will allow your sidenav to slide out under your toolbar with no overlap