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 (webSection.Id.Equals(navigationService.GetNavigationSectionId()))
+                @if (isSelected)
                 {
                     <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% - 18px);
-       left: -64px;
+       top: calc(100% - 36px);
+       left: calc(50% + -330px / 2);
        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>