From 8c2ecb3e716db58b6c29fb58863b75372ebd47b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Mon, 23 Aug 2021 20:50:39 +0200
Subject: [PATCH] Migrate mobile navigation

---
 .../ep_theme/Resources/Private/Partials/Mainnav.html |  2 +-
 .../Resources/Private/Partials/Mobilenav.html        | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
index 907f8cd6..cc58dab2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
@@ -15,7 +15,7 @@
                 <div class="hidden lg:block">
                     <f:render section="FirstLevel" arguments="{_all}"/>
                 </div>
-                <div class="flex lg:hidden items-center space-x-4 pb-4" x-data>
+                <div class="flex lg:hidden items-center space-x-4 pb-4">
                     <f:if condition="{data.tx_eptheme_hide_searchbar}">
                         <f:else>
                             <button class="focus:outline-none text-gray-800"
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 22a5885b..22af564a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
@@ -30,20 +30,24 @@
         </div>
         <ul class="m-0 px-8 py-4 divide-y divide-overlay-white">
             <f:for each="{mobilenav}" as="subitem">
-                <li class="py-2 pr-4" x-data="{ visible: false }">
+                <li class="py-2 pr-4"
+                    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" x-on:click.prevent="visible = !visible">
-                            <svg class="h-6 w-6 transform text-white" x-bind:class="visible && 'rotate-180'">
+                        <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" x-show="visible" x-transition.750ms>
+                    <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"