NavItems behave platform specific

I18N Commander/UI MAUI/Components/NavItem.razor

@@ -1,9 +1,22 @@
 <li class="nav-item">
-    <a class="nav-link active" aria-current="page" href="@this.Route">
+    @if (DeviceInfo.Idiom == DeviceIdiom.Desktop || DeviceInfo.Idiom == DeviceIdiom.Tablet)
-        @if (this.ShowIcon)
+    {
-        {
+        <a class="nav-link active" aria-current="page" href="@this.Route">
-            <Icon Filename="@this.IconFilename" Size="25" AltText="@this.AltText" />
+            @if (this.ShowIcon)
-        }
+            {
-        <span class="ms-1 align-middle">@this.Text</span>
+                <Icon Filename="@this.IconFilename" Size="25" AltText="@this.AltText" />
-    </a>
+            }
+            <span class="ms-1 align-middle">@this.Text</span>
+        </a>
+    }
+    else
+    {
+        <a class="nav-link active" aria-current="page" href="@this.Route" @onclick="@this.Navigate" data-bs-toggle="collapse" data-bs-target="#navbarContent">
+            @if (this.ShowIcon)
+            {
+                <Icon Filename="@this.IconFilename" Size="25" AltText="@this.AltText" />
+            }
+            <span class="ms-1 align-middle">@this.Text</span>
+        </a>
+    }
 </li>

I18N Commander/UI MAUI/Components/NavItem.razor.cs

@@ -16,5 +16,10 @@ public partial class NavItem : ComponentBase
     [Parameter]
     public string IconFilename { get; set; } = string.Empty;
 
+    [Inject]
+    public NavigationManager NavigationManager { get; set; }
+
     private string AltText => $"Navigation: {this.Text}";
+
+    private void Navigate() => this.NavigationManager.NavigateTo(this.Route);
 }