feat(Navigation) Improved desktop navigation UI

2022-04-12 11:32:02 -04:00
parent 13e2d5d5eb
commit 16223cd010
17 changed files with 308 additions and 271 deletions
@@ -0,0 +1,86 @@
+@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();
+    }
+
+}