From a4d75befe7397569c7bce700821e176374e352b0 Mon Sep 17 00:00:00 2001
From: Santiago Cattaneo <santiago@rd-its.com>
Date: Sun, 22 May 2022 20:05:01 -0300
Subject: [PATCH] * Collapse menu after click on a page (mobile version)

---
 .../Controls/Theme/MenuItemsHorizontal.razor  | 20 +++++++++++-----
 .../Controls/Theme/MenuItemsVertical.razor    | 24 ++++++++++++-------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/Oqtane.Client/Themes/Controls/Theme/MenuItemsHorizontal.razor b/Oqtane.Client/Themes/Controls/Theme/MenuItemsHorizontal.razor
index 2bf9a284..76c254e4 100644
--- a/Oqtane.Client/Themes/Controls/Theme/MenuItemsHorizontal.razor
+++ b/Oqtane.Client/Themes/Controls/Theme/MenuItemsHorizontal.razor
@@ -9,15 +9,19 @@
             if (childPage.PageId == PageState.Page.PageId)
             {
                 <a class="nav-link active px-3" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                    <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
                         <span class="@childPage.Icon" aria-hidden="true" />
                         @childPage.Name <span class="visually-hidden-focusable">(current)</span>
+                    </span>
                 </a>
             }
             else
             {
                 <a class="nav-link px-3" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                    <span class="@childPage.Icon" aria-hidden="true" />
-                    @childPage.Name
+                    <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                        <span class="@childPage.Icon" aria-hidden="true" />
+                        @childPage.Name
+                    </span>
                 </a>
             }
         }
@@ -34,8 +38,10 @@ else
                 {
                     <li class="nav-item">
                         <a class="nav-link active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                            <span class="@childPage.Icon" aria-hidden="true" />
-                            @childPage.Name <span class="visually-hidden-focusable">(current)</span>
+                            <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                                <span class="@childPage.Icon" aria-hidden="true" />
+                                @childPage.Name <span class="visually-hidden-focusable">(current)</span>
+                            </span>
                         </a>
                     </li>
                 }
@@ -43,8 +49,10 @@ else
                 {
                     <li class="nav-item">
                         <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                            <span class="@childPage.Icon" aria-hidden="true" />
-                            @childPage.Name
+                            <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                                <span class="@childPage.Icon" aria-hidden="true" />
+                                @childPage.Name
+                            </span>
                         </a>
                     </li>
                 }
diff --git a/Oqtane.Client/Themes/Controls/Theme/MenuItemsVertical.razor b/Oqtane.Client/Themes/Controls/Theme/MenuItemsVertical.razor
index 529ae3f3..c7417b28 100644
--- a/Oqtane.Client/Themes/Controls/Theme/MenuItemsVertical.razor
+++ b/Oqtane.Client/Themes/Controls/Theme/MenuItemsVertical.razor
@@ -9,8 +9,10 @@
         {
             <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
                 <a class="nav-link active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                    <span class="@childPage.Icon" aria-hidden="true" />
-                    @childPage.Name <span class="visually-hidden-focusable">(current)</span>
+                    <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                        <span class="@childPage.Icon" aria-hidden="true" />
+                        @childPage.Name <span class="visually-hidden-focusable">(current)</span>
+                    </span>
                 </a>
             </li>
         }
@@ -18,8 +20,10 @@
         {
             <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
                 <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                    <span class="@childPage.Icon" aria-hidden="true" />
-                    @childPage.Name
+                    <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                        <span class="@childPage.Icon" aria-hidden="true" />
+                        @childPage.Name
+                    </span>
                 </a>
             </li>
         }
@@ -38,8 +42,10 @@ else
             {
                 <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
                     <a class="nav-link active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                        <span class="@childPage.Icon" aria-hidden="true" />
-                        @childPage.Name <span class="visually-hidden-focusable">(current)</span>
+                        <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                            <span class="@childPage.Icon" aria-hidden="true" />
+                            @childPage.Name <span class="visually-hidden-focusable">(current)</span>
+                        </span>
                     </a>
                 </li>
             }
@@ -47,8 +53,10 @@ else
             {
                 <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
                     <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                        <span class="@childPage.Icon" aria-hidden="true" />
-                        @childPage.Name
+                        <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                            <span class="@childPage.Icon" aria-hidden="true" />
+                            @childPage.Name
+                        </span>
                     </a>
                 </li>
             }