NavLink and NavGroup: IconOnly Mode

src/MudBlazor.Docs/Pages/Components/NavMenu/Examples/NavMenuIconOnlyExample.razor

@@ -0,0 +1,41 @@
+@namespace MudBlazor.Docs.Examples
+
+<MudPaper Width="300px" Class="d-inline-flex py-3" Elevation="0">
+    <MudNavMenu>
+        <MudIconButton Icon="@Icons.Material.Filled.Menu" OnClick="ToggleSimpleCollapsed"></MudIconButton>
+        <MudDivider Class="my-2"/>
+        <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard" IconOnly="isSimpleCollapsed">Dashboard</MudNavLink>
+        <MudNavLink Href="/servers" Icon="@Icons.Material.Filled.Storage" IconOnly="isSimpleCollapsed">Servers</MudNavLink>
+        <MudNavLink Href="/billing" Icon="@Icons.Material.Filled.Receipt" Disabled="true" IconOnly="isSimpleCollapsed">Billing</MudNavLink>
+    </MudNavMenu>
+    <MudText Typo="Typo.body1" Class="pa-2">NavLink Only NavMenu</MudText>
+</MudPaper>
+<MudPaper Width="300px" Class="d-inline-flex py-3" Elevation="0">
+    <MudNavMenu>
+        <MudIconButton Icon="@Icons.Material.Filled.Menu" OnClick="ToggleComplexCollapsed"></MudIconButton>
+        <MudDivider Class="my-2"/>
+        <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard" IconOnly="isComplexCollapsed">Dashboard</MudNavLink>
+        <MudNavLink Href="/servers" Icon="@Icons.Material.Filled.Storage" IconOnly="isComplexCollapsed">Servers</MudNavLink>
+        <MudNavLink Href="/billing" Icon="@Icons.Material.Filled.Receipt" Disabled="true" IconOnly="isComplexCollapsed">Billing</MudNavLink>
+        <MudNavGroup Title="Settings" Icon="@Icons.Material.Filled.Settings" Expanded="true" IconOnly="isComplexCollapsed">
+            <MudNavLink Href="/users" Icon="@Icons.Material.Filled.People" IconColor="Color.Success" IconOnly="isComplexCollapsed">Users</MudNavLink>
+            <MudNavLink Href="/security" Icon="@Icons.Material.Filled.Security" IconColor="Color.Info" IconOnly="isComplexCollapsed">Security</MudNavLink>
+        </MudNavGroup>
+    </MudNavMenu>
+    <MudText Typo="Typo.body1" Class="pa-2">Even supports complex NavGroup setups</MudText>
+</MudPaper>
+
+@code {
+    private bool isSimpleCollapsed = false;
+    private bool isComplexCollapsed = false;
+
+    private void ToggleSimpleCollapsed()
+    {
+        isSimpleCollapsed = !isSimpleCollapsed;
+    }
+
+    private void ToggleComplexCollapsed()
+    {
+        isComplexCollapsed = !isComplexCollapsed;
+    }
+}

src/MudBlazor.Docs/Pages/Components/NavMenu/NavMenuPage.razor

@@ -41,6 +41,15 @@
                 <NavMenuIconExample/>
             </SectionContent>
         </DocsPageSection>
+
+        <DocsPageSection>
+            <SectionHeader Title="Icon Only">
+                <Description>You can set the property <CodeInline>IconOnly</CodeInline> to true to not render the child components of <CodeInline>MudNavGroup</CodeInline> or <CodeInline>MudNavLink</CodeInline>. This is handy for a collapsed mode for your NavMenu</Description>
+            </SectionHeader>
+            <SectionContent DarkenBackground="true" Code="@nameof(NavMenuIconOnlyExample)" ShowCode="false">
+                <NavMenuIconOnlyExample/>
+            </SectionContent>
+        </DocsPageSection>
 
         <DocsPageSection>
             <SectionHeader Title="Bordered">

src/MudBlazor.UnitTests/Components/NavGroupTests.cs

@@ -42,5 +42,18 @@ public void NavGroup_Should_UseNavTag()
 
             comp.FindAll("nav").Should().Contain(navNode => navNode.GetAttribute("aria-label") == expectedTitle);
         }
