From ce7880041b35da948af0906b64b180f7a0ca2097 Mon Sep 17 00:00:00 2001
From: maliming <malimings@gmail.com>
Date: Mon, 9 Feb 2026 10:58:56 +0800
Subject: [PATCH] Enhance navigation components with improved layout and
 styling

---
 .../Themes/Basic/FirstLevelNavMenuItem.razor      | 15 +++++++++++----
 .../Themes/Basic/MainLayout.razor                 |  3 ++-
 .../Themes/Basic/NavMenu.razor                    |  5 +++--
 .../Themes/Basic/SecondLevelNavMenuItem.razor     | 13 ++++++++++---
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/FirstLevelNavMenuItem.razor b/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/FirstLevelNavMenuItem.razor
index 7515e228e1..57827f06a6 100644
--- a/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/FirstLevelNavMenuItem.razor
+++ b/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/FirstLevelNavMenuItem.razor
@@ -13,20 +13,27 @@
 }
 else
 {
-    <MudNavGroup Title="@MenuItem.DisplayName" Icon="@MenuItem.Icon">
+    <MudNavGroup>
+        <TitleContent>
+            <MudIcon Icon="@MenuItem.Icon" Title="@MenuItem.DisplayName" Size="Size.Small" />
+            <MudText Class="ms-1" Inline="true">@MenuItem.DisplayName</MudText>
+        </TitleContent>
+        <ChildContent>
         @foreach (var item in MenuItem.Items)
         {
             @if (item.Items.Any())
             {
-                <SecondLevelNavMenuItem MenuItem="item" />
+                <SecondLevelNavMenuItem MenuItem="item"/>
             }
             else
             {
-                <MudNavLink Href="@(item.Url?.TrimStart('/', '~') ?? "#")" Icon="@item.Icon" Match="@(item.Url != null ? NavLinkMatch.All : NavLinkMatch.Prefix)">
-                    @item.DisplayName
+                <MudNavLink Href="@(item.Url?.TrimStart('/', '~') ?? "#")" Match="@(item.Url != null ? NavLinkMatch.All : NavLinkMatch.Prefix)">
+                    <MudIcon Icon="@item.Icon" Size="Size.Small"/>
+                    <MudText Class="ms-1" Inline="true">@item.DisplayName</MudText>
                 </MudNavLink>
             }
         }
+        </ChildContent>
     </MudNavGroup>
 }
 
diff --git a/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/MainLayout.razor b/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/MainLayout.razor
index 13fc28689d..c1db9951af 100644
--- a/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/MainLayout.razor
+++ b/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/MainLayout.razor
@@ -22,7 +22,8 @@
 
     <MudDrawer @bind-Open="@_drawerOpen"
                Elevation="1"
-               Variant="@DrawerVariant.Mini">
+               Variant="@DrawerVariant.Mini"
+               Width="280px">
         <NavMenu />
     </MudDrawer>
 
diff --git a/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/NavMenu.razor b/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/NavMenu.razor
index ccb3d361c1..90c4e73797 100644
--- a/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/NavMenu.razor
+++ b/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/NavMenu.razor
@@ -6,8 +6,9 @@
         {
             @if (menuItem.Items.IsNullOrEmpty())
             {
-                <MudNavLink Href="@menuItem.Url" Icon="@menuItem.Icon" Match="@(menuItem.Url != null ? NavLinkMatch.All : NavLinkMatch.Prefix)">
-                    @menuItem.DisplayName
+                <MudNavLink Href="@menuItem.Url" Match="@(menuItem.Url != null ? NavLinkMatch.All : NavLinkMatch.Prefix)">
+                    <MudIcon Icon="@menuItem.Icon" Size="Size.Small" />
+                    <MudText Class="ms-1" Inline="true">@menuItem.DisplayName</MudText>
                 </MudNavLink>
             }
             else
diff --git a/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/SecondLevelNavMenuItem.razor b/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/SecondLevelNavMenuItem.razor
index 85846a6d4a..589e8d644f 100644
--- a/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/SecondLevelNavMenuItem.razor
+++ b/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/SecondLevelNavMenuItem.razor
@@ -13,13 +13,20 @@
 }
 else
 {
-    <MudNavGroup Title="@MenuItem.DisplayName" Icon="@MenuItem.Icon">
+    <MudNavGroup>
+        <TitleContent>
+            <MudIcon Icon="@MenuItem.Icon" Title="@MenuItem.DisplayName" Size="Size.Small" />
+            <MudText Class="ms-2" Inline="true">@MenuItem.DisplayName</MudText>
+        </TitleContent>
+        <ChildContent>
         @foreach (var item in MenuItem.Items)
         {
-            <MudNavLink Href="@(item.Url?.TrimStart('/', '~') ?? "#")" Icon="@item.Icon" Match="@(item.Url != null ? NavLinkMatch.All : NavLinkMatch.Prefix)">
-                @item.DisplayName
+            <MudNavLink Href="@(item.Url?.TrimStart('/', '~') ?? "#")" Match="@(item.Url != null ? NavLinkMatch.All : NavLinkMatch.Prefix)">
+                <MudIcon Icon="@item.Icon" Size="Size.Small"/>
+                <MudText Class="ms-2" Inline="true">@item.DisplayName</MudText>
             </MudNavLink>
         }
+        </ChildContent>
     </MudNavGroup>
 }