Enhance navigation components with improved layout and styling

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>
 }
 

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>
 

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

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>
 }