Finalize searchbar position on different page layouts

public/typo3conf/ext/ep_products/Classes/Controller/SearchbarController.php

@@ -83,7 +83,7 @@ class SearchbarController extends ActionController
         $this->view->assignMultiple([
             'filterOptions' => $filterOptions,
             'searchParams' => $searchParams,
-            'fixed' => (bool)$this->settings['fixed'],
+            'collapsed' => (bool)$this->settings['collapsed'],
         ]);
     }
 }

public/typo3conf/ext/ep_theme/Configuration/TypoScript/Library/SearchBar.typoscript

@@ -17,5 +17,5 @@ lib.searchBar {
     view =< plugin.tx_epproducts.view
 }
 
-lib.searchBarFixed < lib.searchBar
+lib.searchBarCollapsed < lib.searchBar
-lib.searchBarFixed.settings.fixed = 1
+lib.searchBarCollapsed.settings.collapsed = 1

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/searchbar_toggle_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from 'stimulus'
+import { useDispatch } from 'stimulus-use'
+
+export default class extends Controller {
+
+    initialize() {
+        useDispatch(this)
+    }
+
+    toggle(e) {
+        e.preventDefault()
+        this.dispatch('toggle')
+    }
+}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js

@@ -5,10 +5,9 @@ export default class extends Controller {
 
     static debounces = [ 'toggle' ]
 
-    static classes = [ 'sticky' ]
-
     static values = {
         sticky: Boolean,
+        classes: String,
         offset: Number,
         disabled: Boolean,
     }
@@ -37,7 +36,11 @@ export default class extends Controller {
     }
 
     stickyValueChanged() {
-        let stickyClass = this.hasStickyClass ? this.stickyClass : 'sticky'
+        if (!this.hasClassesValue) {
-        this.element.classList.toggle(stickyClass, this.stickyValue)
+            return
+        }
+        this.classesValue.split(' ').forEach(className => {
+            this.element.classList.toggle(className, this.stickyValue)
+        })
     }
 }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss

@@ -2,6 +2,10 @@
     @apply hidden relative lg:block lg:container -mt-20 mb-8;
 
     &.sticky {
-        @apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 max-w-full px-0 shadow-lg;
+        @apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 shadow-lg;
+    }
+
+    &.reduced {
+        @apply max-w-full px-0 mt-8 mb-0;
     }
 }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_slider.scss

@@ -1,7 +1,7 @@
 @import "~@splidejs/splide/dist/css/splide-core.min.css";
 
 .slider-pagination {
-    @apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-4;
+    @apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-8;
     @apply list-none p-0;
     @apply flex items-center space-x-2;
 }

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Detail.html

@@ -4,13 +4,11 @@
 
     <f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
     <f:render partial="FacebookPixelCode"/>
-    <div class="lg:mt-24">
+    <div class="lg:mt-8">
-        <f:if condition="{data.tx_eptheme_hide_searchbar}">
+        <f:cObject typoscriptObjectPath="lib.searchBarCollapsed"/>
-            <f:else>
+        <f:alias map="{searchbarCollapsed: 1}">
-                <f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
+            <f:render partial="Mainnav" section="Main" arguments="{_all}"/>
-            </f:else>
+        </f:alias>
-        </f:if>
-        <f:render partial="Mainnav" section="Main" arguments="{_all}"/>
         <f:render section="Content"/>
         <f:render section="Teasers"/>
         <f:render partial="Footer" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html

@@ -4,14 +4,14 @@
 
     <f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
     <f:render partial="FacebookPixelCode"/>
-    <div class="lg:mt-32">
+    <div class="lg:mt-8">
-        <f:if condition="{data.tx_eptheme_hide_searchbar}">
-            <f:else>
-                <f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
-            </f:else>
-        </f:if>
         <f:render partial="Mainnav" section="Main" arguments="{_all}"/>
         <f:render partial="HeaderSliderSmall" arguments="{_all}"/>
+        <f:if condition="{data.tx_eptheme_hide_searchbar}">
+            <f:else>
+                <f:cObject typoscriptObjectPath="lib.searchBar"/>
+            </f:else>
+        </f:if>
         <f:render section="Content"/>
         <f:render section="Teasers"/>
         <f:render partial="Footer" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html

