microsoft · vnbaaij · Jul 6, 2023 · Jul 5, 2023 · Jul 6, 2023
diff --git a/examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml
diff --git a/examples/FluentUI.Demo.Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor b/examples/FluentUI.Demo.Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor
@@ -7,7 +7,7 @@
         <FluentNavMenu @bind-Expanded="@Expanded" Width="150">
             <FluentNavMenuLink Class="level1" Icon="@(new Icons.Regular.Size24.Home())" Text="Item 1" />
             <FluentNavMenuLink Class="level1" Icon="@(new Icons.Regular.Size24.Cloud())" Text="Item 2" />
-            <FluentNavMenuGroup Text="Item 3">
+            <FluentNavMenuGroup Text="Item 3" Icon="@(new Icons.Regular.Size24.EarthLeaf())">
                 <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafOne())" Text="Item 3.1" />
                 <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Text="Item 3.2" />
             </FluentNavMenuGroup>

diff --git a/examples/FluentUI.Demo.Shared/Pages/NavMenu/Examples/NavMenuCustomIconContent.razor b/examples/FluentUI.Demo.Shared/Pages/NavMenu/Examples/NavMenuCustomIconContent.razor
@@ -8,7 +8,7 @@
             <NavigationIconContent>⛚</NavigationIconContent>
             <ChildContent>
                 <FluentNavMenuGroup Text="Weather">
-                    <NavMenuGutterIconContent>☀</NavMenuGutterIconContent>
+                    <IconContent>☀</IconContent>
                     <ChildContent>
                         <FluentNavMenuLink Text="Sunny">
                             <IconContent>☀</IconContent>
@@ -22,7 +22,7 @@
                     </ChildContent>
                 </FluentNavMenuGroup>
                 <FluentNavMenuGroup Text="Notes">
-                    <NavMenuGutterIconContent>♬</NavMenuGutterIconContent>
+                    <IconContent>♬</IconContent>
                     <ChildContent>
                         <FluentNavMenuLink Text="Quarter">
                             <IconContent>♩</IconContent>

diff --git a/examples/FluentUI.Demo.Shared/Shared/DemoMainLayout.razor.cs b/examples/FluentUI.Demo.Shared/Shared/DemoMainLayout.razor.cs
@@ -96,7 +96,7 @@ private async Task RefreshTableOfContents()
 
     public async Task UpdateDirection()
     {
-        dir = _ltr ? LocalizationDirection.ltr : LocalizationDirection.rtl;
+        dir = (dir == LocalizationDirection.rtl) ? LocalizationDirection.ltr : LocalizationDirection.rtl;
 
         GlobalState.SetDirection(dir);
 

diff --git a/examples/FluentUI.Demo.Shared/wwwroot/docs/WhatsNew.md b/examples/FluentUI.Demo.Shared/wwwroot/docs/WhatsNew.md
@@ -27,8 +27,7 @@
 - Toast
 
 
-** Completely redone components **
-
+**Completely redone components (and configuration)**
 - Icon
 - Emoji
 

diff --git a/examples/FluentUI.Demo.Shared/wwwroot/sources/NavMenuCollapsible.razor.txt b/examples/FluentUI.Demo.Shared/wwwroot/sources/NavMenuCollapsible.razor.txt
@@ -7,7 +7,7 @@
         <FluentNavMenu @bind-Expanded="@Expanded" Width="150">
             <FluentNavMenuLink Class="level1" Icon="@(new Icons.Regular.Size24.Home())" Text="Item 1" />
             <FluentNavMenuLink Class="level1" Icon="@(new Icons.Regular.Size24.Cloud())" Text="Item 2" />
-            <FluentNavMenuGroup Text="Item 3">
+            <FluentNavMenuGroup Text="Item 3" Icon="@(new Icons.Regular.Size24.EarthLeaf())">
                 <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafOne())" Text="Item 3.1" />
                 <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Text="Item 3.2" />
             </FluentNavMenuGroup>

