feat(Navigation) Improved desktop navigation UI

Components/Navigation/DesktopNavComponent.razor

@@ -2,33 +2,53 @@
 @inject INavigationService navigationService
 @implements IDisposable
 
-<div onmouseleave="@HoverOut" class="desktopNavContainer">
-    <div class="menuHeader" @onmouseover="() => navigationService.ChangeNavigationState(NavigationStateType.Hovering_Menu)">
+@{
+    var visibleStyle = navigationService.GetNavigationSectionId() > 0 ? "clickOffVisible" : "";
+}
+
+<div onclick="@MenuClosed" class="clickOffBackground @visibleStyle">
+
+</div>
+
+<div class="desktopNavContainer">
+    <div class="menuHeader">
         <NavLink href="/" class="websiteTitle">
             IGP Fan Reference
         </NavLink>
 
-        @foreach (var webSection in WebSections) {
-            <div class="sectionButton">@webSection.Name</div>
-        }
-    </div>
+        @foreach (var webSection in WebSections)
+        {
+            <div>
+                <button onclick="@(() => MenuClicked(webSection.Id))" class="sectionButton">@webSection.Name</button>
 
-    @{
-        var hoveredStyle = NavigationStateType.Hovering_Menu.Equals(navigationService.GetNavigationState()) ?
-            "navMenuContainerShow" : "";
-    }
-    <div class="navMenuContainer @hoveredStyle">
-        @foreach (var section in WebSections) {
-            var pages = (from page in WebPages
-                where page.WebSectionModelId == section.Id
-                select page).ToList();
 
-            <NavSectionComponent Section=section Children=pages/>
+                @if (webSection.Id.Equals(navigationService.GetNavigationSectionId()))
+                {
+                    <div class="navMenuPosition">
+                        <div class="navMenuContainer">
+                            <DesktopNavSectionComponent Section=webSection/>
+                        </div>
+                    </div>
+                }
+            </div>
         }
     </div>
 </div>
 
 <style>
+    .clickOffBackground {
+        top: 0;
+        left: 0;
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        visibility: hidden;
+    }
+    
+    .clickOffBackground.clickOffVisible {
+        visibility:visible;
+    }
+
     .sectionButton {
         cursor: pointer;    
     }
@@ -60,27 +80,32 @@
         color: white;
     }
 
+    .navMenuPosition {
+       position: relative;
+            
+       top: calc(100% - 18px);
+       left: -64px;
+       width: 0;
+       height: 0;
+    }
+
     .navMenuContainer {
-        display: none;
-        position: fixed;
-        top: 50px;
+        width: 330px;
         flex-direction: row;
         gap: 20px;
-        width: 100%;
         align-items: flex-start;
         justify-content: center;
         flex-wrap: wrap;
-        border-bottom: 4px solid black;
-        padding-top: 20px;
-        padding-bottom: 20px;
+        padding-top: 4px;
+        padding-bottom: 4px;
+        padding-left: 4px;
+        padding-right: 4px;
         background-color: rgba(22, 22, 24, 0.95);
-    }
-
-    .navMenuContainerShow {
+        border: 1px solid black;
+        border-radius: 4px;
         display: flex;
     }
 
