CaritasPWA/Shared/NavMenu.razor

<MatAppBarContainer>
    <MatAppBar Fixed="true">
        <MatAppBarRow>
            <MatAppBarSection>
                <MatIconButton Icon="menu" OnClick="@((e) => ButtonClicked())"></MatIconButton>
                <MatAppBarTitle>CaritasPWA</MatAppBarTitle>
            </MatAppBarSection>
            @*<MatAppBarSection Align="@MatAppBarSectionAlign.Start">
                <NavLink class="text-white nav-link" href="" Match="NavLinkMatch.All">
                    Home
                </NavLink>
                <NavLink class="text-white nav-link" href="counter">
                    Counter
                </NavLink>
                <NavLink class="text-white nav-link" href="fetchdata">
                    Fetch Data
                </NavLink>
            </MatAppBarSection>*@
            <MatAppBarSection Align="@MatAppBarSectionAlign.End">
                <NavLink class="text-white" href="http://blazor.net" Align="@MatAppBarSectionAlign.End" Style="padding-right:1em">About</NavLink>
            </MatAppBarSection>
        </MatAppBarRow>
    </MatAppBar>
    <MatAppBarContent>
        <MatDrawerContainer>
            <MatDrawer @bind-Opened="@Opened" Mode="@MatDrawerMode.Modal">
                <MatList>
                    <MatListItem Class="@((Index == 1)?"bg-primary-color text-white" : "")"
                                 href=""
                                 Match="NavLinkMatch.All"
                                 @onclick="@((e) => ButtonClicked(1))">
                        <MatIcon Icon="@MatIconNames.Apps"></MatIcon>
                        <MatListItemText Style="padding-left:0.5em">Caritas Dienste</MatListItemText>
                    </MatListItem>
                    <MatListItem Class="@((Index == 2)?"bg-primary-color text-white" : "")"
                                 Href="counter"
                                 @onclick="@((e) => ButtonClicked(2))">
                        <MatIcon Icon="@MatIconNames.Person_outline"></MatIcon>
                        <MatListItemText Style="padding-left:0.5em">Konto</MatListItemText>
                    </MatListItem>
                    <MatListItem Class="@((Index == 3)?"bg-primary-color text-white" : "")"
                                 Href="fetchdata"
                                 @onclick="@((e) => ButtonClicked(3))">
                        <MatIcon Icon="@MatIconNames.Error_outline" Style="transform: rotate(180deg)"></MatIcon>
                        <MatListItemText Style="padding-left:0.5em">Info</MatListItemText>
                    </MatListItem>
                    <MatListItem Class="@((Index == 4)?"bg-primary-color text-white" : "")"
                                 Href="counter"
                                 @onclick="@((e) => ButtonClicked(4))">
                        <MatIcon Icon="@MatIconNames.Exit_to_app"></MatIcon>
                        <MatListItemText Style="padding-left:0.5em">Logout</MatListItemText>
                    </MatListItem>
                </MatList>
            </MatDrawer>
        </MatDrawerContainer>

    </MatAppBarContent>
</MatAppBarContainer>


@code
{
    bool Opened = false;

    int Index = 0;

    void ButtonClicked() {
        Opened = !Opened;
    }

    void ButtonClicked(int _Index) {
        Index = _Index;
        ButtonClicked();
    }
}