[NavMenu] Enhance working in mobile view (#2183)

* - Add CustomToggle parameter toFluentNavMenu - Add CustomToggleId to FluentNavBase - Add onclick to FluentNavGroup/FluentNavLink * Adjust templates * Store docs file * Add null check to fix failing tests * Process review comments
microsoft · Jun 12, 2024 · 13979c3 · 13979c3
1 parent d7284cc
commit 13979c3
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 35 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -6306,11 +6306,6 @@
             For  <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentNavGroup" /> the <c>Title</c> is used as fallback.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.HasIcon">
-            <summary>
-            Returns <see langword="true"/> if the item has an <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.Icon"/> set.
-            </summary>
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.OnClick">
             <summary>
             The callback to invoke when the item is clicked.
@@ -6321,6 +6316,23 @@
             If true, force browser to redirect outside component router-space.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.CustomToggleId">
+            <summary>
+            Gets or sets the id of the custom toggle element
+            Defaults to navmenu-toggle
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.HasIcon">
+            <summary>
+            Returns <see langword="true"/> if the item has an <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.Icon"/> set.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.CustomToggleCode">
+            <summary>
+            If a custom toggle is being used to hide/show the menu, this defines the 'onclick' code
+            Uses the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.CustomToggleId"/> as the id of the element that will be clicked
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavGroup.Title">
             <summary>
             Gets or sets the text to display for the group.
@@ -6367,7 +6379,7 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavMenu.ExpanderContent">
             <summary>
-            Gets or sets the content to be rendered for the collapse icon when the menu is collapsible. 
+            Gets or sets the content to be rendered for the collapse icon when the menu is collapsible.
             The default icon will be used if this is not specified.
             </summary>
         </member>
@@ -6405,6 +6417,12 @@
             Adjust the vertical spacing between navlinks.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavMenu.CustomToggle">
+            <summary>
+            Gets or sets if a custom toggle for showing/hiding the menu is used.
+            This is primarily intended to be used in a mobile view
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavMenu.NavigationManager">
             <summary>
             Navigation manager

diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor b/examples/Demo/Shared/Shared/DemoNavMenu.razor
@@ -3,8 +3,8 @@
 <div class="navmenu">
     <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
     <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Neutral" /></label>
-    <nav class="sitenav" aria-labelledby="main-menu">
-        <FluentNavMenu Id="main-menu" Title="Main menu">
+    <nav class="sitenav" aria-labelledby="main-menu" >
+        <FluentNavMenu Id="main-menu" Title="Main menu" CustomToggle="true" >
             @foreach(var item in NavProvider.NavMenuItems)
             {
                 <DemoNavMenuItem Value="item"/>

diff --git a/src/Core.Assets/Microsoft.FluentUI.AspNetCore.Components.Assets.esproj b/src/Core.Assets/Microsoft.FluentUI.AspNetCore.Components.Assets.esproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.1088444">
+<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.1147595">
 	<PropertyGroup>
 		<DebugAssetsDirectory>dist\</DebugAssetsDirectory>
 		<StaticWebAssetSourceId>Microsoft.FluentUI.AspNetCore.Components</StaticWebAssetSourceId>

diff --git a/src/Core/Components/NavMenu/FluentNavBase.cs b/src/Core/Components/NavMenu/FluentNavBase.cs
@@ -75,17 +75,6 @@ public abstract class FluentNavBase : FluentComponentBase
     [Parameter]
     public string? Tooltip { get; set; }
 
-    [CascadingParameter]
-    public FluentNavMenu Owner { get; set; } = default!;
-
-    [CascadingParameter]
-    public FluentMenu? SubMenu { get; set; }
-
-    /// <summary>
-    /// Returns <see langword="true"/> if the item has an <see cref="Icon"/> set.
-    /// </summary>
-    internal bool HasIcon => Icon is not null;
-
     /// <summary>
     /// The callback to invoke when the item is clicked.
     /// </summary>
@@ -98,9 +87,33 @@ public abstract class FluentNavBase : FluentComponentBase
     [Parameter]
     public bool ForceLoad { get; set; }
 
+    /// <summary>
+    /// Gets or sets the id of the custom toggle element
+    /// Defaults to navmenu-toggle
+    /// </summary>
+    [Parameter]
+    public string CustomToggleId { get; set; } = "navmenu-toggle";
+
+    [CascadingParameter]
+    public FluentNavMenu Owner { get; set; } = default!;
+
+    [CascadingParameter]
+    public FluentMenu? SubMenu { get; set; }
+
     [Inject]
     private NavigationManager NavigationManager { get; set; } = default!;
 
+    /// <summary>
+    /// Returns <see langword="true"/> if the item has an <see cref="Icon"/> set.
+    /// </summary>
+    internal bool HasIcon => Icon is not null;
+
+    /// <summary>
+    /// If a custom toggle is being used to hide/show the menu, this defines the 'onclick' code
+    /// Uses the <see cref="CustomToggleId"/> as the id of the element that will be clicked
+    /// </summary>
+    internal string? CustomToggleCode => (Owner is not null && Owner.CustomToggle) ? $"document.getElementById('{CustomToggleId}').click();" : null;
+
     protected async Task OnClickHandlerAsync(MouseEventArgs ev)
     {
         if (Disabled)

diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor b/src/Core/Components/NavMenu/FluentNavGroup.razor
@@ -14,7 +14,8 @@
                      @attributes="@Attributes"
                      Match="@Match"
                      ActiveClass="@ActiveClass"
-                     title="@(Tooltip ?? Title)">
+                     title="@(Tooltip ?? Title)"
+                     onclick="@CustomToggleCode">
                 <div class="positioning-region">
                     <div class="content-region">
                         @_renderContent
@@ -26,7 +27,7 @@
         else
         {
             <div class="fluent-nav-link notactive" tabindex="@(Disabled ? "-1" : "0")">
-                <div class="positioning-region" @onclick="ToggleExpandedAsync" title="@(Tooltip ?? Title)">
+                <div class="positioning-region" @onclick="ToggleExpandedAsync" @onclick:stopPropagation="true" title="@(Tooltip ?? Title)">
                     <div class="content-region">
                         @_renderContent
                         @_renderButton
@@ -36,7 +37,7 @@
         }
 
         <FluentCollapsibleRegion @bind-Expanded="@Expanded" MaxHeight="@MaxHeight" Class="items" role="group">
-            <FluentNavMenu Data="_data">
+            <FluentNavMenu Data="_data" CustomToggle="Owner.CustomToggle">
                 @ChildContent
             </FluentNavMenu>
         </FluentCollapsibleRegion>

diff --git a/src/Core/Components/NavMenu/FluentNavLink.razor b/src/Core/Components/NavMenu/FluentNavLink.razor
@@ -13,7 +13,8 @@
                      @attributes="@Attributes"
                      Match="@Match"
                      ActiveClass="@ActiveClass"
-                     title="@Tooltip">
+                     title="@Tooltip"
+                     onclick="@CustomToggleCode">
                 <div class="positioning-region">
                     <div class="content-region">
                         @_renderContent

diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor.cs b/src/Core/Components/NavMenu/FluentNavMenu.razor.cs
@@ -6,7 +6,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 public partial class FluentNavMenu : FluentComponentBase
 {
     private const string WIDTH_COLLAPSED_MENU = "40px";
-    
+
     internal string? ClassValue => new CssBuilder("fluent-nav-menu")
         .AddClass(Class)
         .AddClass("collapsed", () => !Expanded)
@@ -21,7 +21,7 @@ public partial class FluentNavMenu : FluentComponentBase
         .Build();
 
     /// <summary>
-    /// Gets or sets the content to be rendered for the collapse icon when the menu is collapsible. 
+    /// Gets or sets the content to be rendered for the collapse icon when the menu is collapsible.
     /// The default icon will be used if this is not specified.
     /// </summary>
     [Parameter]
@@ -68,6 +68,13 @@ public partial class FluentNavMenu : FluentComponentBase
     [Parameter]
     public string? Margin { get; set; }
 
+    /// <summary>
+    /// Gets or sets if a custom toggle for showing/hiding the menu is used.
+    /// This is primarily intended to be used in a mobile view
+    /// </summary>
+    [Parameter]
+    public bool CustomToggle { get; set; } = false;
+
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 

diff --git a/src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp.Client/Layout/NavMenu.razor b/src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp.Client/Layout/NavMenu.razor
@@ -13,8 +13,8 @@
 <div class="navmenu">
     <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
     <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
-    <nav class="sitenav" aria-labelledby="main-menu" onclick="document.getElementById('navmenu-toggle').click();">
-        <FluentNavMenu Id="main-menu" Width="250" Collapsible="true" Title="Navigation menu" @bind-Expanded="expanded">
+    <nav class="sitenav" aria-labelledby="main-menu">
+        <FluentNavMenu Id="main-menu" Width="250" Collapsible="true" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
             <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
             <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
             <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
@@ -62,4 +62,4 @@
         NavigationManager.LocationChanged -= OnLocationChanged;
     }
 ##endif*@
-}
+}
diff --git a/src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/NavMenu.razor b/src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/NavMenu.razor
@@ -11,8 +11,8 @@
 <div class="navmenu">
     <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
     <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
-    <nav class="sitenav" aria-labelledby="main-menu" onclick="document.getElementById('navmenu-toggle').click();">
-        <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded">
+    <nav class="sitenav" aria-labelledby="main-menu">
+        <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
             <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
             @*#if (UseServer || UseWebAssembly)
             <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>

diff --git a/src/Templates/content/ComponentsWebAssembly-CSharp/Layout/NavMenu.CallsWebApi.razor b/src/Templates/content/ComponentsWebAssembly-CSharp/Layout/NavMenu.CallsWebApi.razor
@@ -1,8 +1,8 @@
 <div class="navmenu">
     <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
     <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
-    <nav class="sitenav" aria-labelledby="main-menu" onclick="document.getElementById('navmenu-toggle').click();">
-        <FluentNavMenu Id="main-menu" Width="250" Collapsible="true" Title="Navigation menu" @bind-Expanded="expanded">
+    <nav class="sitenav" aria-labelledby="main-menu">
+        <FluentNavMenu Id="main-menu" Width="250" Collapsible="true" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
             <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
             <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
             <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>

diff --git a/src/Templates/content/ComponentsWebAssembly-CSharp/Layout/NavMenu.NoApi.razor b/src/Templates/content/ComponentsWebAssembly-CSharp/Layout/NavMenu.NoApi.razor
@@ -1,8 +1,8 @@
 <div class="navmenu">
     <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
     <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
-    <nav class="sitenav" aria-labelledby="main-menu" onclick="document.getElementById('navmenu-toggle').click();">
-        <FluentNavMenu Id="main-menu" Width="250" Collapsible="true" Title="Navigation menu" @bind-Expanded="expanded">
+    <nav class="sitenav" aria-labelledby="main-menu">
+        <FluentNavMenu Id="main-menu" Width="250" Collapsible="true" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
              <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
              <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
              <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>