diff --git a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor index a5d3354741..80385054cb 100644 --- a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor +++ b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor @@ -20,6 +20,9 @@ Item 5.1 Item 6 + + Item 7.1 +
diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor.cs b/src/Core/Components/NavMenu/FluentNavGroup.razor.cs index 062c270a0f..6de18c086a 100644 --- a/src/Core/Components/NavMenu/FluentNavGroup.razor.cs +++ b/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) { diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor.css b/src/Core/Components/NavMenu/FluentNavGroup.razor.css index 8f388ddfad..fb0435c1ed 100644 --- a/src/Core/Components/NavMenu/FluentNavGroup.razor.css +++ b/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; diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor.css b/src/Core/Components/NavMenu/FluentNavMenu.razor.css index c14341da69..6d3124dcc1 100644 --- a/src/Core/Components/NavMenu/FluentNavMenu.razor.css +++ b/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;