Finalize mobile navigation
This commit is contained in:
Björn Fromme
@@ -8,7 +8,7 @@ page {
|
|||||||
bodyTagCObject = COA
|
bodyTagCObject = COA
|
||||||
bodyTagCObject {
|
bodyTagCObject {
|
||||||
10 = TEXT
|
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 = TEXT
|
||||||
20 {
|
20 {
|
||||||
field = tx_eptheme_bodyclass
|
field = tx_eptheme_bodyclass
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
|
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Main">
|
<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">
|
<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)}"
|
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
|
||||||
class="block lg:pb-4"
|
class="block lg:pb-4"
|
||||||
|
|||||||
@@ -3,22 +3,42 @@
|
|||||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||||
xmlns:f="http://typo3.org/ns/fluid/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-controller="overlay-toggle"
|
||||||
data-overlay-toggle-id-value="mobilenav"
|
data-overlay-toggle-id-value="mobilenav"
|
||||||
data-overlay-toggle-target="overlay"
|
data-overlay-toggle-target="overlay"
|
||||||
data-action="overlay-toggle:toggle@window->overlay-toggle#toggle">
|
data-action="overlay-toggle:toggle@window->overlay-toggle#toggle">
|
||||||
<div class="relative 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">
|
||||||
<div class="fixed top-0 left-0 inset-x-0 px-8 py-2 flex justify-end bg-ep-primary">
|
<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">
|
<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>
|
<use href="#icon-close"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<ul class="m-0 px-0 pb-4 pt-12">
|
</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">
|
<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')}">
|
<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"
|
<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"')}
|
href="{topitem.link}"{f:if(condition: '{topitem.data.doktype} == 3', then: ' target="_blank"')}
|
||||||
title="{topitem.title}">
|
title="{topitem.title}">
|
||||||
@@ -28,7 +48,7 @@
|
|||||||
</f:for>
|
</f:for>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<ul class="m-0 px-8 py-4 divide-y divide-overlay-white">
|
<ul class="m-0 p-4 divide-y divide-ep-primary-50">
|
||||||
<f:for each="{mobilenav}" as="subitem">
|
<f:for each="{mobilenav}" as="subitem">
|
||||||
<li class="py-2 pr-4"
|
<li class="py-2 pr-4"
|
||||||
data-controller="collapse"
|
data-controller="collapse"
|
||||||
@@ -59,22 +79,36 @@
|
|||||||
</li>
|
</li>
|
||||||
</f:for>
|
</f:for>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="px-8 py-4">
|
<div class="px-4 py-4">
|
||||||
<div class="border-t-4 border-ep-primary mb-4"></div>
|
<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-2xl text-white uppercase font-bold mb-1">
|
||||||
<p class="text-xl text-white uppercase mb-4">Wir können helfen!</p>
|
Du hast Fragen?
|
||||||
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" class="btn btn--secondary block mb-1" rel="nofollow">
|
</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
|
Anrufen
|
||||||
</a>
|
</a>
|
||||||
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}" class="btn btn--secondary block mb-1" rel="nofollow" target="_blank">
|
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
|
||||||
|
class="button button--primary block mb-1"
|
||||||
|
title="WhatsApp"
|
||||||
|
rel="nofollow"
|
||||||
|
target="_blank">
|
||||||
Whatsapp
|
Whatsapp
|
||||||
</a>
|
</a>
|
||||||
<f:if condition="{settings.faqPageUid}">
|
<f:if condition="{settings.faqPageUid}">
|
||||||
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}" class="btn btn--secondary block">
|
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
|
||||||
|
class="button button--primary block"
|
||||||
|
title="FAQ">
|
||||||
FAQ
|
FAQ
|
||||||
</a>
|
</a>
|
||||||
</f:if>
|
</f:if>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user