Material Sidenav overflows content if image is in sidenav - html

Question

Good morning!
I'm using a Material Design side navigation in my Angular app to offer page selection to the user. The side navigation contains a logo first and then all the pages the user can choose from - if he is logged in.
Problem:
If the user is not logged in, the logo is the element with the biggest width; and that confuses the positioning of the page content. The page content is overflowed by the sidenav, because the page content is aligend with the page links but not with the logo.
As you can see the sidenav respects the width of the logo. The content does not.
HTML:
<mat-card>
<mat-sidenav-container>
<mat-sidenav #drawer mode="side" opened role="navigation">
<mat-nav-list>
<div class="logo-nav">
<img src="./assets/MyLogo.png">
</div>
<a id="nav-home" mat-list-item routerLink='home' routerLinkActive="active">Home</a>
<a id="nav-schulauswahl" mat-list-item routerLink='page1' routerLinkActive="active" *ngIf="loggedIn">
Page 1
</a>
<a id="nav-schule-list" mat-list-item routerLink='page2' routerLinkActive="active" *ngIf="loggedIn">
Page 2 with very long name
</a>
<a id="nav-logout" mat-list-item (click)='logout()' routerLinkActive="active">Logout</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
Some Content
</mat-sidenav-content>
</mat-sidenav-container>
</mat-card>
Typescript:
import { Component } from '#angular/core';
#Component({
selector: 'my-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent {
get loggedIn(): boolean {
return true; // <- Toogle this to see all page links
}
}
The core of the problem: The margin-left of mat-sidenav-content is calculated wrongly. As a workaround I hard coded it to 230px but this of course produces an ugly gap between sidenav and content if the user is not logged in:
CSS:
#import '../../styles/colors.scss';
.logo-nav {
width: 100%;
text-align: center;
}
// Workaround
mat-sidenav-content {
margin-left: 230px !important;
}
If the user is logged in, then the longer page names appear which makes the left-margin being calculated correct.

Answer 1

There are multiple ways to fix this. For example:
Applying a width property to your logo image. Can be 100% or 230px as you have used.
.logo-nav img {
min-width: 230px;
}
Setting a width property to the sidenav itself. https://material.angular.io/components/sidenav/overview#setting-the-sidenav-39-s-size
.mat-sidenav {
width: 230px;
}
Changing the display of mat-nav-list to flex with column direction.
.mat-nav-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}