style(Navigation) Style changes to desktop navigation

Components/Navigation/DesktopNavComponent.razor

@@ -18,15 +18,21 @@
 
         @foreach (var webSection in WebSections)
         {
+            var isSelected = navigationService.GetNavigationSectionId().Equals(webSection.Id);
+            var sectionButtonStyle = "sectionButton";
+            if (isSelected)
+            {
+                sectionButtonStyle += " sectionButtonSelected";
+            }
+            
             <div>
-                <button onclick="@(() => MenuClicked(webSection.Id))" class="sectionButton">@webSection.Name</button>
+                <button onclick="@(() => { MenuClicked(webSection.Id); })" class="@sectionButtonStyle">@webSection.Name</button>
 
-
+                @if (isSelected)
-                @if (webSection.Id.Equals(navigationService.GetNavigationSectionId()))
                 {
                     <div class="navMenuPosition">
                         <div class="navMenuContainer">
-                            <DesktopNavSectionComponent Section=webSection> </DesktopNavSectionComponent>
+                            <DesktopNavSectionComponent Section=webSection /> 
                         </div>
                     </div>
                 }
@@ -50,7 +56,13 @@
     }
 
     .sectionButton {
-        cursor: pointer;    
+        cursor: pointer;  
+        padding-left: 12px;
+        padding-right: 12px;
+        padding-top: 10px;
+        top: -11px;
+        position: relative;
+        z-index: 50000;
     }
 
     .desktopNavContainer {
@@ -69,7 +81,7 @@
         padding: 12px;
         display: flex;
         justify-content: center;
-        gap: 32px;
+        gap: 8px;
         height: 50px;
         background-color: var(--accent);
     }
@@ -78,13 +90,13 @@
     .websiteTitle {
         font-weight: bold;
         color: white;
+        margin-right: 32px;
     }
 
     .navMenuPosition {
        position: relative;
-            
+       top: calc(100% - 36px);
-       top: calc(100% - 18px);
+       left: calc(50% + -330px / 2);
-       left: -64px;
        width: 0;
        height: 0;
     }
@@ -105,6 +117,13 @@
         border-radius: 4px;
         display: flex;
     }
