EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate mobile navigation

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+1 -1
View File
@@ -15,7 +15,7 @@
<div class="hidden lg:block"> <div class="hidden lg:block">
<f:render section="FirstLevel" arguments="{_all}"/> <f:render section="FirstLevel" arguments="{_all}"/>
</div> </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:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else> <f:else>
<button class="focus:outline-none text-gray-800" <button class="focus:outline-none text-gray-800"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+8 -4
View File
@@ -30,20 +30,24 @@
</div> </div>
<ul class="m-0 px-8 py-4 divide-y divide-overlay-white"> <ul class="m-0 px-8 py-4 divide-y divide-overlay-white">
<f:for each="{mobilenav}" as="subitem"> <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"> <div class="flex items-center justify-between">
<a href="{subitemlink}" <a href="{subitemlink}"
class="uppercase text-xl text-white hover:text-white focus:text-white" class="uppercase text-xl text-white hover:text-white focus:text-white"
title="{subitem.title}"> title="{subitem.title}">
{subitem.title} {subitem.title}
</a> </a>
<button class="focus:outline-none" x-on:click.prevent="visible = !visible"> <button class="focus:outline-none"
<svg class="h-6 w-6 transform text-white" x-bind:class="visible && 'rotate-180'"> data-action="collapse#toggle">
<svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
<use href="#icon-chevron-down"></use> <use href="#icon-chevron-down"></use>
</svg> </svg>
</button> </button>
</div> </div>
<div class="transform" x-show="visible" x-transition.750ms> <div class="transform"
data-collapse-target="container">
<f:for each="{subitem.children}" as="subsubitem"> <f:for each="{subitem.children}" as="subsubitem">
<a href="{subsubitem.link}"{f:if(condition: '{subsubitem.data.doktype} == 3', then: ' _target="blank"')} <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" class="block text-lg leading-loose text-white hover:text-white focus:text-white"