https://i.sstatic.net/GVcgu.png I am new to working with Angular and currently, I have a sidenav container with the content being a mat toolbar. My issue is that when viewed on a full-sized desktop, the background color of the toolbar stretches and fills the entire width, but on a phone, there is a gap left which doesn't look good.
I tried setting the mat sidenav content width to 100% hoping it would fill the entire space.
https://i.sstatic.net/tK6aH.png
Here is the HTML code for reference:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer
class="sidenav"
fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="false">
<mat-toolbar>
<button mat-button
(click)="drawer.close()">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar>
<mat-nav-list>
<a mat-list-item
routerLink="/"
(click)="drawer.close()">Home</a>
<a mat-list-item
routerLink="/products"
(click)="drawer.close()">Products</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
// Toolbar and other content here...
</mat-sidenav-content>
</mat-sidenav-container>
And here is the CSS styling:
.logo {
display: flex;
margin: auto auto;
outline: none;
align-self: center;
justify-content: center;
align-self: center;
min-width: 100px;
max-width: 100px;
.ww-logo {
width: 60%;
cursor: pointer;
}
}
.button {
border: 1px solid red;
width: 10px;
}
.sidenav-container {
height: 100%;
width: 100%;
}
mat-sidenav-content {
width: 100%;
}
Any help or suggestions would be greatly appreciated. Thank you!