[Blazor] 특정 페이지에서 Nav bar 없애기

Blazor로 웹 프로그램을 개발하던 중 특정 페이지에서만 Navigation bar를 hide해야 했다.

Main Layout을 건드리자니 nav bar가 제대로 나와야 하는 페이지들이 문제였다.

그래서 Service에 속성을 추가하고 이 데이터를 이용하여 Nav bar의 visible을 조작하였다.

 

namespace WebProgram
{
    public class NavbarControlService
    {
        public string NavBarVisible { get; set; }
    }
}

NavbarControlService에 NavBarVisible이라는 속성을 추가한다.

 

@inherits LayoutComponentBase
@inject NavbarControlService NavbarControlService
<TelerikRootComponent>
    <div class="page">
        <div class="sidebar @NavbarControlService.NavBarVisible">
            <NavMenu />
        </div>

        <div class="main">
            <div class="top-row px-4 @NavbarControlService.NavBarVisible">
                <a href="https://hyokye0ng.tistory.com/" target="_blank">About</a>
            </div>

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

MainLayout.lazor 파일에서 <NavMenu>가 들어있는 div class 이름에

NavbarControlService의 NavBarVisible 속성을 덧붙혀준다.

 

@page "/navbar_true"

@inject NavbarControlService NavbarControlService

@code
{
    protected override async Task OnInitializedAsync()
    {
        NavbarControlService.NavBarVisible = string.Empty;
    }
}

Navigation bar가 제대로 출력되어야 하는 페이지에서는

NavbarControlService의 NavBarVisible 속성의 값을 string.Empty로 설정해주고

 

@page "/navbar_false"

@inject NavbarControlService NavbarControlService

@code
{
    protected override async Task OnInitializedAsync()
    {
        NavbarControlService.NavBarVisible = "d-none";
    }
}

Navigation bar가 출력되지 않아야 하는 즉, hide되어야 하는 페이지에서는

NavbarControlService의 NavBarVisible 속성의 값을 d-none으로 설정해준다.

 

 

NavbarControlService의 NavBarVisible의 속성값이 string.Empty인 경우는 Nav bar가 제대로 나타날 것이고,

d-none인 경우는 숨겨질 것이다.