+    
+    .sectionButtonSelected {
+        padding-bottom: 14px;
+        box-shadow: 0 2px 3px black;
+        background-color: var(--info);
+        transform: translateY(-1px) scale(1.08);
+    }
 
     @@media only screen and (max-width: 1025px) {
         .desktopNavContainer {

Components/Navigation/DesktopNavLinkComponent.razor

@@ -11,7 +11,9 @@
 }
 else
 {
-    <NavLink @onclick="() => navigationService.ChangeNavigationState(NavigationStateType.Default)" href="@Page.Href" class="desktopNavLink">
+    <NavLink @onclick="() => { 
+        navigationService.ChangeNavigationState(NavigationStateType.Default); 
+        navigationService.ChangeNavigationSectionId(-1); }" href="@Page.Href" class="desktopNavLink">
         <div class="navName">
             @Page.Name
         </div>

IGP/Pages/EconomyComparison.razor

@@ -0,0 +1,21 @@
+@page "/economy-comparison"
+
+@layout PageLayout
+
+
+<LayoutMediumContentComponent>
+    <AlertComponent>
+        <Title>Not Implemented</Title>
+        <Message></Message>
+    </AlertComponent>
+    
+    <PaperComponent>
+        TODO
+    </PaperComponent>
+
+    <ContentDividerComponent/>
+
+    <PaperComponent>
+
+    </PaperComponent>
+</LayoutMediumContentComponent>

IGP/wwwroot/generated/WebPageModels.json

@@ -1 +1 @@
-[{"Id":1,"WebSectionModelId":2,"Name":"Database","Description":"Database of game information","Href":"database","IsPrivate":"False"},{"Id":2,"WebSectionModelId":1,"Name":"Build Calculator","Description":"Build order calculator for determining army timings","Href":"build-calculator","IsPrivate":"False"},{"Id":3,"WebSectionModelId":1,"Name":"Harass Calculator","Description":"Alloy harassment calculator","Href":"harass-calculator","IsPrivate":"False"},{"Id":4,"WebSectionModelId":1,"Name":"Memory Tester","Description":"Testing memory","Href":"memory-tester","IsPrivate":"False"},{"Id":5,"WebSectionModelId":1,"Name":"Comparion Charts","Description":"Ecnomy charts to compare build orders","Href":"comparison-charts","IsPrivate":"True"},{"Id":6,"WebSectionModelId":2,"Name":"Notes","Description":"General player notes","Href":"notes","IsPrivate":"False"},{"Id":7,"WebSectionModelId":2,"Name":"Key Mapping","Description":"General key mapping info","Href":"keymapping","IsPrivate":"True"},{"Id":8,"WebSectionModelId":4,"Name":"Road Map","Description":"Plans for this website","Href":"roadmap","IsPrivate":"False"},{"Id":9,"WebSectionModelId":4,"Name":"Change Log","Description":"Past updates to the website","Href":"changelog","IsPrivate":"False"},{"Id":10,"WebSectionModelId":4,"Name":"Agile","Description":"Showing agile view of this website","Href":"agile","IsPrivate":"False"},{"Id":11,"WebSectionModelId":4,"Name":"Making Of","Description":"Explaining development details of this website","Href":"makingof","IsPrivate":"False"},{"Id":12,"WebSectionModelId":2,"Name":"Documentation","Description":"Explaining how to use this website","Href":"documentation","IsPrivate":"True"},{"Id":13,"WebSectionModelId":3,"Name":"About","Description":"Answering general questions on the website","Href":"about","IsPrivate":"False"},{"Id":14,"WebSectionModelId":3,"Name":"Contact","Description":"My contact info","Href":"contact","IsPrivate":"False"},{"Id":15,"WebSectionModelId":3,"Name":"Streams","Description":"Stream info","Href":"streams","IsPrivate":"False"},{"Id":16,"WebSectionModelId":4,"Name":"Documentation","Description":"Development information","Href":"docs","IsPrivate":"False"},{"Id":17,"WebSectionModelId":5,"Name":"Permissions","Description":"Permission Settings","Href":"permissions","IsPrivate":"False"},{"Id":18,"WebSectionModelId":5,"Name":"Analytics","Description":"Analytics Settings","Href":"analytics","IsPrivate":"False"},{"Id":19,"WebSectionModelId":5,"Name":"Storage","Description":"Storage Settings","Href":"storage","IsPrivate":"False"}]
+[{"Id":1,"WebSectionModelId":2,"Name":"Database","Description":"Database of game information","Href":"database","IsPrivate":"False"},{"Id":2,"WebSectionModelId":1,"Name":"Build Calculator","Description":"Build order calculator for determining army timings","Href":"build-calculator","IsPrivate":"False"},{"Id":3,"WebSectionModelId":1,"Name":"Harass Calculator","Description":"Alloy harassment calculator","Href":"harass-calculator","IsPrivate":"False"},{"Id":4,"WebSectionModelId":1,"Name":"Memory Tester","Description":"Testing memory","Href":"memory-tester","IsPrivate":"False"},{"Id":5,"WebSectionModelId":1,"Name":"Comparion Charts","Description":"Ecnomy charts to compare build orders","Href":"comparison-charts","IsPrivate":"True"},{"Id":6,"WebSectionModelId":2,"Name":"Notes","Description":"General player notes","Href":"notes","IsPrivate":"False"},{"Id":7,"WebSectionModelId":2,"Name":"Key Mapping","Description":"General key mapping info","Href":"keymapping","IsPrivate":"True"},{"Id":8,"WebSectionModelId":4,"Name":"Road Map","Description":"Plans for this website","Href":"roadmap","IsPrivate":"False"},{"Id":9,"WebSectionModelId":4,"Name":"Change Log","Description":"Past updates to the website","Href":"changelog","IsPrivate":"False"},{"Id":10,"WebSectionModelId":4,"Name":"Agile","Description":"Showing agile view of this website","Href":"agile","IsPrivate":"False"},{"Id":11,"WebSectionModelId":4,"Name":"Making Of","Description":"Explaining development details of this website","Href":"makingof","IsPrivate":"False"},{"Id":12,"WebSectionModelId":2,"Name":"Documentation","Description":"Explaining how to use this website","Href":"documentation","IsPrivate":"True"},{"Id":13,"WebSectionModelId":3,"Name":"About","Description":"Answering general questions on the website","Href":"about","IsPrivate":"False"},{"Id":14,"WebSectionModelId":3,"Name":"Contact","Description":"My contact info","Href":"contact","IsPrivate":"False"},{"Id":15,"WebSectionModelId":3,"Name":"Streams","Description":"Stream info","Href":"streams","IsPrivate":"False"},{"Id":16,"WebSectionModelId":4,"Name":"Documentation","Description":"Development information","Href":"docs","IsPrivate":"False"},{"Id":17,"WebSectionModelId":5,"Name":"Permissions","Description":"Permission Settings","Href":"permissions","IsPrivate":"False"},{"Id":18,"WebSectionModelId":5,"Name":"Analytics","Description":"Analytics Settings","Href":"analytics","IsPrivate":"False"},{"Id":19,"WebSectionModelId":5,"Name":"Storage","Description":"Storage Settings","Href":"storage","IsPrivate":"False"},{"Id":20,"WebSectionModelId":1,"Name":"Economy Comparison","Description":"Compare economies","Href":"economy-comparison","IsPrivate":"False"}]