Nav link icons wrapped in tooltips flash when drawer shrinks

Question

I'm trying to emulate the drawer behavior of Gmail. Specifically, the hamburger icon in the app bar that expands/collapses the drawer. When the drawer is open, the icons and labels are visible. When it is collapsed, only the icons are visible. In the collapsed view, it is important to have tooltips so users know what the button does in case it isn't clear from the icon alone.

When I attempt this in MudBlazor, the nav link icons flash over to the right of their correct position when the drawer shrinks. This is not ideal behavior and I'm hoping someone knows some way to address this issue to make the shrink animation smooth.

Code snippet: https://try.mudblazor.com/snippet/wuQRbOviBxXatLUD

<MudLayout>
    <MudAppBar>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" OnClick="@ToggleDrawer" />

        <MudText>Drawer collapse animation issue</MudText>
    </MudAppBar>

    <MudDrawer @bind-Open="@open" Variant="@DrawerVariant.Mini" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.Xs">
        <MudNavMenu>
            <MudTooltip Text="Document List" Placement="Placement.Right">
                <MudNavLink Href="/" Icon="@Icons.Material.Filled.List">Document List</MudNavLink>
            </MudTooltip>
            <MudTooltip Text="Send Document" Placement="Placement.Right">
                <MudNavLink Href="/senddocument" Icon="@Icons.Material.Filled.Send">Send Document</MudNavLink>
            </MudTooltip>
            <MudTooltip Text="Manage Template" Placement="Placement.Right">
                <MudNavLink Href="/managetemplate" Icon="@Icons.Material.Filled.EditNote">Manage Template</MudNavLink>
            </MudTooltip>
            <MudDivider Class="my-2" />
            <MudTooltip Text="FAQ" Placement="Placement.Right">
                <MudNavLink Href="/faq" Icon="@Icons.Material.Filled.QuestionAnswer">FAQ</MudNavLink>
            </MudTooltip>
            <MudTooltip Text="Report an Error" Placement="Placement.Right">
                <MudNavLink Href="/reporterror" Icon="@Icons.Material.Filled.Error">Report an Error</MudNavLink>
            </MudTooltip>
            <MudTooltip Text="Logout" Placement="Placement.Right">
                <MudNavLink Href="/logout" Icon="@Icons.Material.Filled.Logout">Logout</MudNavLink>
            </MudTooltip>
        </MudNavMenu>
    </MudDrawer>
</MudLayout>

@code {
    bool open = false;

    void ToggleDrawer()
    {
        open = !open;
    }
}

Thanks in advance for any help.

Answer 1

MudToolTip does not break lines. If you would shorten the link names you will have them on the same row in the expanded menu.

Either put it inside a <MudItem> or add a <br /> after each MudToolTip.

Additionally add the style white-space: nowrap to the links to prevent them from wraping

<MudLayout>
    <MudAppBar>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" OnClick="@ToggleDrawer" />

        <MudText>Drawer collapse animation issue</MudText>
    </MudAppBar>

    <MudDrawer @bind-Open="@open" Variant="@DrawerVariant.Mini" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.Xs">
        <MudNavMenu>
            <MudTooltip Text="Document List" Placement="Placement.Right">
                <MudNavLink style="white-space: nowrap;" Href="/" Icon="@Icons.Material.Filled.List">Document List</MudNavLink>
            </MudTooltip>
            <br />
            <MudTooltip Text="Send Document" Placement="Placement.Right">
                <MudNavLink style="white-space: nowrap;" Href="/senddocument" Icon="@Icons.Material.Filled.Send">Send Document</MudNavLink>
            </MudTooltip>
            <br />
            <MudTooltip Text="Manage Template" Placement="Placement.Right">
                <MudNavLink style="white-space: nowrap;" Href="/managetemplate" Icon="@Icons.Material.Filled.EditNote">Manage Template</MudNavLink>
            </MudTooltip>
            <MudDivider Class="my-2" />
            <MudTooltip Text="FAQ" Placement="Placement.Right">
                <MudNavLink style="white-space: nowrap;" Href="/faq" Icon="@Icons.Material.Filled.QuestionAnswer">FAQ</MudNavLink>
            </MudTooltip>
            <br />
            <MudTooltip Text="Report an Error" Placement="Placement.Right">
                <MudNavLink style="white-space: nowrap;" Href="/reporterror" Icon="@Icons.Material.Filled.Error">Report an Error</MudNavLink>
            </MudTooltip>
            <br />
            <MudTooltip Text="Logout" Placement="Placement.Right">
                <MudNavLink style="white-space: nowrap;" Href="/logout" Icon="@Icons.Material.Filled.Logout">Logout</MudNavLink>
            </MudTooltip>
        </MudNavMenu>
    </MudDrawer>
</MudLayout>

@code {
    bool open = false;

    void ToggleDrawer()
    {
        open = !open;
    }
}

Code snippet: https://try.mudblazor.com/snippet/ckwHlYvXdQADhUGt