[Doc] Search for NavMenu

examples/Demo/Shared/Shared/DemoNavMenu.razor

@@ -1,14 +1,59 @@
-@inject DemoNavProvider NavProvider
+@using NavLink = FluentUI.Demo.Shared.NavLink
+@inject DemoNavProvider NavProvider
 
 <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" CustomToggle="true" >
-            @foreach(var item in NavProvider.NavMenuItems)
+    <nav class="sitenav" aria-labelledby="main-menu">
+        <FluentSearch @bind-Value="@_term" Placeholder="search"/>
+        <FluentNavMenu Id="main-menu" Title="Main menu" CustomToggle="true">
+            @foreach (var item in navMenuItems.Where(a => a.Visible))
             {
-                <DemoNavMenuItem Value="item"/>
+                <DemoNavMenuItem Value="item" />
             }
         </FluentNavMenu>
     </nav>
 </div>
+
+
+@code
+{
+    string _term = default!;
+
+    IEnumerable<NavItem> navMenuItems
+    {
+        get
+        {
+            foreach (var item in NavProvider.NavMenuItems)
+            {
+                SetVisible(item);
+            }
+
+            return NavProvider.NavMenuItems;
+        }
+    }
+
+    private void SetVisible(NavItem item)
+    {
+        switch (item)
+        {
+            case NavGroup group:
+                foreach (var link in group.Children)
+                {
+                    SetVisible(link);
+                }
+
+                item.Visible = group.Children.Any(a => a.Visible);
+                break;
+
+            case NavLink:
+                item.Visible = string.IsNullOrEmpty(_term)
+                                    ? true
+                                    : item.Title.Contains(_term, StringComparison.OrdinalIgnoreCase)
+                                        || item.Tags.Any(a => a.Contains(_term, StringComparison.OrdinalIgnoreCase));
+                break;
+
+            default: break;
+        }
+    }
+}

examples/Demo/Shared/Shared/DemoNavMenuItem.razor

@@ -1,31 +1,35 @@
 @using NavLink = FluentUI.Demo.Shared.NavLink
 
-@switch (Value)
+@if (Value.Visible)
 {
-    case NavGroup group:
-        <FluentNavGroup @bind-Expanded="@group.Expanded" Gap="@group.Gap" Icon="@group.Icon" >
-            <TitleTemplate>
-                <h3>@group.Title</h3></TitleTemplate>
-            <ChildContent>
-                @foreach(var item in group.Children)
+    @switch (Value)
+    {
+        case NavGroup group:
+            <FluentNavGroup @bind-Expanded="@group.Expanded" Gap="@group.Gap" Icon="@group.Icon">
+                <TitleTemplate>
+                    <h3>@group.Title</h3>
+                </TitleTemplate>
+                <ChildContent>
+                    @foreach (var item in group.Children.Where(a => a.Visible))
+                    {
+                        <DemoNavMenuItem Value="item" />
+                    }
+                </ChildContent>
+            </FluentNavGroup>
+            break;
+        case NavLink:
+            <FluentNavLink Icon="@Value.Icon" Href="@Value.Href" Match="@Value.Match">
+                @if (Value.Match is NavLinkMatch.All)
                 {
-                    <DemoNavMenuItem Value="item" />
+                    <h3>@Value.Title</h3>
                 }
-            </ChildContent>
-        </FluentNavGroup>
-        break;
-    case NavLink:
-        <FluentNavLink Icon="@Value.Icon" Href="@Value.Href" Match="@Value.Match">
-            @if (Value.Match is NavLinkMatch.All)
-            {
-                <h3>@Value.Title</h3>
-            }
-            else
-            {
-                @Value.Title
-            }
-        </FluentNavLink>
-        break;
+                else
+                {
+                    @Value.Title
+                }
+            </FluentNavLink>
+            break;
+    }
 }
 
 @code {

examples/Demo/Shared/Shared/NavItem.cs

@@ -13,16 +13,23 @@ public abstract record NavItem
     public string? Href { get; init; }
     public NavLinkMatch Match { get; init; } = NavLinkMatch.Prefix;
     public Icon Icon { get; init; } = new Icons.Regular.Size20.Document();
+    public bool Visible { get; set; }
+    public IEnumerable<string> Tags { get; set; } = [];
 }
 
 public record NavLink : NavItem
 {
-    public NavLink(string? href, Icon icon, string title, NavLinkMatch match = NavLinkMatch.Prefix)
+    public NavLink(string? href,
+                   Icon icon,
+                   string title,
+                   NavLinkMatch match = NavLinkMatch.Prefix,
+                   IEnumerable<string>? tags = null)
     {
         Href = href;
         Icon = icon;
         Title = title;
         Match = match;
+        Tags = tags ?? [];
     }
 }
 
@@ -32,13 +39,14 @@ public record NavGroup : NavItem
     public string Gap { get; init; }
     public IReadOnlyList<NavItem> Children { get; }
 
-    public NavGroup(Icon icon, string title, bool expanded, string gap, List<NavItem> children)
+    public NavGroup(Icon icon, string title, bool expanded, string gap, List<NavItem> children, IEnumerable<string>? tags = null)
     {
         Href = null;
         Icon = icon;
         Title = title;
         Expanded = expanded;
         Gap = gap;
         Children = children.AsReadOnly();
+        Tags = tags ?? [];
     }
 }