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

Index

@page "/"
@page "/MatDrawerFrame"
 
<MatDrawerContainer Style="width: 100vw; height: 100vh;" class="mat-drawer-container-responsive">
    <MatDrawer bind-Opened="@Opened">
        Drawer Content
    </MatDrawer>
    <MatDrawerContent>
        <div>
            <MatButton OnClick="@((e) => ButtonClicked())">
                @if (Opened)
                {
                    <span>Hide Menu</span>
                }
                else
                {
                    <span>Open Menu</span>
                }
            </MatButton>
        </div>
        <p>Page Content</p>
    </MatDrawerContent>
</MatDrawerContainer>
 
 
@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>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<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>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
	</script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
	</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.