From 0922c25b13ca8d5099945197daca6f219271b119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 16 Sep 2021 16:30:00 +0200
Subject: [PATCH] Improve mobilenav layout

---
 .../Resources/Private/Partials/Icons.html     |  1 +
 .../Resources/Private/Partials/Mobilenav.html | 72 ++++++++++++-------
 2 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html
index ea342806..7b75d3ce 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html
@@ -22,6 +22,7 @@
     <symbol id="icon-phone" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></symbol>
     <symbol id="icon-email" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></symbol>
     <symbol id="icon-tag"  fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></symbol>
+    <symbol id="icon-faq" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
     <symbol id="icon-bed" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></symbol>
     <symbol id="icon-bus" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/></symbol>
     <symbol id="icon-location-marker" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></symbol>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
index 51ee5ddf..4f051d55 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
@@ -37,7 +37,7 @@
             </div>
             <div class="h-full w-full overflow-y-scroll">
                 <div class="relative bg-ep-primary">
-                    <ul>
+                    <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')}"
@@ -55,33 +55,50 @@
                 <f:if condition="{data.uid} == {settings.defaultHomeUid}">
                     <f:render section="Subnav" arguments="{_all}"/>
                 </f:if>
-                <div class="px-4 py-4">
-                    <p class="text-2xl text-white uppercase font-bold mb-1">
+                <div class="px-4 py-4 mt-4">
+                    <p class="text-lg text-white uppercase font-bold mb-1">
                         Du hast Fragen?
                     </p>
-                    <p class="text-xl text-white uppercase mb-4">
+                    <p class="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>
-                    <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
+                    <div class="grid grid-cols-3 gap-4">
+                        <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
+                           class="button button--primary flex items-center space-x-2"
+                           title="Anrufen"
+                           rel="nofollow">
+                            <svg class="w-6 h-6 text-white">
+                                <use href="#icon-phone"></use>
+                            </svg>
+                            <span class="hidden sm:block">
+                                Anrufen
+                            </span>
                         </a>
-                    </f:if>
+                        <a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
+                           class="button button--primary  flex items-center space-x-2"
+                           title="WhatsApp"
+                           rel="nofollow"
+                           target="_blank">
+                            <svg class="w-6 h-6 text-white">
+                                <use href="#icon-whatsapp"></use>
+                            </svg>
+                            <span class="hidden sm:block">
+                                Whatsapp
+                            </span>
+                        </a>
+                        <f:if condition="{settings.faqPageUid}">
+                            <a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
+                               class="button button--primary  flex items-center space-x-2"
+                               title="FAQ">
+                                <svg class="w-6 h-6 text-white">
+                                    <use href="#icon-faq"></use>
+                                </svg>
+                                <span class="hidden sm:block">
+                                    FAQ
+                                </span>
+                            </a>
+                        </f:if>
+                    </div>
                 </div>
             </div>
         </div>
@@ -106,13 +123,16 @@
                             </svg>
                         </button>
                     </div>
-                    <div class="transform"
+                    <div class="transform pt-2"
                          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"
+                            class="flex items-center space-x-2 text-lg leading-loose text-white hover:text-white focus:text-white"
                             title="{subsubitem.title}">
-                            {subsubitem.title}
+                                <svg class="w-4 h-4 text-white">
+                                    <use href="#icon-chevron-right"></use>
+                                </svg>
+                                <span>{subsubitem.title}</span>
                             </a>
                         </f:for>
                     </div>