MudBlazor Justify Content to Bottom of Drawer

Question

I have an unexciting NavMenu component

<MudPaper Class="py-3" Elevation="0">
  <MudNavMenu>
   <MudNavLink Href="/" Match="NavLinkMatch.All">Home</MudNavLink>
   <MudNavLink Href="/posts" Match="NavLinkMatch.All">Articles</MudNavLink>
   <MudNavLink Href="/about" Match="NavLinkMatch.All">About</MudNavLink>
   </MudNavMenu>
  </MudPaper>
<MudSwitch @ref="@darkModeSwitch" *@ ... @* />

that is inside of a MudDrawer. What I'd really like is to have all the NavLinks at the top, and the switch at the bottom, but everything I've tried seems to have no effect. It seems like the MudDrawer component is set on things being in a list one after the other. What am I missing? Or is there a quick work around?

Mostly I tried screwing with putting a container surrounding the switch and giving it top margins, and using the align and justify flex classes.

Answer 1

You can use MudSpacer.

<MudDrawer @bind-Open="@open" Anchor="@anchor" Elevation="1" Variant="@DrawerVariant.Temporary">
    <MudDrawerHeader>
        <MudText Typo="Typo.h6">My App</MudText>
    </MudDrawerHeader>
    <MudPaper Class="py-3"  Elevation="0">
    <MudNavMenu>
        <MudNavLink Match="NavLinkMatch.All">Store</MudNavLink>
        <MudNavLink Match="NavLinkMatch.All">Library</MudNavLink>
        <MudNavLink Match="NavLinkMatch.All">Community</MudNavLink>
    </MudNavMenu>
    </MudPaper>
    <MudSpacer />
    <MudSwitch Class="pa-3" T="bool" Label="ToggleMe"/>
</MudDrawer>

Snippet