Issue

This Content is from Stack Overflow. Question asked by Papa007

how create login/logout button icon after the navbar-toggler-icon?
the login/logout button depend of you are(or not) authorired; the
icon’s are oi-account-logout or oi-account-login.
the login/logout button depend of you are(or not) authorired; the
icon’s are oi-account-logout or oi-account-login.
code loginComponent.razor :

<AuthorizeView>
            <Authorized>  
                <div id="txt-right-header" style="font-size:12px" >
                    <NavLink class="nav-link">
                        <span class="oi oi-person" aria-hidden="true"></span> @context.User?.Identity?.Name
                    </NavLink>
        
                    <NavLink class="nav-link" href="users/logout">
                        <span class="oi oi-account-logout" aria-hidden="true"></span> Sign Out
                    </NavLink>
                </div>
        
            </Authorized>
        
            <NotAuthorized>
                <div id ="txt-right-header" style="font-size:12px">
                    <NavLink class="nav-link float-end" href="users/login">
                        <span class="oi oi-account-login" aria-hidden="true"></span> Sign In
                    </NavLink>
                </div>
                
        
            </NotAuthorized>
        
        </AuthorizeView>
        
        @code {
        
        }

Code NavMenu.razor :

    <div class="top-row navbar navbar-dark text-center">
        <div class="container-fluid ">
            <a href="#">
                <img src="images/PegasusRTransparant.png" height="40" with="40" alt="" />
            </a>
            <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
                <span class="navbar-toggler-icon"></span>
                
            </button>
            <a>Test</a>
        </div>
    </div>
    
    <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
        <nav class="flex-column">
            
            <AuthorizeView>
                
                <Authorized>
                    
                    <div class="nav-item px-3">
                        <NavLink class="nav-link" href="users/register">
                            <span class="oi oi-plus" aria-hidden="true"></span> Register
                        </NavLink>
                    </div>
                </Authorized>           
    
            </AuthorizeView>
    
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                    <span class="oi oi-home" aria-hidden="true"></span> Home
                </NavLink>
            </div>
        
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

Solution

You could add the onclick event to a button and add AuthorizeView After the button

          <div class="......">
                <button  class=......." @onclick="ToggleNavMenu">
                    <span class="navbar-toggler-icon"></span>
                </button>                
                <AuthorizeView>
                <Authorized>
                    <a href="Identity/Account/Logout">Log out</a>
                </Authorized>
                <NotAuthorized>
                    <a href="Identity/Account/Login">Log in</a>
                </NotAuthorized>
                </AuthorizeView>
            </div>

Result:

This Question was asked in StackOverflow by Papa007 and Answered by Ruikai Feng It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.