How to switch the main layout in Blazor?

Question

I am trying to archive it when the user press on the Login link at the upper left link containing login:

But instead, I am receiving this:

In other words: I'd like to go to a page without the nav bars of the main layout. How to archive it ?

MainLayout.razor

inherits LayoutComponentBase

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

  <div class="main">
    <div class="top-row px-4">
        <a href="/login" target="_blank" class="ml-md-auto">Login</a>
    </div>
    <div class="content px-4">
        @Body
    </div>
  </div>
</div>

Login.razor

@page "/login"
<style>
#login .container #login-row #login-column #login-box {
    margin-top: 120px;
    max-width: 600px;
    height: 320px;
    border: 1px solid #9C9C9C;
    background-color: #EAEAEA;
 }

    #login .container #login-row #login-column #login-box #login-form {
        padding: 20px;
    }

        #login .container #login-row #login-column #login-box #login-form #register-link {
            margin-top: -85px;
        }
</style>
<div id="login">
    <h3 class="text-center text-white pt-5">Login form</h3>
    <div class="container">
        <div id="login-row" class="row justify-content-center align-items-center">
            <div id="login-column" class="col-md-6">
                <div id="login-box" class="col-md-12">
                    <form id="login-form" class="form" action="" method="post">
                        <h3 class="text-center text-info">Login</h3>
                        <div class="form-group">
                            <label for="username" class="text-info">Username:</label><br>
                            <input type="text" name="username" id="username" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="password" class="text-info">Password:</label><br>
                            <input type="text" name="password" id="password" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
                            <input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
                        </div>
                        <div id="register-link" class="text-right">
                            <a href="#" class="text-info">Register here</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


@code {

}

Answer 1

You can Use the @layout Razor directive set to an EmptyLayout on the top of you login componant

@layout EmptyLayout

    **... you componant..**

Example of EmptyLayout

    @inherits LayoutComponentBase

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