CODEWITHSUNDEEP
c#blazormudblazor
Riley Christian
Riley Christian

Reputation: 225

Unable to open the MudDrawer from NavMenu in blazor application

I am designing a windows-style notification drawer that open up when the user clicks on the button with MudBlazor. I am using MudDrawer that has a list of items, however so i am able so far to open the drawer when a user clicks on page BUT my requirement is to open up the drawer(MudDrawer) when a user clicks on an item on NavMenu. Here is what i have tried :

<MudPaper Width="250px" Elevation="0" Class="py-3">
    <MudNavMenu Bordered="true">
        <MudNavLink Href="/dashboard">Dashboard</MudNavLink>
        <MudNavLink Href="/reminders" >Reminders</MudNavLink>
        <MudNavLink Href="/about">About</MudNavLink>
    </MudNavMenu>
</MudPaper>

and the Reminders razor component code looks like this:

@page "/reminders"
<div class="d-flex">
    <MudButton Color="Color.Inherit" OnClick="@ToggleDrawer" StartIcon="@Icons.Material.TwoTone.Schedule" Class="mx-2">Show notifications</MudButton>
</div>
<MudDrawerContainer Class="mud-height-full">
    <MudDrawer @bind-Open="@open" Width="450px" Fixed="true" Elevation="24" Variant="@DrawerVariant.Temporary"
               DisableOverlay="false" Style="background-color:whitesmoke;position:fixed;" Anchor="Anchor.End">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">List of Reminders</MudText>
        </MudDrawerHeader>
        @foreach(var reminder in ReminderList)
        {
            <MudCard>
                <MudCardHeader>
                    <CardHeaderContent>
                        <MudText Typo="Typo.h6">@reminder</MudText>
                        <MudText Typo="Typo.caption">@DateTime.Now.ToString("dddd hh:mm tt")</MudText>
                    </CardHeaderContent>
                    <CardHeaderActions>
                        <MudTooltip Text="Delete">
                            <MudIconButton Icon="@Icons.Material.Filled.Close" Color="Color.Default" />
                        </MudTooltip>
                        <MudTooltip Text="Settings">
                            <MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Default"/>
                        </MudTooltip>
                    </CardHeaderActions>
                </MudCardHeader>
            </MudCard>
            <MudDivider />
        }
        
    </MudDrawer>
</MudDrawerContainer>

@code {
     public List<string> ReminderList {get; set;} = new List<string>
     {
         "Reminder 1",
         "Reminder 2",
         "Reminder 3"
     };

     public bool open = false;

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

The way this works is that the user clicks on the menu 'Reminders' then the reminders page is open and on the reminder there is button 'Show notifications' that open up the drawer. What i want is just to click on the menu 'Reminders' and then the drawer is opened up.

The working demo can be found here I appreciate any help.

Upvotes: 2

Views: 2474

Answers (1)

RBee
RBee

Reputation: 4967

MudDrawer is a responsive component. That means that the initial value for MudDrawer.Open depends on the window/screen size. You're accessing that property here @bind-Open="@open". And setting the initial value for it as false here public bool open = false;

So here's two ways you can solve your problem.

  1. Set the initial value of open to true public bool open = true;, then the drawer will open only when the window size is big enough. (You can try this by increasing the display window size on try.mudblazor ).
  2. If you want the drawer to open even if the window size is not big enough then you can override the OnParametersSetAsync() like below.
public bool open;
protected override async Task OnParametersSetAsync()
{
    await Task.Run(()=>{open = true; });
}

snippet for 2nd option

Upvotes: 3

Related Questions