Fix disabled top level NavGroup (#4647)

Author: MarvinKlein1508

examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor

@@ -20,6 +20,9 @@
                 <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())" Tooltip="Item 5.1 tooltip">Item 5.1</FluentNavLink>
             </FluentNavGroup>
             <FluentNavLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Disabled="true" Href="https://microsoft.com" Tooltip="Item 6 tooltip">Item 6</FluentNavLink>
+            <FluentNavGroup Title="Item 7" Tooltip="Item 7 tooltip" Disabled="true">
+                <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())" Tooltip="Item 7.1 tooltip">Item 7.1</FluentNavLink>
+            </FluentNavGroup>
         </FluentNavMenu>
     </div>
     <div style="width: 100%;">

src/Core/Components/NavMenu/FluentNavGroup.razor.cs

@@ -104,6 +104,10 @@ public FluentNavGroup()
 
     private async Task ToggleExpandedAsync()
     {
+        if (Disabled)
+        {
+            return;
+        }
 
         if (!Owner.Expanded && Owner.CollapsedChildNavigation)
         {

src/Core/Components/NavMenu/FluentNavGroup.razor.css

@@ -14,16 +14,6 @@
     min-width: 20px;
 }
 
-::deep .fluent-nav-group.disabled {
-    color: var(--neutral-fill-secondary-rest) !important;
-    pointer-events: none;
-}
-
-    ::deep .fluent-nav-group.disabled .fluent-nav-icon {
-        fill: var(--neutral-stroke-rest) !important;
-    }
-
-
 /* Group expand/collapse */
 ::deep .expand-collapse-button {
     position: absolute;

src/Core/Components/NavMenu/FluentNavMenu.razor.css

@@ -1,7 +1,6 @@
 /*  NavMenu */
 .fluent-nav-menu {
     padding: 0 2px;
-
 }
 
 ::deep .fluent-nav-item.expander:focus-within {
@@ -15,24 +14,33 @@
 }
 
     /* Hover and active highlighting */
-    ::deep .fluent-nav-item .positioning-region:hover:not(:has(.disabled)) {
+    ::deep .fluent-nav-item:not(.disabled) .positioning-region:hover:not(:has(.disabled)) {
         cursor: pointer;
         background: var(--neutral-fill-secondary-rest);
     }
 
-        /* Active item indicator */
-        ::deep .fluent-nav-item .active .positioning-region::before {
-            content: "";
-            display: block;
-            position: absolute;
-            right: unset;
-            width: 3px;
-            height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) / 2) * 1px);
-            background: var(--accent-fill-rest);
-            border-radius: calc(var(--control-corner-radius) * 1px);
-            margin: calc(var(--design-unit) * 2px) 2px;
-            z-index: 5;
-        }
+    /* Active item indicator */
+    ::deep .fluent-nav-item .active .positioning-region::before {
+        content: "";
+        display: block;
+        position: absolute;
+        right: unset;
+        width: 3px;
+        height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) / 2) * 1px);
+        background: var(--accent-fill-rest);
+        border-radius: calc(var(--control-corner-radius) * 1px);
+        margin: calc(var(--design-unit) * 2px) 2px;
+        z-index: 5;
+    }
+
+::deep .fluent-nav-group.disabled {
+    color: var(--neutral-fill-secondary-rest) !important;
+    pointer-events: none;
+}
+
+    ::deep .fluent-nav-group.disabled .fluent-nav-icon {
+        fill: var(--neutral-stroke-rest) !important;
+    }
 
 [dir='rtl'] * ::deep .fluent-nav-item a.active .positioning-region::before {
     left: unset;