@page "/"
<MatAppBarContainer style="width: 100%; height: 100%;">
<MatAppBar Fixed="true">
<MatAppBarRow>
<MatAppBarSection>
<MatIconButton Icon="menu" OnClick="@((e) => ButtonClicked())"></MatIconButton>
<MatAppBarTitle>MatBlazor</MatAppBarTitle>
</MatAppBarSection>
<MatAppBarSection Align="@MatAppBarSectionAlign.End">
<MatIconButton Icon="favorite"></MatIconButton>
</MatAppBarSection>
</MatAppBarRow>
</MatAppBar>
<MatAppBarContent >
<MatDrawerContainer style="width: 100%; height: 100%;">
<MatDrawer bind-Opened="@Opened">
<MatList>
<MatListItem>
<MatIcon>favorite</MatIcon>
<span style="padding-left: 10px;">Item 1</span>
</MatListItem>
<MatListItem>
<MatIcon>favorite</MatIcon>
<span style="padding-left: 10px;">Item 1</span>
</MatListItem>
<MatListItem>
<MatIcon>favorite</MatIcon>
<span style="padding-left: 10px;">Item 1</span>
</MatListItem>
</MatList>
</MatDrawer>
<MatDrawerContent>
<h1>Page Content</h1>
<p>MatBlazor comprises a range of components which implement common interaction patterns according to the Material Design specification.</p>
</MatDrawerContent>
</MatDrawerContainer>
</MatAppBarContent>
</MatAppBarContainer>
@functions
{
bool Opened = true;
void ButtonClicked()
{
Opened = !Opened;
}
}