Migrate mobile navigation

This commit is contained in:
Björn Fromme
2021-08-23 20:50:39 +02:00
parent b513014413
commit 8c2ecb3e71
2 changed files with 9 additions and 5 deletions
@@ -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"
@@ -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"