diff --git a/examples/FluentUI.Demo.Shared/wwwroot/sources/NavMenuCustomIconContent.razor.txt b/examples/FluentUI.Demo.Shared/wwwroot/sources/NavMenuCustomIconContent.razor.txt
@@ -8,7 +8,7 @@
             <NavigationIconContent>⛚</NavigationIconContent>
             <ChildContent>
                 <FluentNavMenuGroup Text="Weather">
-                    <NavMenuGutterIconContent>☀</NavMenuGutterIconContent>
+                    <IconContent>☀</IconContent>
                     <ChildContent>
                         <FluentNavMenuLink Text="Sunny">
                             <IconContent>☀</IconContent>
@@ -22,7 +22,7 @@
                     </ChildContent>
                 </FluentNavMenuGroup>
                 <FluentNavMenuGroup Text="Notes">
-                    <NavMenuGutterIconContent>♬</NavMenuGutterIconContent>
+                    <IconContent>♬</IconContent>
                     <ChildContent>
                         <FluentNavMenuLink Text="Quarter">
                             <IconContent>♩</IconContent>

diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor b/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor
@@ -1,5 +1,5 @@
 @namespace Microsoft.Fast.Components.FluentUI
-
+@implements IDisposable
 @inherits FluentComponentBase
 <div>
     <CascadingValue Value="this" IsFixed="true">

diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor.cs
@@ -3,7 +3,7 @@
 
 namespace Microsoft.Fast.Components.FluentUI;
 
-public partial class FluentNavMenu : FluentComponentBase
+public partial class FluentNavMenu : FluentComponentBase, IDisposable
 {
     [Inject]
     private NavigationManager NavigationManager { get; set; } = default!;
@@ -84,7 +84,7 @@ public FluentNavMenu()
 
     internal bool HasSubMenu => _groups.Any();
 
-    internal bool HasIcons => _links.Any(i => i.HasIcon) || _groups.Any(g => g.HasNavMenuGutterIcon);
+    internal bool HasIcons => _links.Any(i => i.HasIcon) || _groups.Any(g => g.HasIcon);
 
     internal async Task CollapsibleClickAsync()
     {
@@ -129,9 +129,25 @@ internal void AddNavMenuLink(FluentNavMenuLink link)
         _links.Add(link);
     }
 
+    internal void RemoveNavMenuLink(FluentNavMenuLink link)
+    {
+        _links.Remove(link);
+    }
+
     internal void AddNavMenuGroup(FluentNavMenuGroup group)
     {
         _groups.Add(group);
     }
 
+    internal void RemoveNavMenuGroup(FluentNavMenuGroup group)
+    {
+        _groups.Remove(group);
+    }
+
+    public void Dispose()
+    {
+        _links.Clear();
+        _groups.Clear();
+    }
+
 }
diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor.css b/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor.css
@@ -59,8 +59,18 @@
     margin-inline-end: 8px;
 }
 
+::deep .navmenu-group::part(content-region) {
+    margin-inline-end: var(--expand-collapse-button-size);
+    margin-inline-start: unset;
+}
 
