From 0df7fa730bcd1bb81c95e99681f6ed66a8aa7246 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Sat, 13 Aug 2022 10:33:19 +0200
Subject: [PATCH] WIP Always use mobile navigation on touch devices

---
 .../Resources/Private/Partials/Mainnav.html   |  6 +++---
 .../Resources/Private/Partials/Mobilenav.html |  4 ++--
 .../Private/Partials/Search/MobileSearch.html |  2 +-
 tailwind.config.js                            | 21 +++++++++++++++----
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
index 8ddee52e..ddc061e1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
@@ -5,7 +5,7 @@
 
     <f:section name="Main">
         <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 hover-hover: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"
                    title="{settings.defaultTitle}">
@@ -13,10 +13,10 @@
                              class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\', ser: \'h-10 lg:h-12\'}', key: settings.themekey)}"
                              alt="{settings.defaultTitle}"/>
                 </a>
-                <div class="hidden lg:block">
+                <div class="hidden hover-hover:lg:block">
                     <f:render section="FirstLevel" arguments="{_all}"/>
                 </div>
-                <div class="flex lg:hidden items-center space-x-4">
+                <div class="flex hover-hover:lg:hidden items-center space-x-4">
                     <f:if condition="{settings.hideSearchbar}">
                         <f:else>
                             <button type="button"
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 dd8233e8..5b24cb41 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
@@ -5,7 +5,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <f:section name="Main">
-        <div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-zinc-700 hidden"
+        <div class="fixed hover-hover:lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 hover-none:lg:pt-20 pb-10 z-50 bg-zinc-700 hidden"
              data-controller="overlay-toggle"
              data-overlay-toggle-id-value="mobilenav"
              data-overlay-toggle-target="overlay"
@@ -16,7 +16,7 @@
                    title="{settings.defaultTitle}">
                     <f:image class="block h-10 lg:h-12 w-auto" src="{settings.logoImage}" alt="{settings.defaultTitle}"/>
                 </a>
-                <div class="flex lg:hidden items-center space-x-4">
+                <div class="flex hover-hover:lg:hidden items-center space-x-4">
                     <f:if condition="{data.tx_eptheme_hide_searchbar}">
                         <f:else>
                             <button type="button"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html
index e37f9483..ebf9f1db 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html
@@ -2,7 +2,7 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       data-namespace-typo3-fluid="true">
 
-    <div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-zinc-700 hidden"
+    <div class="fixed hover-hover:lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-zinc-700 hidden"
          data-controller="mobile-search"
          data-mobile-search-uri-value="{ep:uri.ajax(controller: 'AjaxFilterPanel', action: 'index', pageUid: settings.defaultAjaxUid, format: 'html')}"
          data-mobile-search-init-uri-value="{ep:uri.ajax(controller: 'AjaxFilterPanel', action: 'index', pageUid: settings.defaultAjaxUid, arguments: '{filterSettings: filterSettings}', format: 'html')}"
diff --git a/tailwind.config.js b/tailwind.config.js
index a4709004..38470776 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,4 @@
+const postcss = require('postcss')
 const plugin = require('tailwindcss/plugin')
 const tinycolor = require('tinycolor2')
 
@@ -168,20 +169,32 @@ module.exports = {
             variants: ['sbw', 'snz', 'uch', 'ser'],
         }),
         plugin(function ({addVariant, e}) {
+            addVariant('hover-hover', ({ container, separator }) => {
+                const hoverHover = postcss.atRule({ name: 'media', params: '(hover: hover)' })
+                hoverHover.append(container.nodes)
+                container.append(hoverHover)
+                hoverHover.walkRules(rule => {
+                    rule.selector = `.${e(`hover-hover${separator}${rule.selector.slice(1)}`)}`
+                })
+            })
+            addVariant('hover-none', ({ container, separator }) => {
+                const hoverNone = postcss.atRule({ name: 'media', params: '(hover: none)' })
+                hoverNone.append(container.nodes)
+                container.append(hoverNone)
+                hoverNone.walkRules(rule => {
+                    rule.selector = `.${e(`hover-none${separator}${rule.selector.slice(1)}`)}`
+                })
+            })
             addVariant('first-type', ({modifySelectors, separator}) => {
                 modifySelectors(({className}) => {
                     return `.${e(`first-type${separator}${className}`)}:first-of-type`
                 })
             })
-        }),
-        plugin(function ({addVariant, e}) {
             addVariant('last-type', ({modifySelectors, separator}) => {
                 modifySelectors(({className}) => {
                     return `.${e(`last-type${separator}${className}`)}:last-of-type`
                 })
             })
-        }),
-        plugin(function ({addVariant, e}) {
             addVariant('reduced', ({modifySelectors, separator}) => {
                 modifySelectors(({className}) => {
                     return `.reduced .${e(`reduced${separator}${className}`)}`