-
     @@media only screen and (max-width: 1025px) {
         .desktopNavContainer {
             display: none;
@@ -96,21 +121,37 @@
 </style>
 
 @code {
-    
-    [Parameter] public List<WebSectionModel> WebSections { get; set; } = default!;
 
-    [Parameter] public List<WebPageModel> WebPages { get; set; } = default!;
-    
+    [Parameter]
+    public List<WebSectionModel> WebSections { get; set; } = default!;
 
-    protected override void OnInitialized() {
+    [Parameter]
+    public List<WebPageModel> WebPages { get; set; } = default!;
+
+
+    protected override void OnInitialized()
+    {
         navigationService.Subscribe(StateHasChanged);
     }
 
-    void IDisposable.Dispose() {
+    void IDisposable.Dispose()
+    {
         navigationService.Unsubscribe(StateHasChanged);
     }
 
-    void HoverOut(MouseEventArgs mouseEventArgs) {
+    void MenuClicked(int menuName)
+    {
+        Console.WriteLine($"MenuClicked {menuName}");
+        navigationService.ChangeNavigationSectionId(menuName);
+    }
+
+    void MenuClosed()
+    {
+        navigationService.ChangeNavigationSectionId(-1);
+    }
+
+    void HoverOut(MouseEventArgs mouseEventArgs)
+    {
         Console.WriteLine(NavigationStateType.Default);
         navigationService.ChangeNavigationState(NavigationStateType.Default);
     }

Components/Navigation/DesktopNavLinkComponent.razor

@@ -1,18 +1,15 @@
-@using Services
-@using Model.Website
-@using Model.Website.Enums
-@inject INavigationService navigationService;
+@inject INavigationService navigationService;
 @inject NavigationManager navigationManager;
 
 @if (isOnPage) {
-    <NavLink href="@Page.Href" class="navContainer navLink navSelected">
+    <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="navContainer navLink">
+    <NavLink @onclick="() => navigationService.ChangeNavigationState(NavigationStateType.Default)" href="@Page.Href" class="desktopNavLink">
         <div class="navName">
             @Page.Name
         </div>
@@ -20,16 +17,6 @@ else {
 }
 
 <style>
-    .navContainer {
-        cursor: pointer;
-        border: 2px solid black;
-        border: none;
-        height: 60px;
-        width: 100%;
-        display: block;
-        display: flex;
-        border: none;
-    }
 
     .navName {
         margin: auto;
@@ -40,12 +27,27 @@ else {
     }
 
 
-    .navLink {
+    .desktopNavLink {
+        cursor: pointer;
+        height: 60px;
+        width: 100%;
+        display: flex;
+    
         background-color: var(--primary);
         border: 1px solid var(--primary);
     }
-
-        .navLink:hover {
+    
+    .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);

Components/Navigation/DesktopNavSectionComponent.razor

@@ -0,0 +1,30 @@
+@using Model.Website
+
+<div class="sectionContainer">
+    @foreach (var childPage in Section.WebPageModels) {
+        if (childPage.IsPrivate.Equals("True")) {
+            continue;
+        }
+        <DesktopNavLinkComponent Page=childPage></DesktopNavLinkComponent>
+    }
+</div>
+
+<style>
+    .sectionContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        justify-content: flex-start;
+        position: relative;
+        width: 100%;
+    }
+    
+    
+</style>
+
+@code {
+
+    [Parameter]
+    public WebSectionModel Section { get; set; } = default!;
+
+}

Components/Navigation/NavSectionComponent.razor

@@ -1,59 +0,0 @@
-@using Model.Website
-
-<div class="sectionContainer">
-    <div class="sectionHeader">
-        <div class="sectionTitle">
-            @Section.Name
-        </div>
-    </div>
-
-    @foreach (var childPage in Children) {
-        if (childPage.IsPrivate.Equals("True")) {
-            continue;
-        }
-        <NavLinkComponent Page=childPage></NavLinkComponent>
-    }
-</div>
-
-<style>
-    .sectionContainer {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        justify-content: flex-start;
-        position: relative;
-        margin-top: 12px;
-        padding: 18px;
-        width: 300px;
-        margin-left: 4px;
-    }
-
-    .sectionHeader {
-        bottom: 100%;
-        position: absolute;
-        top: 0px;
-        left: -8px;
-        padding-right: 12px;
-        padding-left: 4px;
-        width: 100%;
-        display: flex;
-        line-height: 0px;
-    }
-
-    .sectionTitle {
-        font-weight: bold;
-        padding-right: 8px;
-        margin-top: -2px;
-        white-space: pre;
-    }
-</style>
-
-@code {
-
-    [Parameter]
-    public WebSectionModel Section { get; set; } = default!;
-
-    [Parameter]
-    public List<WebPageModel> Children { get; set; } = default!;
-
-}

Components/Navigation/TabletNavComponent.razor

@@ -19,23 +19,23 @@
 
 
     <div class="tabletNav @navOpen">
-        @foreach (var _section in WebSections) {
+        @foreach (var webSection in WebSections) {
             var pages = (from page in WebPages
-                where page.WebSectionModelId == _section.Id
+                where page.WebSectionModelId == webSection.Id
                 select page).ToList();
 
             <div>
                 <div>
-                    @_section.Name
+                    @webSection.Name
                 </div>
 
                 <div class="tabletNavItems">
-                    @foreach (var _page in pages) {
-                        if (_page.IsPrivate.Equals("True")) {
+                    @foreach (var webPage in pages) {
+                        if (webPage.IsPrivate.Equals("True")) {
                             continue;
                         }
-                        <NavLink href="@_page.Href" class="tabletNavItem" @onclick="OnPageClicked">
-                            @_page.Name
+                        <NavLink href="@webPage.Href" class="tabletNavItem" @onclick="OnPageClicked">
+                            @webPage.Name
                         </NavLink>
                     }
                 </div>