-::deep .navmenu-group.nested::part(expand-collapse-button) {
+::deep .navmenu-group::part(expand-collapse-button) {
     left: unset;
     right: 0;
+    margin-right: calc(var(--expand-collapse-button-size) * -1);
+}
+
+[dir="rtl"] * ::deep .navmenu-group.nested::part(expand-collapse-button) {
+    left: 0;
+    right: unset;
 }
diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuGroup.razor b/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuGroup.razor
@@ -1,5 +1,5 @@
 @namespace Microsoft.Fast.Components.FluentUI
-
+@implements IDisposable
 @inherits FluentComponentBase
 <FluentTreeItem Id="@Id"
                 Class="@ClassValue"
@@ -8,20 +8,7 @@
                 Selected="@Selected"
                 Expanded="@(NavMenuExpanded ? Expanded : false)"
                 Text="@(NavMenuExpanded ? Text : string.Empty)">
-    @if (!NavMenuExpanded && HasNavMenuGutterIcon)
-    {
-        <div slot="start" @onclick="ExpandMenu">
-            @if (NavMenuGutterIconContent is not null)
-            {
-                @NavMenuGutterIconContent
-            }
-            else
-            {
-                <FluentIcon Value="@NavMenuGutterIcon" Width="20px" Slot="start" />
-            }
-        </div>
-    }
-    @if (NavMenuExpanded && HasIcon)
+    @if (HasIcon)
     {
         if (IconContent is not null)
         {
@@ -32,6 +19,10 @@
             <FluentIcon Value="@Icon" Width="20px" Slot="start" OnClick="HandleIconClick" />
         }
     }
+    else if (NavMenu.HasIcons)
+    {
+        <span style="width:20px;" slot="start"></span>
+    }
     @if (NavMenuExpanded) {
         @ChildContent
     }

diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuGroup.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuGroup.razor.cs
@@ -3,7 +3,7 @@
 
 
 namespace Microsoft.Fast.Components.FluentUI;
-public partial class FluentNavMenuGroup : FluentComponentBase
+public partial class FluentNavMenuGroup : FluentComponentBase, IDisposable
 {
     [Inject]
     private NavigationManager NavigationManager { get; set; } = default!;
@@ -14,23 +14,6 @@ public partial class FluentNavMenuGroup : FluentComponentBase
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
-    /// <summary>
-    /// Gets or sets the content to be displayed for this group
-    /// in the <see cref="FluentNavMenu"/> gutter when the menu is collapsed.
-    /// This setting takes priority over <see cref="NavMenuGutterIcon"/>.
-    /// </summary>
-    [Parameter]
-    public RenderFragment? NavMenuGutterIconContent { get; set; }
-
-    /// <summary>
-    /// Gets or sets the icon to display for this group
-    /// in the <see cref="FluentNavMenu"/> gutter when the nav menu is collapsed.
-    /// This setting is not used when <see cref="NavMenuGutterIconContent"/>
-    /// is not null.
-    /// </summary>
-    [Parameter]
-    public Icon NavMenuGutterIcon { get; set; } = new CoreIcons.Regular.Size24.MoreHorizontal();
-
     /// <summary>
     /// Gets or sets the icon content to be displayed for this group
     /// before its <see cref="Text"/>.
@@ -112,9 +95,7 @@ public FluentNavMenuGroup()
         .AddStyle(Style)
         .Build();
 
-    private bool HasIcon => Icon != null || IconContent is not null;
-
-    internal bool HasNavMenuGutterIcon => NavMenuGutterIcon != null || NavMenuGutterIconContent is not null;
+    internal bool HasIcon => Icon != null || IconContent is not null;
 
     public override async Task SetParametersAsync(ParameterView parameters)
     {
@@ -152,4 +133,11 @@ private void HandleIconClick()
         if (!Disabled)
             Selected = true;
     }
+    /// <summary>
+    /// Dispose of this navmenu group.
+    /// </summary>
+    public void Dispose()
+    {
+        NavMenu.RemoveNavMenuGroup(this);
+    }
 }
diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuLink.razor b/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuLink.razor
@@ -1,5 +1,5 @@
 @namespace Microsoft.Fast.Components.FluentUI
-
+@implements IDisposable
 @inherits FluentComponentBase
 <FluentTreeItem Id="@Id"
                 Class="@ClassValue"

diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuLink.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuLink.razor.cs
@@ -4,7 +4,7 @@
 
 namespace Microsoft.Fast.Components.FluentUI;
 
-public partial class FluentNavMenuLink : FluentComponentBase
+public partial class FluentNavMenuLink : FluentComponentBase, IDisposable
 {
     [Inject]
     private NavigationManager NavigationManager { get; set; } = default!;
@@ -118,4 +118,12 @@ internal void SetSelected(bool value)
     {
         Selected = value;
     }
+
+    /// <summary>
+    /// Dispose of this navmenu link.
+    /// </summary>
+    public void Dispose()
+    {
+        NavMenu.RemoveNavMenuLink(this);
+    }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,8 +27,7 @@ @@
     - Toast
-    ** Completely redone components **
+    **Completely redone components (and configuration)**
     - Icon
     - Emoji
@@ Expand Down @@