add collapsible static nav group

Author: Anu6is

demo/StaticSample/StaticSample.Client/Layout/NavMenu.razor

@@ -3,13 +3,15 @@
     <MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
     <MudNavLink Href="weather" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Weather</MudNavLink>
 
-	<AuthorizeView>
-		<Authorized>
-			<MudNavLink Href="Account/Manage" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">@context.User.Identity?.Name</MudNavLink>
-		</Authorized>
-		<NotAuthorized>
-			<MudNavLink Href="Account/Register" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Register</MudNavLink>
-			<MudNavLink Href="Account/Login" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Login</MudNavLink>
-		</NotAuthorized>
-	</AuthorizeView>
+	<MudStaticNavGroup Icon="@Icons.Material.Filled.AdminPanelSettings" Title="Account" Expanded="true">
+		<AuthorizeView>
+			<Authorized>
+				<MudNavLink Href="Account/Manage" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">@context.User.Identity?.Name</MudNavLink>
+			</Authorized>
+			<NotAuthorized>
+				<MudNavLink Href="Account/Register" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Register</MudNavLink>
+				<MudNavLink Href="Account/Login" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Login</MudNavLink>
+			</NotAuthorized>
+		</AuthorizeView>
+	</MudStaticNavGroup>
 </MudNavMenu>

src/Components/NavMenu/MudStaticNavGroup.razor

@@ -0,0 +1,64 @@
+@namespace MudBlazor.StaticInput
+
+@inherits MudNavGroup
+
+@{
+    base.BuildRenderTree(__builder);
+}
+
+@code {
+    private string _elementId = string.Empty;
+
+    protected override void OnParametersSet()
+    {
+        UserAttributes["data-static-component"] = true;
+        UserAttributes["data-static-id"] = _elementId;
+
+        base.OnParametersSet();
+    }
+
+    protected override void OnInitialized()
+    {
+        _elementId = Guid.NewGuid().ToString()[..8];
+
+        base.OnInitialized();
+    }
+}
+
+@if (IsStatic()) {
+    <script>
+        (function () {
+            document.addEventListener('DOMContentLoaded', () => {
+                const button = document.querySelector('[data-static-id="@_elementId"] button');
+
+                if (button) {
+                    button.addEventListener('click', (event) => {
+                        const navElement = event.target.closest('nav');
+                        const collapseContainer = navElement.querySelector('.mud-collapse-container');
+                        const expandIcon = navElement.querySelector('.mud-nav-link-expand-icon');
+
+                        if (!collapseContainer || !expandIcon) {
+                            console.warn("Missing required elements for toggling");
+                            return;
+                        }
+
+                        // Check current state
+                        const isExpanded = button.getAttribute('aria-expanded') === "true";
+
+                        // Toggle classes for collapse container
+                        collapseContainer.classList.toggle('mud-collapse-entered', !isExpanded);
+                        collapseContainer.classList.toggle('mud-navgroup-collapse', true);
+                        collapseContainer.classList.remove('mud-collapse-entering');
+                        collapseContainer.setAttribute('aria-hidden', isExpanded);
+
+                        // Toggle classes for expand icon
+                        expandIcon.classList.toggle('mud-transform', !isExpanded);
+
+                        // Update aria-expanded on the button
+                        button.setAttribute('aria-expanded', !isExpanded);
+                    });
+                }
+            });
+        })();
+    </script> 
+}

src/Components/NavMenu/MudStaticNavGroup.razor.cs

@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Http;
+
+namespace MudBlazor.StaticInput;
+
+public partial class MudStaticNavGroup : MudNavGroup
+{
+    [CascadingParameter]
+    private HttpContext HttpContext { get; set; } = default!;
+
+    private bool IsStatic()
+    {
+#if NET9_0_OR_GREATER
+        return !RendererInfo.IsInteractive;
+#else
+        return HttpContext != null;
+#endif
+    }
+}
+

src/MudBlazor.StaticInput.csproj

@@ -21,6 +21,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Http.Abstractions" Version="2.2.0" />
         <PackageReference Include="MudBlazor" Version="8.0.0-preview.5" />
     </ItemGroup>