From 01d19d900eb89cf2dd1982c413e1bbba93bb51a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 26 Oct 2021 17:46:50 +0200
Subject: [PATCH] Hide empty subnavigations and their buttons in mobile view

---
 .../Resources/Private/Partials/Mobilenav.html | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
index e81412d8..bb7024c1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
@@ -124,27 +124,31 @@
                            title="{subitem.title}">
                             {subitem.title}
                         </a>
-                        <button type="button"
-                                class="focus:outline-none"
-                                data-action="collapse#toggle">
-                            <svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
-                                <use href="#icon-chevron-down"></use>
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="transform pt-2"
-                         data-collapse-target="container">
-                        <f:for each="{subitem.children}" as="subsubitem">
-                            <a href="{subsubitem.link}"{f:if(condition: '{subsubitem.data.doktype} == 3', then: ' _target="blank"')}
-                            class="flex items-center space-x-2 text-lg leading-loose text-white hover:text-white focus:text-white"
-                            title="{subsubitem.title}">
-                                <svg class="w-4 h-4 text-white">
-                                    <use href="#icon-chevron-right"></use>
+                        <f:if condition="{subitem.children}">
+                            <button type="button"
+                                    class="focus:outline-none"
+                                    data-action="collapse#toggle">
+                                <svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
+                                    <use href="#icon-chevron-down"></use>
                                 </svg>
-                                <span>{subsubitem.title}</span>
-                            </a>
-                        </f:for>
+                            </button>
+                        </f:if>
                     </div>
+                    <f:if condition="{subitem.children}">
+                        <div class="transform pt-2"
+                             data-collapse-target="container">
+                            <f:for each="{subitem.children}" as="subsubitem">
+                                <a href="{subsubitem.link}"{f:if(condition: '{subsubitem.data.doktype} == 3', then: ' _target="blank"')}
+                                class="flex items-center space-x-2 text-lg leading-loose text-white hover:text-white focus:text-white"
+                                title="{subsubitem.title}">
+                                    <svg class="w-4 h-4 text-white">
+                                        <use href="#icon-chevron-right"></use>
+                                    </svg>
+                                    <span>{subsubitem.title}</span>
+                                </a>
+                            </f:for>
+                        </div>
+                    </f:if>
                 </li>
             </f:for>
         </ul>