Skip to content

Allow NavMenuGroup to specify custom icon content to appear in collapsed Nav Menu (Fixes #467) #470

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 9 commits into from
Jun 20, 2023
Merged

Allow NavMenuGroup to specify custom icon content to appear in collapsed Nav Menu (Fixes #467) #470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dff1c60
Add NavigationIconContent to FluentNavMenu (Fixes #463)
mrpmorris Jun 19, 2023
c40bbbd
Merge branch 'new-components' of https://github.com/microsoft/fluentu…
mrpmorris Jun 20, 2023
81cd63a
Icon + Expanded icon
mrpmorris Jun 20, 2023
610606b
Revert "Icon + Expanded icon"
mrpmorris Jun 20, 2023
f293eff
Show group icon when nav menu is collapsed
mrpmorris Jun 20, 2023
cda41c6
Remove sub-menu item added to sample.
mrpmorris Jun 20, 2023
e36dc93
Cascading parameters don't need to be public??
mrpmorris Jun 20, 2023
d82799d
Exposure tidying
mrpmorris Jun 20, 2023
23cac6e
Include example
mrpmorris Jun 20, 2023
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
33 changes: 19 additions & 14 deletions examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

65 changes: 65 additions & 0 deletions examples/FluentUI.Demo.Shared/Pages/NavMenu/Examples/NavMenuCustomIconContent.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
@namespace FluentUI.Demo.Shared

<h2>Custom Icon Content Example</h2>

<FluentStack Orientation="Orientation.Horizontal" Width="100%">
<div>
<FluentNavMenu @bind-Expanded="@Expanded" Width="150">
<NavigationIconContent>⛚</NavigationIconContent>
<ChildContent>
<FluentNavMenuGroup Text="Weather">
<NavMenuGutterIconContent>☀</NavMenuGutterIconContent>
<ChildContent>
<FluentNavMenuLink Text="Sunny">
<IconContent>☀</IconContent>
</FluentNavMenuLink>
<FluentNavMenuLink Text="Cloudy">
<IconContent>☁</IconContent>
</FluentNavMenuLink>
<FluentNavMenuLink Text="Rain">
<IconContent>☂</IconContent>
</FluentNavMenuLink>
</ChildContent>
</FluentNavMenuGroup>
<FluentNavMenuGroup Text="Notes">
<NavMenuGutterIconContent>♬</NavMenuGutterIconContent>
<ChildContent>
<FluentNavMenuLink Text="Quarter">
<IconContent>♩</IconContent>
</FluentNavMenuLink>
<FluentNavMenuLink Text="Eigth">
<IconContent>♪</IconContent>
</FluentNavMenuLink>
<FluentNavMenuLink Text="Sixteenth">
<IconContent>♬</IconContent>
</FluentNavMenuLink>
</ChildContent>
</FluentNavMenuGroup>
<FluentNavMenuLink Text="Item 4" Disabled>
<IconContent>☹</IconContent>
</FluentNavMenuLink>
<FluentNavMenuLink Text="Contact us">
<IconContent>☎</IconContent>
</FluentNavMenuLink>
</ChildContent>
</FluentNavMenu>
</div>
<div style="width: 100%;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lorem lacus.
Ut id leo non enim feugiat ultrices. Proin vulputate volutpat urna nec iaculis.
Integer dui lacus, fermentum sit amet aliquet in, scelerisque vitae dui.
Nulla fringilla sagittis orci eu consectetur. Fusce eget dolor non lectus placerat
tincidunt. Pellentesque aliquam non odio ac porttitor. Nam finibus mattis sagittis.
Ut hendrerit porttitor massa in aliquam. Duis laoreet fringilla feugiat.
Sed maximus, urna in fringilla posuere, enim urna bibendum justo, vel molestie nibh orci nec lectus.
Etiam a varius justo. Aenean nisl ante, interdum eget vulputate eget, iaculis ut massa.
Suspendisse maximus sed purus id molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</div>
</FluentStack>

@code
{
bool Expanded = true;
}
6 changes: 6 additions & 0 deletions examples/FluentUI.Demo.Shared/Pages/NavMenu/NavMenuPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,10 @@
<Description>
More complete example which show how menu works with together with a text section when it collapses.
</Description>
</DemoSection>

<DemoSection Component="typeof(NavMenuCustomIconContent)" Title="Custom icon content">
<Description>
An example of using RenderFragments for content instead of icons.
</Description>
</DemoSection>
4 changes: 0 additions & 4 deletions examples/FluentUI.Demo.Shared/wwwroot/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,10 +343,6 @@ code {
max-width: 100%;
}

.navmenu-main-button {
display: none;
}

.menu-icon {
padding: 10px 0.75em;
z-index: 2;
Expand Down
65 changes: 65 additions & 0 deletions examples/FluentUI.Demo.Shared/wwwroot/sources/NavMenuCustomIconContent.razor.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
@namespace FluentUI.Demo.Shared

<h2>Custom Icon Content Example</h2>

<FluentStack Orientation="Orientation.Horizontal" Width="100%">
<div>
<FluentNavMenu @bind-Expanded="@Expanded" Width="150">
<NavigationIconContent>⛚</NavigationIconContent>
<ChildContent>
<FluentNavMenuGroup Text="Weather">
<NavMenuGutterIconContent>☀</NavMenuGutterIconContent>
<ChildContent>
<FluentNavMenuLink Text="Sunny">
<IconContent>☀</IconContent>
</FluentNavMenuLink>
<FluentNavMenuLink Text="Cloudy">
<IconContent>☁</IconContent>
</FluentNavMenuLink>
<FluentNavMenuLink Text="Rain">
<IconContent>☂</IconContent>
</FluentNavMenuLink>
</ChildContent>
</FluentNavMenuGroup>
<FluentNavMenuGroup Text="Notes">
<NavMenuGutterIconContent>♬</NavMenuGutterIconContent>
<ChildContent>
<FluentNavMenuLink Text="Quarter">
<IconContent>♩</IconContent>
</FluentNavMenuLink>
<FluentNavMenuLink Text="Eigth">
<IconContent>♪</IconContent>
</FluentNavMenuLink>
<FluentNavMenuLink Text="Sixteenth">
<IconContent>♬</IconContent>
</FluentNavMenuLink>
</ChildContent>
</FluentNavMenuGroup>
<FluentNavMenuLink Text="Item 4" Disabled>
<IconContent>☹</IconContent>
</FluentNavMenuLink>
<FluentNavMenuLink Text="Contact us">
<IconContent>☎</IconContent>
</FluentNavMenuLink>
</ChildContent>
</FluentNavMenu>
</div>
<div style="width: 100%;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lorem lacus.
Ut id leo non enim feugiat ultrices. Proin vulputate volutpat urna nec iaculis.
Integer dui lacus, fermentum sit amet aliquet in, scelerisque vitae dui.
Nulla fringilla sagittis orci eu consectetur. Fusce eget dolor non lectus placerat
tincidunt. Pellentesque aliquam non odio ac porttitor. Nam finibus mattis sagittis.
Ut hendrerit porttitor massa in aliquam. Duis laoreet fringilla feugiat.
Sed maximus, urna in fringilla posuere, enim urna bibendum justo, vel molestie nibh orci nec lectus.
Etiam a varius justo. Aenean nisl ante, interdum eget vulputate eget, iaculis ut massa.
Suspendisse maximus sed purus id molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</div>
</FluentStack>

@code
{
bool Expanded = true;
}
4 changes: 2 additions & 2 deletions src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

@inherits FluentComponentBase
<div>
<CascadingValue Value="this" Name="NavMenu" IsFixed="true">
<CascadingValue Value="Expanded" Name="NavMenuExpanded">
<CascadingValue Value="this" IsFixed="true">
<CascadingValue Value="@Expanded" Name="NavMenuExpanded">
<FluentTreeView Class="@ClassValue"
Style="@StyleValue"
OnSelectedChange="HandleSelectedChange">
Expand Down
8 changes: 2 additions & 6 deletions src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Fast.Components.FluentUI;
using Microsoft.Fast.Components.FluentUI.Utilities;


namespace Microsoft.Fast.Components.FluentUI;

public partial class FluentNavMenu : FluentComponentBase
Expand Down Expand Up @@ -81,12 +78,12 @@ public partial class FluentNavMenu : FluentComponentBase

public FluentNavMenu()
{
Id = Identifier.NewId();
Id = Identifier.NewId();
}

internal bool HasSubMenu => _groups.Any();

internal bool HasIcons => _links.Any(i => i.HasIcon);
internal bool HasIcons => _links.Any(i => i.HasIcon) || _groups.Any(g => g.HasNavMenuGutterIcon);

internal async Task CollapsibleClickAsync()
{
Expand Down Expand Up @@ -131,5 +128,4 @@ internal void AddNavMenuGroup(FluentNavMenuGroup group)
_groups.Add(group);
}


}
16 changes: 8 additions & 8 deletions src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuGroup.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,26 @@
Selected="@Selected"
Expanded="@(NavMenuExpanded ? Expanded : false)"
Text="@(NavMenuExpanded ? Text : string.Empty)">
@if (NavMenuExpanded && HasExpandedIcon)
@if (!NavMenuExpanded && HasNavMenuGutterIcon)
{
if (ExpandedIconContent is not null)
if (NavMenuGutterIconContent is not null)
{
<div slot="start" @onclick="HandleIconClick">@ExpandedIconContent</div>
<div slot="start" @onclick="ExpandMenu">@NavMenuGutterIconContent</div>
}
else
{
<FluentIcon Name="@Icon" Size="@IconSize.Size20" Slot="start" OnClick="HandleIconClick" />
<FluentIcon Name="@NavMenuGutterIcon" Size="@IconSize.Size20" Slot="start" OnClick="ExpandMenu" />
}
}
@if(!NavMenuExpanded && HasCollapsedIcon)
@if (NavMenuExpanded && HasIcon)
{
if (CollapsedIconContent is not null)
if (IconContent is not null)
{
<div slot="start" @onclick="ExpandMenu">@CollapsedIconContent</div>
<div slot="start" @onclick="HandleIconClick">@IconContent</div>
}
else
{
<FluentIcon Name="@IconNavMenuCollapsed" Size="@IconSize.Size20" Slot="start" OnClick="ExpandMenu" />
<FluentIcon Name="@Icon" Size="@IconSize.Size20" Slot="start" OnClick="HandleIconClick" />
}
}
@if (NavMenuExpanded) {
Expand Down
Loading