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.
86 lines
1.8 KiB
86 lines
1.8 KiB
@inject INavigationService navigationService; |
|
@inject NavigationManager navigationManager; |
|
|
|
@if (isOnPage) { |
|
<NavLink href="@Page.Href" class="desktopNavLink navSelected"> |
|
<div class="navName"> |
|
@Page.Name |
|
</div> |
|
</NavLink> |
|
} |
|
else { |
|
<NavLink @onclick="() => navigationService.ChangeNavigationState(NavigationStateType.Default)" href="@Page.Href" class="desktopNavLink"> |
|
<div class="navName"> |
|
@Page.Name |
|
</div> |
|
</NavLink> |
|
} |
|
|
|
<style> |
|
|
|
.navName { |
|
margin: auto; |
|
color: white; |
|
font-size: 1.3rem; |
|
font-weight: 600; |
|
text-align: center; |
|
} |
|
|
|
|
|
.desktopNavLink { |
|
cursor: pointer; |
|
height: 60px; |
|
width: 100%; |
|
display: flex; |
|
|
|
background-color: var(--primary); |
|
border: 1px solid var(--primary); |
|
} |
|
|
|
.desktopNavLink:first-of-type { |
|
border-top-left-radius: 4px; |
|
border-top-right-radius: 4px; |
|
} |
|
|
|
.desktopNavLink:last-of-type { |
|
border-bottom-left-radius: 4px; |
|
border-bottom-right-radius: 4px; |
|
} |
|
|
|
.desktopNavLink:hover { |
|
color: #8EC3FF; |
|
background-color: var(--primary-hover); |
|
border-color: var(--primary-border-hover); |
|
} |
|
|
|
.navSelected { |
|
background-color: var(--primary-hover); |
|
} |
|
|
|
</style> |
|
|
|
|
|
@code { |
|
|
|
[Parameter] |
|
public WebPageModel Page { get; set; } = default!; |
|
|
|
bool isOnPage = false; |
|
|
|
protected override Task OnParametersSetAsync() { |
|
var uri = navigationManager.Uri.Remove(0, navigationManager.BaseUri.Count()).ToLower(); |
|
|
|
isOnPage = Page.Href.ToLower().Equals(uri); |
|
return Task.CompletedTask; |
|
} |
|
|
|
|
|
void OnNavigationChanged() { |
|
StateHasChanged(); |
|
} |
|
|
|
void OnBack() { |
|
navigationService.Back(); |
|
} |
|
|
|
} |