+
+        /// <summary>
+        /// Verify that when IconOnly is set on the MudNavGroup component, the div with the class ".mud-nav-link-text" is not rendered
+        /// Also verify that when IconOnly is not set on the MudNavGroup component, that the div with the class ".mud-nav-link-text" is rendered
+        /// </summary>
+        [Test]
+        public async Task NavGroup_IconOnly_NoText()
+        {
+            var comp = Context.RenderComponent<MudNavGroup>(Parameter(nameof(MudNavLink.IconOnly), true));
+            comp.FindAll(".mud-nav-link-text").Should().BeEmpty();
+            comp = Context.RenderComponent<MudNavGroup>();
+            comp.FindAll(".mud-nav-link-text").Should().NotBeEmpty();
+        }
     }
 }

src/MudBlazor.UnitTests/Components/NavLinkTests.cs

@@ -68,5 +68,18 @@ public async Task NavLink_Disabled_CheckNoNavigation()
             comp.Find("a").Click();
             comp.Instance.IsNavigated.Should().BeFalse();
         }
+
+        /// <summary>
+        /// Verify that when IconOnly is set on the MudNavLink component, the div with the class ".mud-nav-link-text" is not rendered
+        /// Also verify that when IconOnly is not set on the MudNavLink component, that the div with the class ".mud-nav-link-text" is rendered
+        /// </summary>
+        [Test]
+        public async Task NavLink_IconOnly_NoText()
+        {
+            var comp = Context.RenderComponent<MudNavLink>(Parameter(nameof(MudNavLink.IconOnly), true));
+            comp.FindAll(".mud-nav-link-text").Should().BeEmpty();
+            comp = Context.RenderComponent<MudNavLink>();
+            comp.FindAll(".mud-nav-link-text").Should().NotBeEmpty();
+        }
     }
 }

src/MudBlazor/Components/NavMenu/MudNavGroup.razor

@@ -19,9 +19,12 @@
         {
             <MudIcon Icon="@Icon" Color="@IconColor" Class="@IconClassname" />
         }
-        <div Class="mud-nav-link-text">
-            @Title
-        </div>
+        @if (!IconOnly)
+        {
+            <div Class="mud-nav-link-text">
+                @Title
+            </div>
+        }
         @if (!HideExpandIcon)
         {
             <MudIcon Icon="@ExpandIcon" Class="@ExpandIconClassname" />

src/MudBlazor/Components/NavMenu/MudNavGroup.razor.cs

@@ -139,6 +139,13 @@ public bool Expanded
         [Parameter]
         public EventCallback<bool> ExpandedChanged { get; set; }
 
+        /// <summary>
+        /// Controls the render of the Title element, true to hide the Title
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.NavMenu.Appearance)]
+        public bool IconOnly { get; set; }
+
         private Task ExpandedToggleAsync()
         {
             _expanded = !Expanded;

src/MudBlazor/Components/NavMenu/MudNavLink.razor

@@ -16,9 +16,12 @@
                 {
                     <MudIcon Icon="@Icon" Color="@IconColor" Class="@IconClassname"/>
                 }
-                <div class="mud-nav-link-text">
-                    @ChildContent
-                </div>
+                @if (!IconOnly)
+                {
+                    <div class="mud-nav-link-text">
+                        @ChildContent
+                    </div>
+                }
             </NavLink>
         }
         else
@@ -30,9 +33,12 @@
                 {
                     <MudIcon Icon="@Icon" Color="@IconColor" Class="@IconClassname" />
                 }
-                <div class="mud-nav-link-text">
-                    @ChildContent
-                </div>
+                @if (!IconOnly)
+                {
+                    <div class="mud-nav-link-text">
+                        @ChildContent
+                    </div>
+                }
             </div>
         }
     }

src/MudBlazor/Components/NavMenu/MudNavLink.razor.cs

@@ -58,6 +58,13 @@ public partial class MudNavLink : MudBaseSelectItem
         [Category(CategoryTypes.NavMenu.Appearance)]
         public Color IconColor { get; set; } = Color.Default;
 
+        /// <summary>
+        /// Controls the render of the child elements, true to hide child elements
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.NavMenu.Appearance)]
+        public bool IconOnly { get; set; } = false;
+
         [Parameter]
         [Category(CategoryTypes.NavMenu.Behavior)]
         public NavLinkMatch Match { get; set; } = NavLinkMatch.Prefix;