From bc9f5903405d9abad78068e1aa326879c1113ec6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 15 Mar 2022 11:26:06 +0100
Subject: [PATCH] WIP Rework mobile navigation

---
 .../TypoScript/Page/Main.typoscript           |   3 +-
 .../Resources/Private/Partials/Mobilenav.html | 146 +++++++++---------
 2 files changed, 77 insertions(+), 72 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
index 17810d6d..9b153d87 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
+++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
@@ -127,7 +127,8 @@ page {
             60 {
                 special = directory
                 special.value = {$plugin.tx_eptheme.settings.mobileNavPid}
-                levels = 3
+                levels = 4
+                expandAll = 1
                 titleField = title
                 as = mobilenav
             }
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 217285f5..b6048988 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
@@ -39,25 +39,7 @@
                 </div>
             </div>
             <div class="h-full w-full overflow-y-scroll">
-                <f:if condition="{data.uid} == {settings.defaultHomeUid}">
-                    <f:render section="Subnav" arguments="{_all}"/>
-                </f:if>
-                <div class="relative">
-                    <ul class="divide-y divide-ep-primary-dark">
-                        <f:for each="{topnav}" as="topitem">
-                            <li>
-                                <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>
+                <f:render section="Topnav" arguments="{_all}"/>
                 <div class="px-4 py-4 mt-4">
                     <p class="text-lg text-white uppercase font-bold mb-1">
                         Du hast Fragen?
@@ -107,61 +89,83 @@
         </div>
     </f:section>
 
-    <f:section name="Subnav">
-        <ul class="m-0 divide-y divide-overlay-white-50 bg-ep-primary">
-            <f:for each="{mobilenav}" as="subitem">
-                <li class="px-4 py-2"
-                    <f:if condition="{subitem.children}">
-                        data-controller="collapse"
-                        data-collapse-collapsed-value="true"
-                    </f:if>
-                    >
-                    <div class="flex items-center justify-between">
-                        <a href="{subitem.link}"
-                           class="uppercase text-xl text-white hover:text-white focus:text-white"
-                           title="{subitem.title}">
-                            {subitem.title}
-                        </a>
-                        <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="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-right"></use>
-                                </svg>
-                            </button>
-                        </f:if>
-                    </div>
-                    <f:if condition="{subitem.children}">
-                        <div class="transform pt-2"
-                            <f:if condition="{subitem.children}">
-                                 data-collapse-target="container"
-                          </f:if>
-                        >
-                            <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">
+    <f:section name="Topnav">
+        <ul class="divide-y divide-ep-primary-dark">
+            <f:for each="{mobilenav}" as="navitem">
+                <f:if condition="{navitem.children}">
+                    <f:then>
+                        <li data-controller="collapse"
+                            data-collapse-collapsed-value="true">
+                            <div class="flex items-center justify-between px-4 py-2 bg-ep-primary text-white">
+                                <a href="{navitem.link}"
+                                   class="uppercase text-xl flex-1"
+                                   title="{navitem.title}">
+                                    {navitem.title}
+                                </a>
+                                <button type="button"
+                                        class="focus:outline-none bg-ep-primary-dark p-1"
+                                        data-action="collapse#toggle">
+                                    <svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
                                         <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-right"></use>
                                     </svg>
-                                    <span>{subsubitem.title}</span>
+                                </button>
+                            </div>
+                            <div data-collapse-target="container" class="bg-ep-primary-dark pr-4">
+                                <f:render section="Subnav" arguments="{children: navitem.children, level: 2}"/>
+                            </div>
+                        </li>
+                    </f:then>
+                    <f:else>
+                        <li>
+                            <a href="{navitem.link}"
+                               class="block px-4 py-2 bg-ep-primary text-white uppercase text-xl"
+                               title="{navitem.title}">
+                                {navitem.title}
+                            </a>
+                        </li>
+                    </f:else>
+                </f:if>
+            </f:for>
+        </ul>
+    </f:section>
+
+    <f:section name="Subnav">
+        <ul class="text-white uppercase{f:if(condition: '{level} == 2', then: ' pl-4 divide-y divide-overlay-white-50')}{f:if(condition: '{level} == 3', then: ' pl-6')}{f:if(condition: '{level} > 3', then: ' ml-4 divide-y divide-overlay-white-50')}">
+            <f:for each="{children}" as="subitem">
+                <f:if condition="{subitem.children}">
+                    <f:then>
+                        <li class="py-2"
+                            data-controller="collapse"
+                            data-collapse-collapsed-value="true">
+                            <div class="flex items-center justify-between">
+                                <a href="{subitem.link}"
+                                   class="flex-1"
+                                   title="{subitem.title}">
+                                    {subitem.title}
                                 </a>
-                                <f:if condition="{subsubitem.children}">
-                                    <ul class="m-0 pb-2">
-                                        <f:for each="{subsubitem.children}" as="subsubsubitem">
-                                            <li class="py-1 pl-6">
-                                                <a href="{subsubsubitem.link}" title="{subitem.title}" class="text-white">
-                                                    {subsubsubitem.title}
-                                                </a>
-                                            </li>
-                                        </f:for>
-                                    </ul>
-                                </f:if>
-                            </f:for>
-                        </div>
-                    </f:if>
-                </li>
+                                <button type="button"
+                                        class="focus:outline-none bg-ep-primary p-1"
+                                        data-action="collapse#toggle">
+                                    <svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
+                                        <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-right"></use>
+                                    </svg>
+                                </button>
+                            </div>
+                            <div data-collapse-target="container">
+                                <f:render section="Subnav" arguments="{children: subitem.children, level: '{level + 1}'}"/>
+                            </div>
+                        </li>
+                    </f:then>
+                    <f:else>
+                        <li class="py-2">
+                            <a href="{subitem.link}"
+                                   class=""
+                                   title="{subitem.title}">
+                                {subitem.title}
+                            </a>
+                        </li>
+                    </f:else>
+                </f:if>
             </f:for>
         </ul>
     </f:section>