From 8e37d0c8fcce6f435c56c8de19a4e22471918be7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= <hi_kalkan@yahoo.com>
Date: Tue, 20 Oct 2020 17:14:04 +0300
Subject: [PATCH] Toggle collapse on blazor ui mobile view

---
 .../Themes/Basic/MainLayout.razor                    |  4 ++--
 .../Themes/Basic/MainLayout.razor.cs                 | 12 ++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor.cs

diff --git a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor
index 6954057142..0419b3be04 100644
--- a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor
+++ b/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>
diff --git a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor.cs b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor.cs
new file mode 100644
index 0000000000..578232897a
--- /dev/null
+++ b/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;
+        }
+    }
+}