BlazorFiddle - Blazor .Net Developer Playground and Code Editor in the Browser.

Index

@page "/"
@page "/MatDrawerFrame"
 <header>
    <MatAppBarContainer>
    <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: 100vw; height: 100vh;" class="mat-drawer-container-responsive">
    <MatDrawer bind-Opened="@Opened">
        Drawer Content<br/>
        <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>
 </header>

 
 
@functions
{
    bool Opened = true;
 
    void ButtonClicked()
    {
        Opened = !Opened;
    }
 
}

namespace BlazorFiddleProject
{
    using Microsoft.AspNetCore.Components.Builder;
    using Microsoft.Extensions.DependencyInjection;


    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent<App>("app");
        }
    }
}

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width">
	<title>BlazorFiddleProject</title>

	<style>
		app {}

        .mat-drawer-container-responsive
        {
            display: flex;
            flex-direction: row;            
        }

		.mat-drawer-container-responsive .mdc-drawer {
			width: unset !important;
            position: relative;
		}

		.mat-drawer-container-responsive .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content {
            margin-left: unset !important;            
            position: relative;
            flex: 1;
        }

		
	</style>

	<script type="text/javascript">
	</script>
</head>

<body>
	<app>Loading...</app>

	<script src="_framework/blazor.webassembly.js"></script>

</body>

</html>

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.