@@ -5,13 +5,13 @@
     <f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
     <f:render partial="FacebookPixelCode"/>
     <div class="lg:mt-8">
-        <f:if condition="{data.tx_eptheme_hide_searchbar}">
-            <f:else>
-                <f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
-            </f:else>
-        </f:if>
         <f:render partial="Mainnav" section="Main" arguments="{_all}"/>
         <f:render partial="HeaderSliderSmall" arguments="{_all}"/>
+        <f:if condition="{data.tx_eptheme_hide_searchbar}">
+            <f:else>
+                <f:cObject typoscriptObjectPath="lib.searchBar"/>
+            </f:else>
+        </f:if>
         <f:render section="Header" optional="true"/>
         <div class="container grid grid-cols-3 gap-8">
             <div class="col-span-3 lg:col-span-1">

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html

@@ -4,14 +4,14 @@
 
     <f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
     <f:render partial="FacebookPixelCode"/>
-    <div class="lg:mt-32">
+    <div class="lg:mt-8">
-        <f:if condition="{data.tx_eptheme_hide_searchbar}">
-            <f:else>
-                <f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
-            </f:else>
-        </f:if>
         <f:render partial="Mainnav" section="Main" arguments="{_all}"/>
         <f:render partial="HeaderSliderSmall" arguments="{_all}"/>
+        <f:if condition="{data.tx_eptheme_hide_searchbar}">
+            <f:else>
+                <f:cObject typoscriptObjectPath="lib.searchBar"/>
+            </f:else>
+        </f:if>
         <f:render section="Header" optional="true"/>
         <div class="container grid grid-cols-3 gap-8">
             <div class="col-span-3 lg:col-span-2">

public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html

@@ -3,7 +3,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <f:if condition="{slide}">
-        <div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8 lg:-mt-8">
+        <div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8">
             <f:alias map="{image: slide.image.0}">
                 <f:if condition="{image}">
                     <picture>
@@ -41,7 +41,7 @@
             <f:if condition="{settings.showSkipassBadge}">
                 <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
                     <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive"
-                             class="absolute top-0 lg:top-8 right-8 lg:right-28 w-20 lg:w-auto" />
+                             class="absolute top-0 right-8 lg:right-28 w-20 lg:w-auto" />
                 </f:link.typolink>
             </f:if>
             <f:if condition="{badge}">

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html

@@ -49,7 +49,7 @@
                         <f:if condition="{topitem.children}">
                             <f:then>
                                 <a href="{f:uri.typolink(parameter: topitem.data.uid)}"
-                                   class="block text-gray-800 uppercase lg:text-lg flex items-center"
+                                   class="block text-gray-800 uppercase lg:text-lg font-bold flex items-center"
                                    title="{topitem.title}">
                                     <span>{topitem.title}</span>
                                     <svg class="ml-1 w-4 h-4 transform group-hover:rotate-180">
@@ -68,6 +68,25 @@
                         </f:if>
                     </li>
                 </f:for>
+                <li class="pb-4">
+                    <f:if condition="{searchbarCollapsed}">
+                        <f:then>
+                            <button data-controller="searchbar-toggle"
+                                    data-action="searchbar-toggle#toggle">
+                                <svg class="w-6 h-6">
+                                    <use href="#icon-search"></use>
+                                </svg>
+                            </button>
+                        </f:then>
+                        <f:else>
+                            <f:link.typolink parameter="{settings.defaultSearchPageUid}">
+                                <svg class="w-6 h-6">
+                                    <use href="#icon-search"></use>
+                                </svg>
+                            </f:link.typolink>
+                        </f:else>
+                    </f:if>
+                </li>
             </ul>
         </nav>
     </f:section>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html

@@ -6,7 +6,7 @@
 
     <f:if condition="{settings.hideAreaNavigation}">
         <f:else>
-            <div class="hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-cover bg-center" style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/polygon.jpg')})">
+            <div class="hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-cover bg-center shadow" style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/polygon.jpg')})">
                 <div class="container">
                     <nav role="navigation" class="flex justify-between m-0 p-0 w-full divide-x divide-gray-300 border-r border-l">
                         <f:link.typolink parameter="9" class="flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary" title="E&amp;P">

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html

