[dev-v5][Nav] Part 1 - Add the FluentNav components

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Nav/Examples/NavDefault.razor

@@ -0,0 +1,108 @@
+@using Microsoft.FluentUI.AspNetCore.Components
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+@inject IDialogService DialogService
+
+<h3>NavDefault</h3>
+
+<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="15">
+	<FluentNav @ref="@nav"
+			   UseHeader="@_useHeader"
+			   UseIcons="@_useIcons"
+			   UseSingleExpanded="@(!_useMultipleExpanded)"
+			   AppTitle="Contoso"
+			   AppIcon="@(new Icons.Regular.Size32.Person())"
+			   Density="@_density">
+		<FluentNavItem Href="/Nav" Icon="@(new Icons.Regular.Size20.Board())">Dashboard</FluentNavItem>
+		<FluentNavItem OnClick="@ShowInformationAsync" Icon="@(new Icons.Regular.Size20.MegaphoneLoud())">Announcements</FluentNavItem>
+		<FluentNavItem Disabled="true" Href="@_link">Employee Spotlight</FluentNavItem>
+		<FluentNavItem OnClick="@ShowInformationAsync" Icon="@(new Icons.Regular.Size20.PersonSearch())">Profile Search</FluentNavItem>
+		<FluentNavItem Href="@_link" Icon="@(new Icons.Regular.Size20.PersonMoney())">Performance Reviews</FluentNavItem>
+
+		<FluentNavSectionHeader Title="Employee Management" />
+
+		<FluentNavCategory Title="Job Postings" Icon="@(new Icons.Regular.Size20.NotePin())">
+
+			<FluentNavItem OnClick="@ShowInformationAsync">Openings</FluentNavItem>
+			<FluentNavItem OnClick="@ShowInformationAsync">Submissions</FluentNavItem>
+
+		</FluentNavCategory>
+		<FluentNavItem Href="@_link" Icon="@(new Icons.Regular.Size20.People())">Interviews</FluentNavItem>
+
+		<FluentNavSectionHeader Title="Benefits" />
+		<FluentNavItem Href="@_link" Icon="@(new Icons.Regular.Size20.HeartPulse())">Health Plans</FluentNavItem>
+
+		<FluentNavCategory Id="retirement" Title="Retirement" Icon="@(new Icons.Regular.Size20.Person())">
+
+			<FluentNavItem>Plan Information</FluentNavItem>
+			<FluentNavItem>Fund Performance</FluentNavItem>
+
+		</FluentNavCategory>
+
+		<FluentDivider />
+
+		<FluentNavItem Href="@_link" Icon="@(new Icons.Regular.Size20.BoxMultiple())">Training Programs</FluentNavItem>
+
+		<FluentNavCategory Title="Career Development" Icon="@(new Icons.Regular.Size20.PeopleStar())">
+
+			<FluentNavItem>Openings</FluentNavItem>
+			<FluentNavItem>Submissions</FluentNavItem>
+
+		</FluentNavCategory>
+
+		<FluentNavItem Href="@_link" Icon="@(new Icons.Regular.Size20.ArrowTrendingLines())">Workforce Data</FluentNavItem>
+		<FluentNavItem Href="@_link" Icon="@(new Icons.Regular.Size20.DocumentBulletListMultiple())">Reports</FluentNavItem>
+	</FluentNav>
+
+	<FluentStack Orientation="Orientation.Vertical" VerticalGap="5">
+		<FluentRadioGroup @bind-Value="@_density" Label="Density" Wrap="true">
+			<FluentRadio Label="Medium" Value="NavDensity.Medium" />
+			<FluentRadio Label="Small" Value="NavDensity.Small" />
+		</FluentRadioGroup>
+
+		<FluentSwitch @bind-Value="@_useIcons" Label="Use Icons" />
+		<FluentSwitch @bind-Value="@_useMultipleExpanded" Label="Allow multiple expanded categories" />
+		<FluentSwitch @bind-Value="@_useHeader" Label="Use Header" />
+
+		<FluentButton Disabled="@(!nav!.UseHeader)" OnClick="ToggleNavAsync">Toggle Navigation</FluentButton>
+
+		<FluentText>Programmatically control expanded/collapsed state</FluentText>
+		<span>
+			<FluentButton OnClick="ExpandRetirementAsync">Expand 'Retirement'</FluentButton>
+			<FluentButton OnClick="CollapseRetirementAsync">Collapse 'Retirement'</FluentButton>
+		</span>
+	</FluentStack>
+
+</FluentStack>
+
+@code
+{
+	private FluentNav nav = default!;
+	NavDensity _density;
+	bool _useHeader = false;
+	bool _useIcons = true;
+	bool _useMultipleExpanded = true;
+	private readonly string? _link = "https://fluentui-blazor-v5.azurewebsites.net/";
+
+	private async Task ShowInformationAsync()
+	{
+		await DialogService.ShowInfoAsync("This is a message");
+	}
+
+	private async Task ToggleNavAsync()
+	{
+		if (nav.UseHeader)
+		{
+			await nav.ToggleNavAsync();
+		}
+	}
+
+	private async Task ExpandRetirementAsync()
+	{
+		await nav.ExpandCategoryAsync("retirement");
+	}
+
+	private async Task CollapseRetirementAsync()
+	{
+		await nav.CollapseCategoryAsync("retirement");
+	}
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Nav/FluentNav.md

@@ -0,0 +1,61 @@
+---
+title: Nav
+route: /Nav
+icon: Navigation
+---
+
+# Nav
+
+Nav, or navigation, provides a list of links that lets people move through the main sections of an app or site. It’s a high-level wayfinding component that’s always easily accessible but can be minimized to free up space.
+
+Nav only supports one level of nesting and might not show all available items.
+
+## Selection
+The selection indicator tells people at a glance which page is active. If a nav sub-item is the active page and the category is closed, the selection indicator will display on the nav category.
+
+## Grouping
+Navs can be organized with up to two levels of hierarchy. Simple navs list the spaces in a site or app as links on the same level. For more complex navs, links can be grouped into categories for easier interaction.
+
+Create a simple nav using nav items. These are first-level links that give people a quick understanding of the main parts of an experience.
+
+Create a complex nav using nav categories and sub-items. Nav categories expand and collapse so people only see the information they need. Nav sub-items group related links within that category and let people navigate to those sub-pages. Nav categories act as accordions and show or hide information; they’re not links and won’t lead to site or app locations.
+
+By using the `UseSingleExpanded` parameter, you can ensure that only one nav category is expanded at a time. When a new category is expanded, any previously expanded category will automatically collapse.
+
+## Divider
+Use the `FluentDivider` to separate groups of nav items. This helps people scan and find what they need more quickly. The right styling will automatically be applied when using the divider inside the `FluentNav`
+
+## Icons
+Whenever possible, use icons with nav category labels. They create additional visual emphasis and differentiate nav categories from the nav subitems within them. Use simple and recognizable icons that are easy to understand.
+
+If icons aren’t technically possible or difficult to pick due to an overwhelming number of nav items, remove them. If nav categories don’t include an icon, subitems are indented to maintain a clear hierarchy.
+
+## Items
+Nav doesn’t support an icon-only layout.
+
+A `NavItem` can contain either an `Href` or an `OnClick` handler.
+
+When a `NavItem` is used inside a `NavCategory`, the `Icon` parameter is ignored. No icon will be displayed.
+
+In the example below, the first (and third and fifth) item has an `Href` that navigates to an external site, while the second (and fourth) item has an `OnClick` handler that triggers a method in the component.
+
+{{ NavDefault }}
+
+## API FluentNav
+
+{{ API Type=FluentNav }}
+
+## API FluentNavCategory
+
+{{ API Type=FluentNavCategory }}
+
+## API FluentNavItem
+{{ API Type=FluentNavItem }}
+
+## API FluentNavSectionHeader
+{{ API Type=FluentNavSectionHeader }}
+
+## Migrating to v5
+There is no direct migration path for  the `FluentNavMenu` from v4
+to the `FluentNav` in v5. This is due to the fact that in the v4 component
+it was possible to have multiple levels of nesting, while in v5 only one level is supported.

src/Core/Components/Icons/CoreIcons.cs

@@ -49,12 +49,16 @@ public class ChevronLeft : Icon { public ChevronLeft() : base("ChevronLeft", Ico
 
             public class ChevronRight : Icon { public ChevronRight() : base("ChevronRight", IconVariant.Regular, IconSize.Size20, "<path d=\"M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z\"/>") { } }
 
+            public class ChevronUp : Icon { public ChevronUp() : base("ChevronUp", IconVariant.Regular, IconSize.Size20, "<path d=\"M4.15 12.35a.5.5 0 0 1 0-.7L9.6 6.16a.55.55 0 0 1 .78 0l5.46 5.49a.5.5 0 0 1-.7.7L10 7.2l-5.15 5.16a.5.5 0 0 1-.7 0Z\"/>") { } }
+
             public class Dismiss : Icon { public Dismiss() : base("Dismiss", IconVariant.Regular, IconSize.Size20, "<path d=\"m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z\"></path>") { } };
 
             public class Filter : Icon { public Filter() : base("Filter", IconVariant.Regular, IconSize.Size20, "<path d=\"M7.5 13h5a.5.5 0 0 1 .09 1H7.5a.5.5 0 0 1-.09-1h5.09-5Zm-2-4h9a.5.5 0 0 1 .09 1H5.5a.5.5 0 0 1-.09-1h9.09-9Zm-2-4h13a.5.5 0 0 1 .09 1H3.5a.5.5 0 0 1-.09-1H16.5h-13Z\"/>") { } }
 
             public class FilterDismiss : Icon { public FilterDismiss() : base("FilterDismiss", IconVariant.Regular, IconSize.Size20, "<path d=\"M9.2 7H2.42a.5.5 0 0 0 .09 1h7.1c-.16-.32-.3-.65-.4-1Zm2.8 8.5a.5.5 0 0 0-.5-.5H6.41a.5.5 0 0 0 .09 1h5.09a.5.5 0 0 0 .41-.5Zm1.5-4.5H4.41a.5.5 0 0 0 .09 1h9.09a.5.5 0 0 0-.09-1Zm1-1a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm1.85-6.35c.2.2.2.5 0 .7L15.21 5.5l1.14 1.15a.5.5 0 0 1-.7.7L14.5 6.21l-1.15 1.14a.5.5 0 0 1-.7-.7l1.14-1.15-1.14-1.15a.5.5 0 0 1 .7-.7l1.15 1.14 1.15-1.14c.2-.2.5-.2.7 0Z\"/>") { } }
 
+            public class Folder : Icon { public Folder() : base("Folder", IconVariant.Regular, IconSize.Size20, "<path d=\"M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 5H9.7L8.23 3.51A1.75 1.75 0 0 0 6.98 3H4.5ZM3 5.5C3 4.67 3.67 4 4.5 4h2.48c.2 0 .4.08.53.22L8.8 5.5 7.44 6.85a.5.5 0 0 1-.35.15H3V5.5ZM3 8h4.09c.4 0 .78-.16 1.06-.44L9.7 6h5.79c.83 0 1.5.67 1.5 1.5v7c0 .83-.67 1.5-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5V8Z\"/>") { } }
+
             public class LineHorizontal3 : Icon { public LineHorizontal3() : base("LineHorizontal3", IconVariant.Regular, IconSize.Size20, "<path d=\"M2 4.5c0-.28.22-.5.5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5Zm0 5c0-.28.22-.5.5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5Zm.5 4.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-15Z\"></path>") { } };
 
             public class QuestionCircle : Icon { public QuestionCircle() : base("QuestionCircle", IconVariant.Regular, IconSize.Size20, "<path d=\"M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 1a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm0 10.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm0-8a2.5 2.5 0 0 1 1.65 4.38l-.15.12-.22.17-.09.07-.16.15c-.33.36-.53.85-.53 1.61a.5.5 0 0 1-1 0 3.2 3.2 0 0 1 1.16-2.62l.25-.19.12-.1A1.5 1.5 0 0 0 10 6.5c-.83 0-1.5.67-1.5 1.5a.5.5 0 0 1-1 0A2.5 2.5 0 0 1 10 5.5Z\"></path>") { } };

src/Core/Components/Nav/FluentNav.razor

@@ -0,0 +1,38 @@
+@namespace Microsoft.FluentUI.AspNetCore.Components
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+@inherits FluentComponentBase
+
+<CascadingValue Value="this" IsFixed="true">
+	<div class="fluent-nav-container@(_navOpen ? "" : " collapsed")">
+		<div id="@Id"
+			role="navigation"
+			class="@ClassValue"
+			style="@StyleValue"
+			density="@Density.ToAttributeValue()"
+			@attributes="@AdditionalAttributes">
+			@if (UseHeader)
+			{
+				<header role="none" class="nav-header">
+				<FluentButton Appearance="@ButtonAppearance.Transparent"
+							  IconStart="@ToggleIcon"
+							  Title="@Localizer[Localization.LanguageResource.Nav_ToggleTitle]"
+							  IconOnly="true"
+							  OnClick="@ToggleNavAsync"/>
+				</header>
+			}
+			<div class="nav-body">
+				@if (!string.IsNullOrEmpty(AppTitle))
+				{
+					<a href="@AppLink" class="appitem">
+						@if (AppIcon is not null)
+						{
+							<FluentIcon Value="AppIcon" />
+						}
+						@AppTitle
+					</a>
+				}
+				@ChildContent
+			</div>
+		</div>
+	</div>
+</CascadingValue>