Resizing mat-sidenav covers hamburger menu, won't auto size to content within?

[kelliev]

Hey thanks for this! I'm having a problem with the size of the . If I change the width, it covers the hamburger menu. 

It's also not automatically sizing to the text of the buttons, as stated. If I have a longer button name, it wraps instead of pushing out the width to accommodate. 

Spent quite a while viewing the source code but I can't find a way to change this? Please help, it's sooooooo close!

[jphillips03]

I know it's been a while since this was originally posted, but I came across this issue recently myself. I did find a workaround, and thought I might share what I did to fix it.

If you know the width of your sidenav content before it renders you can simply set the expandedWidth input provided by the directive. This defaults to 200px as noted in the readme.

If you don't know the width of your sidenav content before it renders (which was my case), just setting the expandedWidth is not enough at least the way I did it. I calculated the width of the content in the sidenav in the AfterViewInit of my component, and set the openAnimation input added by the directive to a custom function I added to my component. The function I added I just copied from the default config, but used the width I calculated in the AfterViewInit. Something like below.

Function added to component.ts:

// this.sidenavContentWidth is calculated in ngAfterViewInit
sidebarAnimationOpenGroup(
    animationDuration: string = '100ms', // same value used from default config
    maxWidth: string = this.sidenavContentWidth
): AnimationGroupMetadata {
    return group([
        query('@iconAnimation', animateChild(), { optional: true }),
        query('@labelAnimation', animateChild(), { optional: true }),
        animate(`${animationDuration} ease-in-out`, sidebarOpen(maxWidth))
    ]);
}

Code in component.html

<mat-sidenav rail-mode [opened]="opened" [expandedWidth]="sidenavContentWidth" [openAnimation]="sidebarAnimationOpenGroup()">
    <!-- content -->
</mat-sidenav>

NOTE: Just updating the expandedWidth value does not seem to change anything if you don't know the width beforehand and need to calculate it dynamically (probably because openAnimation is set in ngOnInit).

Hope this helps.