Adjust mobile navigation layout

public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript

@@ -158,7 +158,6 @@ page {
                 as = mobilenav
             }
         }
-
         settings < plugin.tx_eptheme.settings
     }
 

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Detail.html

@@ -13,7 +13,7 @@
     <f:render partial="Footer" arguments="{_all}"/>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
-    <f:render partial="Mobilenav" arguments="{_all}"/>
+    <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Config" arguments="{_all}" />
     <f:render partial="Icons" arguments="{_all}"/>
 </html>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html

@@ -15,7 +15,7 @@
     <f:render partial="Footer" arguments="{_all}"/>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
-    <f:render partial="Mobilenav" arguments="{_all}"/>
+    <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:cObject typoscriptObjectPath="lib.searchBox"/>
     <f:render partial="Config" arguments="{_all}" />
     <f:render partial="Icons" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html

@@ -11,7 +11,7 @@
     <f:render partial="Footer" arguments="{_all}"/>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
-    <f:render partial="Mobilenav" arguments="{_all}"/>
+    <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Config" arguments="{_all}" />
     <f:render partial="Icons" arguments="{_all}"/>
 </html>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html

@@ -9,7 +9,7 @@
     <f:render partial="Footer" arguments="{_all}"/>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
-    <f:render partial="Mobilenav" arguments="{_all}"/>
+    <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Config" arguments="{_all}" />
     <f:render partial="Icons" arguments="{_all}"/>
 </html>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html

@@ -17,7 +17,7 @@
     <f:render partial="Footer" arguments="{_all}"/>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
-    <f:render partial="Mobilenav" arguments="{_all}"/>
+    <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Config" arguments="{_all}" />
     <f:render partial="Icons" arguments="{_all}"/>
 </html>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html

@@ -25,7 +25,7 @@
     <f:render partial="Footer" arguments="{_all}"/>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
-    <f:render partial="Mobilenav" arguments="{_all}"/>
+    <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Config" arguments="{_all}" />
     <f:render partial="Icons" arguments="{_all}"/>
 </html>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html

@@ -21,7 +21,7 @@
     <f:render partial="Footer" arguments="{_all}"/>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
-    <f:render partial="Mobilenav" arguments="{_all}"/>
+    <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Config" arguments="{_all}" />
     <f:render partial="Icons" arguments="{_all}"/>
 </html>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html

@@ -25,7 +25,7 @@
     <f:render partial="Footer" arguments="{_all}"/>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
-    <f:render partial="Mobilenav" arguments="{_all}"/>
+    <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Config" arguments="{_all}" />
     <f:render partial="Icons" arguments="{_all}"/>
 </html>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html

@@ -21,7 +21,7 @@
     <f:render partial="Footer" arguments="{_all}"/>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
-    <f:render partial="Mobilenav" arguments="{_all}"/>
+    <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Config" arguments="{_all}" />
     <f:render partial="Icons" arguments="{_all}"/>
 </html>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html

@@ -3,6 +3,7 @@
       xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
+    <f:section name="Main">
         <div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 transform hidden"
              data-controller="overlay-toggle"
              data-overlay-toggle-id-value="mobilenav"
@@ -36,51 +37,25 @@
             </div>
             <div class="h-full w-full overflow-y-scroll">
                 <div class="relative bg-ep-primary">
-                <ul class="m-0 px-0 py-4">
+                    <ul>
                         <f:for each="{topnav}" as="topitem">
-                        <li class="py-2 px-4 hover:bg-ep-primary-light{f:if(condition: topitem.active, then: ' bg-ep-primary-light')}">
+                            <li>
-                            <a class="block text-xl text-white hover:text-white hover:text-white focus:text-white uppercase font-bold"
+                                <a class="block text-xl uppercase font-bold text-white hover:text-white focus:text-white py-2 px-4 hover:bg-ep-primary-light{f:if(condition: topitem.active, then: ' bg-ep-primary-light')}"
                                    href="{topitem.link}"{f:if(condition: '{topitem.data.doktype} == 3', then: ' target="_blank"')}
                                 title="{topitem.title}">
                                 {topitem.title}
                                 </a>
+                                <f:if condition="{topitem.active}">
+                                    <f:render section="Subnav" arguments="{_all}"/>
+                                </f:if>
                             </li>
                         </f:for>
                     </ul>
                 </div>
-            <ul class="m-0 p-4 divide-y divide-ep-primary-50">
+                <f:if condition="{data.uid} == {settings.defaultHomeUid}">
-                <f:for each="{mobilenav}" as="subitem">
+                    <f:render section="Subnav" arguments="{_all}"/>
-                    <li class="py-2 pr-4"
+                </f:if>
-                        data-controller="collapse"
-                        data-collapse-collapsed-value="true">
-                        <div class="flex items-center justify-between">
-                            <a href="{subitemlink}"
-                               class="uppercase text-xl text-white hover:text-white focus:text-white"
-                               title="{subitem.title}">
-                                {subitem.title}
-                            </a>
-                            <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"
-                             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="block text-lg leading-loose text-white hover:text-white focus:text-white"
-                                title="{subsubitem.title}">
-                                {subsubitem.title}
-                                </a>
-                            </f:for>
-                        </div>
-                    </li>
-                </f:for>
-            </ul>
                 <div class="px-4 py-4">
-                <div class="border-t-4 border-ep-primary mb-4"></div>
                     <p class="text-2xl text-white uppercase font-bold mb-1">
                         Du hast Fragen?
                     </p>
@@ -110,5 +85,40 @@
                 </div>
             </div>
         </div>
+    </f:section>
+
+    <f:section name="Subnav">
+        <ul class="m-0 px-4 divide-y divide-ep-primary-50 bg-gray-700">
+            <f:for each="{mobilenav}" as="subitem">
+                <li class="py-2"
+                    data-controller="collapse"
+                    data-collapse-collapsed-value="true">
+                    <div class="flex items-center justify-between">
+                        <a href="{subitemlink}"
+                           class="uppercase text-xl text-white hover:text-white focus:text-white"
+                           title="{subitem.title}">
+                            {subitem.title}
+                        </a>
+                        <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"
+                         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="block text-lg leading-loose text-white hover:text-white focus:text-white"
+                            title="{subsubitem.title}">
+                            {subsubitem.title}
+                            </a>
+                        </f:for>
+                    </div>
+                </li>
+            </f:for>
+        </ul>
+    </f:section>
 
 </html>