Skip to content

[NavMenu] Enhance working in mobile view #2183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 8 commits into from
Jun 12, 2024
Merged

[NavMenu] Enhance working in mobile view #2183

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e560ed6
- Add CustomToggle parameter toFluentNavMenu
vnbaaij Jun 12, 2024
93c9f58
Adjust templates
vnbaaij Jun 12, 2024
24fd321
Store docs file
vnbaaij Jun 12, 2024
c8d0637
Add null check to fix failing tests
vnbaaij Jun 12, 2024
e68fc89
Process review comments
vnbaaij Jun 12, 2024
454e2d7
Merge branch 'dev' into users/vnbaaij/fix-issue-#2141
vnbaaij Jun 12, 2024
7c80fd1
Undo switch to internal for cascading parameters
vnbaaij Jun 12, 2024
3b445cf
Merge branch 'dev' into users/vnbaaij/fix-issue-#2141
vnbaaij Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6248,11 +6248,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.
Expand All @@ -6263,6 +6258,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.
Expand Down Expand Up @@ -6309,7 +6321,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>
Expand Down
4 changes: 2 additions & 2 deletions examples/Demo/Shared/Shared/DemoNavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down
2 changes: 1 addition & 1 deletion src/Core.Assets/Microsoft.FluentUI.AspNetCore.Components.Assets.esproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
35 changes: 24 additions & 11 deletions src/Core/Components/NavMenu/FluentNavBase.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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)
Expand Down
7 changes: 4 additions & 3 deletions src/Core/Components/NavMenu/FluentNavGroup.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion src/Core/Components/NavMenu/FluentNavLink.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 5 additions & 2 deletions src/Core/Components/NavMenu/FluentNavMenu.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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]
Expand Down Expand Up @@ -68,6 +68,9 @@ public partial class FluentNavMenu : FluentComponentBase
[Parameter]
public string? Margin { get; set; }

[Parameter]
public bool CustomToggle { get; set; } = false;

[Parameter]
public RenderFragment? ChildContent { get; set; }

Expand Down
6 changes: 3 additions & 3 deletions src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp.Client/Layout/NavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -62,4 +62,4 @@
NavigationManager.LocationChanged -= OnLocationChanged;
}
##endif*@
}
}
4 changes: 2 additions & 2 deletions src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/NavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/Templates/content/ComponentsWebAssembly-CSharp/Layout/NavMenu.CallsWebApi.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/Templates/content/ComponentsWebAssembly-CSharp/Layout/NavMenu.NoApi.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down