WIP Rework mobile navigation
This commit is contained in:
Björn Fromme
@@ -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
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user