You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Projet_Blazor/src/CraftSharp/Shared/HeaderLayout.razor

59 lines
2.6 KiB

<div class="topbar">
<nav class="navbar navbar-expand-md mb-4">
<div class="container-fluid bar">
<button class="navbar-toggler @NavButtonCssClass" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-label="Toggle navigation" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse @NavBarCssClass" id="navbarCollapse" @onclick="ToggleNavMenu">
<ul class="navbar-nav me-auto mb-0 mb-md-0 topbar_content" >
<li class="nav-item">
<NavLink class="nav-link" href="List">
<span class="topbar_item">
<img src="/Images/inventory_icon.png" class="topbar_itemimg"/> @Localizer["Inventory"]
</span>
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="list">
<span class="topbar_item">
<img src="/Images/shop_icon.png" class="topbar_itemimg"/> @Localizer["Shop"]
</span>
</NavLink>
</li>
<span class="img_wrap">
<img class="nav-image" src="Images/CraftSharp-Logo.png" alt="Logo Application"/>
<img class="nav-image" src="/Images/@(Localizer["subtext-img"]).png" width="70%" />
</span>
<li class="nav-item">
<NavLink class="nav-link" href="opening">
<span class="topbar_item">
<img src="/Images/opening_icon.png" class="topbar_itemimg"/> @Localizer["Opening"]
</span>
</NavLink>
</li>
<span class="btn_wrap">
<div class="button"> @Localizer["Login"]</div>
<div class="button"> @Localizer["Register"]</div>
</span>
</ul>
</div>
</div>
</nav>
</div>
@code {
private bool collapseNavMenu = true;
private string? NavBarCssClass => collapseNavMenu ? null : "show";
private string? NavButtonCssClass => collapseNavMenu ? "collapsed" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}