Question Navbar Menu on the left is semi transparent after including MudBlazor to MainLayout.razor - Blazor

[Pablo]

Hello colleagues,
I have already started practising with MudBlazor, as cjard sugested me. The first issue I went into is that the left Navbar Menu started appearing semi transparent after adding MudBlazor "installation" code to MainLayout.razor (I followed the instructions to be able to use MudBlazor). Below I give the MainLayout.razor code and below a screenshot of what I see with the left Navbar Menu.

@inherits LayoutComponentBase

<PageTitle>BlazorServerDemo</PageTitle>

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        My Application
    </MudAppBar>
    <MudDrawer @bind-Open="@_drawerOpen">
        <NavMenu />
    </MudDrawer>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>

@code {
    bool _drawerOpen = true;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

@*<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>
*@

The other issue I'm running into is that, when I replaced normal HTML by MudBlazor code/tags in the "/calc" page, the calculation stopped working silently. Below I give the "calc" page code (where I first started using MudBlazor code/tags).

@page "/calc"

<PageTitle>Calculator</PageTitle>

<div style="background-color:chartreuse; width: 100%; border-color:brown; border-width: 5px;">
<h2>Calculator</h2>

<MudNumericField @bind-Value="op1" Variant="Variant.Outlined"></MudNumericField>
<br />
<MudSelect T="string" Label="sign" @bind-Value="sign" Variant="Variant.Outlined">
    <MudSelectItem Value="@("+ (plus)")"/>
    <MudSelectItem Value="@("- (minus)")" />
    <MudSelectItem Value="@("* (by)")" />
    <MudSelectItem Value="@("/ (divide)")" />
</MudSelect>
<br />
<MudNumericField @bind-Value="op2" Variant="Variant.Outlined"></MudNumericField>
<br />
<MudButton Color="Color.Success" Variant="Variant.Filled" @onclick="Calculate">Calculate</MudButton>
<br />
<MudNumericField @bind-Value="result" Variant="Variant.Outlined" ReadOnly="true"></MudNumericField>
<br />
@if (divideError)
{
    <p id="error">Division by zero error.</p>
}
</div>

@code {
    private double? op1, op2;
    private string sign = string.Empty;
    private double? result;
    private bool divideError = false;

    private void Calculate()
    {
        divideError = false;
        if (sign == "plus")
            result = op1 + op2;
        else if (sign == "minus")
            result = op1 - op2;
        else if (sign == "by")
            result = op1 * op2;
        else if (sign == "divide")
        {
            if (op2 == 0.0)
            {
                divideError = true;
                return;
            }
            result = op1 / op2;
        }
    }
}

I will appreciate your valuable help very much, as usual. Thanks.
Pablo

 

[cjard]

Transparency issue looks like a CSS thing..

MB do provide templates for new projects in VS so you can spark up a new solution with a new Blazor app that uses MB and alll the install steps are done for you could be worth doing

---

Put else{result=999;} on the end of your IF ELSEIF block to see what is going wrong

Then use a debugger

Then sort your MudSelectItems out