@@ -3,9 +3,11 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <div data-controller="searchbar"
+        <div data-controller="searchbar collapse"
-             data-action="datepicker:range-select->searchbar#setDateRange"
+             <f:if condition="{collapsed}">
-             data-searchbar-uri-value="{ep:uri.ajax(controller: 'Searchbar', action: 'index', pageUid: settings.defaultAjaxUid, format: 'html')}">
+                data-collapse-collapsed-value="true"
+             </f:if>
+             data-action="datepicker:range-select->searchbar#setDateRange searchbar-toggle:toggle@window->collapse#toggle">
             <f:form action="processSearch" controller="Search" method="post" name="searchParams"
                     object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
                     pageUid="{settings.defaultSearchPageUid}" data="{'searchbar-target': 'form'}">
@@ -15,18 +17,20 @@
                 <f:form.hidden property="destinationUid" data="{'searchbar-target': 'destinationUid'}"/>
                 <f:form.hidden property="destinationType" data="{'searchbar-target': 'destinationType'}"/>
                 <f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
-                <div class="searchbar{f:if(condition: fixed, then: ' sticky')}"
+                <div class="searchbar{f:if(condition: collapsed, then: ' reduced hidden')}"
-                <f:if condition="{fixed}">
+                     data-collapse-target="container"
+                <f:if condition="{collapsed}">
                     <f:else>
                         data-controller="sticky"
                         data-sticky-offset-value="650"
-                        data-sticky-disabled-value="{fixed -> f:format.json()}"
+                        data-sticky-disabled-value="false"
+                        data-sticky-classes-value="sticky reduced"
                     </f:else>
                 </f:if>
                      data-searchbar-target="container">
                     <div class="bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark">
-                        <div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
+                        <div class="reduced:max-w-screen-xl reduced:mx-auto reduced:px-4 flex flex-col reduced:flex-row reduced:items-center">
-                            <div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
+                            <div class="flex items-start justify-between reduced:flex-1 pt-8 px-8 reduced:px-0 reduced:py-4">
 
                                 <div class="flex-1"
                                      data-controller="collapse datepicker"
@@ -232,13 +236,13 @@
                                 </div>
 
                             </div>
-                            <button type="submit" class="hidden sticky:block sticky:ml-4">
+                            <button type="submit" class="hidden reduced:block reduced:ml-4">
                                 <svg class="w-8 h-8 text-white">
                                     <use href="#icon-chevron-right"></use>
                                 </svg>
                             </button>
                         </div>
-                        <div class="flex justify-end mt-4 sticky:hidden">
+                        <div class="flex justify-end mt-4 reduced:hidden">
                             <button type="submit" class="w-1/3 text-white uppercase py-2">
                                 Detailsuche
                             </button>

tailwind.config.js

@@ -118,16 +118,16 @@ module.exports = {
             borderWidth: [ 'even', 'odd', 'first', 'last' ],
             textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ],
             borderColor: [ 'sbw','snz', 'uch' ],
-            display: ['group-hover', 'sticky'],
+            display: ['group-hover', 'reduced'],
             visibility: [ 'group-hover' ],
             opacity: [ 'group-hover' ],
             rotate: [ 'group-hover' ],
-            flex: [ 'sticky' ],
+            flex: [ 'reduced' ],
-            flexDirection: [ 'even', 'odd', 'sticky' ],
+            flexDirection: [ 'even', 'odd', 'reduced' ],
-            alignItems: [ 'sticky' ],
+            alignItems: [ 'reduced' ],
-            padding: [ 'even', 'odd', 'first', 'last', 'sticky' ],
+            padding: [ 'even', 'odd', 'first', 'last', 'reduced' ],
-            margin: [ 'even', 'odd', 'first', 'last', 'sticky' ],
+            margin: [ 'even', 'odd', 'first', 'last', 'reduced' ],
-            maxWidth: [ 'sticky' ],
+            maxWidth: [ 'reduced' ],
         },
     },
     plugins: [
@@ -151,9 +151,9 @@ module.exports = {
             })
         }),
         plugin(function ({addVariant, e}) {
-            addVariant('sticky', ({modifySelectors, separator}) => {
+            addVariant('reduced', ({modifySelectors, separator}) => {
                 modifySelectors(({className}) => {
-                    return `.sticky .${e(`sticky${separator}${className}`)}`
+                    return `.reduced .${e(`reduced${separator}${className}`)}`
                 })
             })
         }),