Finalize mobile navigation
This commit is contained in:
Björn Fromme
@@ -8,7 +8,7 @@ page {
|
||||
bodyTagCObject = COA
|
||||
bodyTagCObject {
|
||||
10 = TEXT
|
||||
10.value = <body class="antialiased text-gray-800 font-sans lg:pt-8
|
||||
10.value = <body class="antialiased text-gray-800 font-sans pt-14 lg:pt-8
|
||||
20 = TEXT
|
||||
20 {
|
||||
field = tx_eptheme_bodyclass
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
|
||||
|
||||
<f:section name="Main">
|
||||
<div class="relative z-40 lg:container bg-white">
|
||||
<div class="fixed top-0 left-0 inset-x-0 z-40 lg:relative lg:container bg-white shadow-md lg:shadow-none">
|
||||
<div class="flex items-center lg:items-end justify-between px-4 py-2 lg:px-0 lg:pt-4 lg:pb-0">
|
||||
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
|
||||
class="block lg:pb-4"
|
||||
|
||||
@@ -3,77 +3,111 @@
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen z-100 overflow-y-scroll bg-cover bg-gray-700 transform hidden"
|
||||
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 transform hidden"
|
||||
data-controller="overlay-toggle"
|
||||
data-overlay-toggle-id-value="mobilenav"
|
||||
data-overlay-toggle-target="overlay"
|
||||
data-action="overlay-toggle:toggle@window->overlay-toggle#toggle">
|
||||
<div class="relative bg-ep-primary">
|
||||
<div class="fixed top-0 left-0 inset-x-0 px-8 py-2 flex justify-end bg-ep-primary">
|
||||
<div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 flex justify-between bg-white shadow-md">
|
||||
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
|
||||
class="block lg:pb-4"
|
||||
title="{settings.defaultTitle}">
|
||||
<img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
|
||||
</a>
|
||||
<div class="flex lg:hidden items-center space-x-4">
|
||||
<f:if condition="{data.tx_eptheme_hide_searchbar}">
|
||||
<f:else>
|
||||
<button class="focus:outline-none text-gray-800"
|
||||
data-controller="overlay-toggle"
|
||||
data-overlay-toggle-id-value="search"
|
||||
data-action="overlay-toggle#invokeToggle">
|
||||
<svg class="w-8 h-8 text-gray-800">
|
||||
<use href="#icon-search"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<button class="focus:outline-none" data-action="overlay-toggle#invokeToggle">
|
||||
<svg class="w-10 h-10 text-white">
|
||||
<svg class="w-8 h-8">
|
||||
<use href="#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="m-0 px-0 pb-4 pt-12">
|
||||
<f:for each="{topnav}" as="topitem">
|
||||
<li class="py-2 px-8 hover:bg-ep-primary-light{f:if(condition: topitem.active, then: ' bg-ep-primary-light')}">
|
||||
<a class="block text-xl text-white hover:text-white hover:text-white focus:text-white uppercase font-bold"
|
||||
href="{topitem.link}"{f:if(condition: '{topitem.data.doktype} == 3', then: ' target="_blank"')}
|
||||
title="{topitem.title}">
|
||||
</div>
|
||||
<div class="h-full w-full overflow-y-scroll">
|
||||
<div class="relative bg-ep-primary">
|
||||
<ul class="m-0 px-0 py-4">
|
||||
<f:for each="{topnav}" as="topitem">
|
||||
<li class="py-2 px-4 hover:bg-ep-primary-light{f:if(condition: topitem.active, then: ' bg-ep-primary-light')}">
|
||||
<a class="block text-xl text-white hover:text-white hover:text-white focus:text-white uppercase font-bold"
|
||||
href="{topitem.link}"{f:if(condition: '{topitem.data.doktype} == 3', then: ' target="_blank"')}
|
||||
title="{topitem.title}">
|
||||
{topitem.title}
|
||||
</a>
|
||||
</a>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="m-0 p-4 divide-y divide-ep-primary-50">
|
||||
<f:for each="{mobilenav}" as="subitem">
|
||||
<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"
|
||||
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"
|
||||
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"
|
||||
title="{subsubitem.title}">
|
||||
{subsubitem.title}
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
title="{subsubitem.title}">
|
||||
{subsubitem.title}
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
<div class="px-8 py-4">
|
||||
<div class="border-t-4 border-ep-primary mb-4"></div>
|
||||
<p class="text-2xl text-white uppercase font-bold mb-1">Du hast Fragen?</p>
|
||||
<p class="text-xl text-white uppercase mb-4">Wir können helfen!</p>
|
||||
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" class="btn btn--secondary block mb-1" rel="nofollow">
|
||||
Anrufen
|
||||
</a>
|
||||
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}" class="btn btn--secondary block mb-1" rel="nofollow" target="_blank">
|
||||
Whatsapp
|
||||
</a>
|
||||
<f:if condition="{settings.faqPageUid}">
|
||||
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}" class="btn btn--secondary block">
|
||||
FAQ
|
||||
<div class="px-4 py-4">
|
||||
<div class="border-t-4 border-ep-primary mb-4"></div>
|
||||
<p class="text-2xl text-white uppercase font-bold mb-1">
|
||||
Du hast Fragen?
|
||||
</p>
|
||||
<p class="text-xl text-white uppercase mb-4">
|
||||
Wir können helfen!
|
||||
</p>
|
||||
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
|
||||
class="button button--primary block mb-1"
|
||||
title="Anrufen"
|
||||
rel="nofollow">
|
||||
Anrufen
|
||||
</a>
|
||||
</f:if>
|
||||
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
|
||||
class="button button--primary block mb-1"
|
||||
title="WhatsApp"
|
||||
rel="nofollow"
|
||||
target="_blank">
|
||||
Whatsapp
|
||||
</a>
|
||||
<f:if condition="{settings.faqPageUid}">
|
||||
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
|
||||
class="button button--primary block"
|
||||
title="FAQ">
|
||||
FAQ
|
||||
</a>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user