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

WIP Rework mobile navigation

Browse Source
This commit is contained in:
Björn Fromme
2022-03-15 11:48:16 +01:00
parent 3e0d900860
commit bc9f590340
2 changed files with 77 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
+2 -1
View File
@@ -127,7 +127,8 @@ page {
60 { 60 {
special = directory special = directory
special.value = {$plugin.tx_eptheme.settings.mobileNavPid} special.value = {$plugin.tx_eptheme.settings.mobileNavPid}
levels = 3 levels = 4
expandAll = 1
titleField = title titleField = title
as = mobilenav as = mobilenav
} }
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+64 -60
View File
@@ -39,25 +39,7 @@
</div> </div>
</div> </div>
<div class="h-full w-full overflow-y-scroll"> <div class="h-full w-full overflow-y-scroll">
<f:if condition="{data.uid} == {settings.defaultHomeUid}"> <f:render section="Topnav" arguments="{_all}"/>
<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>
<div class="px-4 py-4 mt-4"> <div class="px-4 py-4 mt-4">
<p class="text-lg text-white uppercase font-bold mb-1"> <p class="text-lg text-white uppercase font-bold mb-1">
Du hast Fragen? Du hast Fragen?
@@ -107,61 +89,83 @@
</div> </div>
</f:section> </f:section>
<f:section name="Subnav"> <f:section name="Topnav">
<ul class="m-0 divide-y divide-overlay-white-50 bg-ep-primary"> <ul class="divide-y divide-ep-primary-dark">
<f:for each="{mobilenav}" as="subitem"> <f:for each="{mobilenav}" as="navitem">
<li class="px-4 py-2" <f:if condition="{navitem.children}">
<f:if condition="{subitem.children}"> <f:then>
data-controller="collapse" <li data-controller="collapse"
data-collapse-collapsed-value="true" data-collapse-collapsed-value="true">
</f:if> <div class="flex items-center justify-between px-4 py-2 bg-ep-primary text-white">
> <a href="{navitem.link}"
<div class="flex items-center justify-between"> class="uppercase text-xl flex-1"
<a href="{subitem.link}" title="{navitem.title}">
class="uppercase text-xl text-white hover:text-white focus:text-white" {navitem.title}
title="{subitem.title}">
{subitem.title}
</a> </a>
<f:if condition="{subitem.children}">
<button type="button" <button type="button"
class="focus:outline-none" class="focus:outline-none bg-ep-primary-dark p-1"
data-action="collapse#toggle"> data-action="collapse#toggle">
<svg class="h-6 w-6 transform text-white" data-collapse-target="icon"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-right"></use>
</svg> </svg>
</button> </button>
</f:if>
</div> </div>
<f:if condition="{subitem.children}"> <div data-collapse-target="container" class="bg-ep-primary-dark pr-4">
<div class="transform pt-2" <f:render section="Subnav" arguments="{children: navitem.children, level: 2}"/>
<f:if condition="{subitem.children}"> </div>
data-collapse-target="container" </li>
</f:if> </f:then>
> <f:else>
<f:for each="{subitem.children}" as="subsubitem"> <li>
<a href="{subsubitem.link}"{f:if(condition: '{subsubitem.data.doktype} == 3', then: ' _target="blank"')} <a href="{navitem.link}"
class="flex items-center space-x-2 text-lg leading-loose text-white hover:text-white focus:text-white" class="block px-4 py-2 bg-ep-primary text-white uppercase text-xl"
title="{subsubitem.title}"> title="{navitem.title}">
<svg class="w-4 h-4 text-white"> {navitem.title}
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-right"></use>
</svg>
<span>{subsubitem.title}</span>
</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> </a>
</li> </li>
</f:else>
</f:if>
</f:for> </f:for>
</ul> </ul>
</f:if> </f:section>
</f:for>
<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>
<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> </div>
</f:if>
</li> </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> </f:for>
</ul> </ul>
</f:section> </f:section>