Toggle collapse on blazor ui mobile view

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor

@@ -4,12 +4,12 @@
 <nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm flex-column flex-md-row mb-4" id="main-navbar" style="min-height: 4rem;">
     <div class="container">
         <a class="navbar-brand" href="/">@BrandingProvider.AppName</a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse"
+        <button @onclick="ToggleCollapse" class="navbar-toggler" type="button" data-toggle="collapse"
                 data-target="#main-navbar-collapse" aria-controls="main-navbar-collapse"
                 aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
-        <div class="collapse navbar-collapse" id="main-navbar-collapse">
+        <div class="collapse navbar-collapse @(IsCollapseShown ? "show" : "")" id="main-navbar-collapse">
             <ul class="navbar-nav mx-auto">
                 <NavMenu />
             </ul>

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor.cs

@@ -0,0 +1,12 @@
+namespace Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
+{
+    public partial class MainLayout
+    {
+        private bool IsCollapseShown { get; set; }
+
+        private void ToggleCollapse()
+        {
+            IsCollapseShown = !IsCollapseShown;
+        }
+    }
+}