hr-design-system-handlebars 0.44.4 → 0.46.0

package/.storybook/preview.js

@@ -8,7 +8,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
 import Initializer from '../build/webpack/feature-loader/initializer/initializer'
 import loadFeature from '../build/webpack/feature-loader/initializer/loader'
-
+import 'components/site_header/header_alpine'
 
 function loadDelayedImages(){setTimeout((function(){var t,e=document.images,s=[],a=function(t){void 0!==window.picturefill&&window.picturefill({reevaluate:!0,elements:t})};for(var i=0;i<e.length;++i)(t=e[i].dataset?e[i].dataset.srcset:e[i].getAttribute("data-srcset"))&&(0===e[i].getBoundingClientRect().top?s.push(e[i]):e[i].setAttribute("srcset",t));a(e),setTimeout((function(){var t;for(var i=0;i<s.length;++i)t=s[i].dataset?s[i].dataset.srcset:s[i].getAttribute("data-srcset"),s[i].setAttribute("srcset",t);a(s)}),900)}),0)}
     

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.46.0 (Fri May 13 2022)
+
+#### 🚀 Enhancement
+
+- renamed folders header and search to site_header and navigation_search [#233](https://github.com/mumprod/hr-design-system-handlebars/pull/233) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.45.1 (Fri May 13 2022)
+
+#### 🐛 Bug Fix
+
+- some refactoring [#232](https://github.com/mumprod/hr-design-system-handlebars/pull/232) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v0.45.0 (Thu May 12 2022)
+
+#### 🚀 Enhancement
+
+- Externalise script from header.hbs & renaming of header components [#231](https://github.com/mumprod/hr-design-system-handlebars/pull/231) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.44.4 (Mon May 09 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1472,9 +1472,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     white-space: nowrap;
     border-width: 0;
 }
-.visible {
-    visibility: visible;
-}
 .fixed {
     position: fixed;
 }
@@ -1557,6 +1554,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .\!mt-4 {
     margin-top: 1rem !important;
 }
+.ml-2 {
+    margin-left: 0.5rem;
+}
 .-mt-2 {
     margin-top: -0.5rem;
 }
@@ -1569,9 +1569,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .-mt-10 {
     margin-top: -2.5rem;
 }
-.ml-2 {
-    margin-left: 0.5rem;
-}
 .mr-4 {
     margin-right: 1rem;
 }
@@ -1593,12 +1590,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .mt-2\.5 {
     margin-top: 0.625rem;
 }
-.mr-2\.5 {
-    margin-right: 0.625rem;
-}
-.mr-2 {
-    margin-right: 0.5rem;
-}
 .mr-0\.5 {
     margin-right: 0.125rem;
 }
@@ -1806,9 +1797,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .cursor-pointer {
     cursor: pointer;
 }
-.resize {
-    resize: both;
-}
 .list-none {
     list-style-type: none;
 }
@@ -2008,21 +1996,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-bg-opacity: 1;
     background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
 }
-.bg-current {
-    background-color: currentColor;
-}
-.bg-white {
-    --tw-bg-opacity: 1;
-    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-}
-.bg-blue-congress {
-    --tw-bg-opacity: 1;
-    background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
-}
-.bg-gray-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
-}
 .bg-gray-100 {
     --tw-bg-opacity: 1;
     background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
@@ -2035,6 +2008,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-bg-opacity: 1;
     background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
 }
+.bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
 .bg-blue-200 {
     --tw-bg-opacity: 1;
     background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
@@ -2083,6 +2060,17 @@ Ensure the default browser behavior of the `hidden` attribute.
     background-color: #d34600;
     background-color: var(--color-label-live);
 }
+.bg-current {
+    background-color: currentColor;
+}
+.bg-blue-congress {
+    --tw-bg-opacity: 1;
+    background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
+}
+.bg-gray-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+}
 .bg-gradient-to-r {
     background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
     background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -2112,18 +2100,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .p-2 {
     padding: 0.5rem;
 }
-.px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-}
-.py-3\.5 {
-    padding-top: 0.875rem;
-    padding-bottom: 0.875rem;
-}
-.py-3 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-}
 .py-6 {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
@@ -2144,6 +2120,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 0.25rem;
     padding-right: 0.25rem;
 }
+.px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+}
+.py-3\.5 {
+    padding-top: 0.875rem;
+    padding-bottom: 0.875rem;
+}
+.py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+}
 .px-3\.5 {
     padding-left: 0.875rem;
     padding-right: 0.875rem;
@@ -2176,15 +2164,15 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 1rem;
     padding-right: 1rem;
 }
+.pt-px {
+    padding-top: 1px;
+}
 .pl-4 {
     padding-left: 1rem;
 }
 .pr-2 {
     padding-right: 0.5rem;
 }
-.pt-px {
-    padding-top: 1px;
-}
 .pt-1 {
     padding-top: 0.25rem;
 }
@@ -2317,10 +2305,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-text-opacity: 1 !important;
     color: rgba(20, 83, 45, var(--tw-text-opacity)) !important;
 }
-.text-blue-congress {
-    --tw-text-opacity: 1;
-    color: rgba(0, 82, 147, var(--tw-text-opacity));
-}
 .text-white {
     --tw-text-opacity: 1;
     color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -2329,6 +2313,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-text-opacity: 1;
     color: rgba(96, 96, 96, var(--tw-text-opacity));
 }
+.text-blue-congress {
+    --tw-text-opacity: 1;
+    color: rgba(0, 82, 147, var(--tw-text-opacity));
+}
 .text-toplineColor {
     color: #006dc1;
     color: var(--color-topline);
@@ -2548,6 +2536,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .first-of-type\:border-none:first-of-type {
     border-style: none;
 }
+.last-of-type\:hidden:last-of-type {
+    display: none;
+}
 .hover\:bg-blue-congress:hover {
     --tw-bg-opacity: 1;
     background-color: rgba(0, 82, 147, var(--tw-bg-opacity));

package/dist/views/components/base/load_dynamic.hbs

@@ -1,6 +1,6 @@
 {{#switch templatePath}}
-    {{#case "components/Header/ServiceNavigation/ServiceNavigationItem"}}
-        {{> components/Header/ServiceNavigation/ServiceNavigationItem}}
+    {{#case "components/site_header/service_navigation/service_navigation_item"}}
+        {{> components/site_header/service_navigation/service_navigation_item}}
     {{/case}}
     {{#case "components/teaser/group_teaser/group_teaser"}}
         {{> components/teaser/group_teaser/group_teaser}}

package/dist/views/components/page/page.hbs

@@ -20,7 +20,7 @@
     <body itemscope itemtype="http://schema.org/WebPage">
         <div class="js-pageSwap">
                       
-            {{> components/Header/Header }}          
+            {{> components/site_header/header }}          
             
             <main 
                 onclick="void(0)" 

package/{src/stories/views/components/Header/BrandNavigation/BrandNavigation.hbs → dist/views/components/site_header/brand_navigation/brand_navigation.hbs}

@@ -21,7 +21,7 @@
             {{#with this.brandNavigationItems}}
                 <ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">
                     {{#each this}}
-                        {{> components/Header/BrandNavigation/BrandNavigationItem }}
+                        {{> components/site_header/brand_navigation/brand_navigation_item }}
                     {{/each}} 
                 </ul>
             {{/with}}

package/dist/views/components/{Header/Burger.hbs → site_header/burger.hbs}

@@ -1,4 +1,4 @@
-<div x-data="burger()" class="sb-burger flex items-center justify-center h-full fill-current">
+<div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">
     <nav>
         <button {{!-- :class="$store.burgeropen ? 'text-blue-congress' : 'text-white'" --}}  
             class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
@@ -18,6 +18,7 @@
         </button>
     </nav>
 </div>
+
 <script>
     var burger = () => {
         return {

package/dist/views/components/site_header/header.hbs

@@ -0,0 +1,85 @@
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">
+
+    <header class="relative z-101 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   
+        <div x-data 
+            id="headerWrapper"
+            @resize.window="resetNav()" 
+            :class="shouldBrandNavBeHidden() ? '-mt-10 lg:-mt-8' : ''  "
+            class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
+            
+            <div id="anchorNavWrapper" 
+                class="hidden">
+                {{> components/site_header/anchor_navigation/anchor_navigation }}
+            </div>
+
+            <div id="brandNavWrapper" 
+                class="relative flex items-center justify-center order-1 w-full bg-white z-101 print:hidden">
+                {{> components/site_header/brand_navigation/brand_navigation }} 
+            </div>
+
+            <div id="serviceNavWrapper" 
+                :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
+                
+                class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-blue-congress z-102">   
+                <div id="serviceNavMainContainer" 
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-101">
+
+                    <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
+
+                    <div id="serviceLogoWrapper" 
+                        class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-blue-congress md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
+                        {{> components/site_header/service_logo }}
+                    </div>
+                    
+                    <div id="serviceItemsWrapper"                
+                        class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0 print:hidden ">
+                        {{> components/site_header/service_navigation/service_list }}
+
+                        {{> components/site_header/navigation_search/quick_search_button }}
+
+                        <div class="hidden lg:flex">
+                            {{> components/site_header/navigation_search/quick_search_form }}
+                        </div>
+                    
+                        <div id="burgerWrapper" 
+                            class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden "> 
+                            {{> components/site_header/burger }}    
+                        </div>
+                        
+                    </div>
+                </div>
+            </div>
+
+            <div id="sectionNavWrapper"      
+                x-ref="sectionnavigation"
+                @toggle-sectionnav.window="toggleSectionNav"
+                :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"  
+                class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-22 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-100 print:hidden"
+            >
+                {{> components/site_header/section_navigation/section_navigation }}
+            </div>
+            
+            <div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
+                x-effect="$el.setAttribute('id', 'flyout-' + $store.searchID.current + '-2');$el.setAttribute('aria-expanded', $store.searchFieldOpen);$el.setAttribute('aria-hidden', !$store.searchFieldOpen);$el.setAttribute('aria-labelledby', 'flyout-' + $store.searchID.current + '-1')" 
+                x-show="$store.searchFieldOpen"
+                class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-102 lg:hidden print:hidden"
+                @search-close.window="$store.searchFieldOpen = false"
+                @click.outside="$store.searchFieldOpen = false; $dispatch('search-mobile-click-outside'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"
+                x-transition:enter="transition ease-out duration-200" 
+                x-transition:enter-start="opacity-0 transform scale-y-90" 
+                x-transition:enter-end="opacity-100 transform scale-y-100" 
+                x-transition:leave="transition ease-in duration-100" 
+                x-transition:leave-start="opacity-100 transform scale-y-100" 
+                x-transition:leave-end="opacity-0 transform scale-y-90">
+
+                {{> components/site_header/navigation_search/quick_search_form }}
+
+            </div>
+            
+        </div>
+    
+    </header>
+    <div x-ref="myOverlay">
+        <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
+    </div>
+</div>

package/dist/views/components/site_header/header_alpine.js

@@ -0,0 +1,255 @@
+//Main Alpine Init Listener
+document.addEventListener('alpine:init', () => {       
+    // Alpine.stores for global variables 
+    Alpine.store('clientHeight', document.documentElement.clientHeight || document.body.clientHeight)
+    Alpine.store('clientWidth', document.documentElement.clientWidth || document.body.clientWidth)
+    Alpine.store('burgeropen', false);
+    Alpine.store('searchFieldOpen', false);
+    Alpine.store('serviceNavIsOpen', false);
+    Alpine.store('searchID', {
+        current: '{{nextRandom}}'        
+    });
+    Alpine.store('serviceID', {
+        open: false,
+        current: '0'        
+    });
+    Alpine.store('navIsVisible', true);
+
+    // context for the main header element
+    Alpine.data('mainNavigationHandler', () =>({
+        
+        debounce (callback, wait) {
+            let timeoutId = null;
+            return (...args) => {
+                window.clearTimeout(timeoutId);
+                timeoutId = window.setTimeout(() => {
+                callback.apply(null, args);
+                }, wait);
+            };
+
+        },
+        init(){
+            let lastScrollTop = 0
+            let height = top.innerHeight
+
+            window.addEventListener('scroll', this.debounce( () => {
+                let winScroll = document.body.scrollTop || document.documentElement.scrollTop 
+                winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
+                //let height = document.documentElement.scrollHeight - document.documentElement.clientHeight
+                this.percent = Math.round((winScroll / height) * 100)
+                lastScrollTop = winScroll
+                //console.log('winscroll: '+winScroll+' height: '+height + '  percent: '+ this.percent) 
+                this.$store.navIsVisible = !this.isNavHidden()
+                //console.log(this.$store.navIsVisible);      
+            },50))
+        },
+        percent: 0,
+        scrollingDown: true,
+        isNavHidden() {
+            if(this.$screen('lg')) {
+                return this.shouldSectionNavBeHidden()
+            } else {
+                return this.shouldServiceNavBeHidden()
+            }
+        },
+        shouldBrandNavBeHidden() {
+            return this.percent > 0 
+        },
+        shouldSectionNavBeHidden() {
+            return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
+        },
+        shouldServiceNavBeHidden() {
+            return (this.percent > 90  && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false) 
+        },
+        shouldServiceIconsBeHidden() {
+            return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false  && this.scrollingDown == false) 
+        },
+        shouldFlyoutBeHidden() {
+            return (this.percent > 50  && this.scrollingDown && this.$screen('lg') )
+        },
+        resetNav() { 
+            if(window.innerWidth > 1023) {
+                this.$refs.sectionnavigation.setAttribute("style","")
+            } else {
+                // hidden needs to be set here to avoid flickering of the sectionNav on viewport change, gets removed in timeout
+                // this.$refs.sectionnavigation.classList.add('hidden')
+                // this.$refs.sectionnavigation.style.maxHeight="0px"
+            }
+
+            let nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+            let nowClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
+            let nextNowClientHeight = this.$store.clientHeight;
+            if (nextNowClientHeight >= nowClientHeight && this.$store.clientWidth == nowClientWidth) {
+                // Event handling of keyboard pop-up
+                nextNowClientHeight = nowClientHeight
+                this.$store.clientWidth = nowClientWidth
+            }
+            else{
+            // timeout is used to dispatch events after the resize is done
+                let timeout 
+                clearTimeout(timeout)
+                timeout = setTimeout(() => {
+                    this.$refs.sectionnavigation.classList.remove('hidden')
+                    this.$store.burgeropen == true ? this.$dispatch('burger-close') :null
+                    this.$store.searchFieldOpen === true ? this.$dispatch('search-mobile-click-outside') :null
+                    this.$store.searchFieldOpen === true ? this.$dispatch('search-close') :null
+                    this.$store.serviceNavIsOpen === true ? this.$dispatch('close-servicemenu') :null
+                    this.toggleScrolling(true)
+                }, 250)
+                // Event handling of keyboard pop-up
+                nextNowClientHeight = nowClientHeight
+                this.$store.clientWidth = nowClientWidth
+            }
+        }, 
+        toggleSectionNav() {
+        //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0  ///  desktop? just clear maxHeight attribute )  
+        //true = sectionNav öffnet (maxheight = scrollheight)   
+            console.log('toggleSectionNav, Event: ' + this.$event.detail )    
+            if(this.$event.detail === false) {                   
+                if (window.innerWidth < 1024) { 
+                    this.$refs.sectionnavigation.style.maxHeight='0px'
+                } else { 
+                    this.$refs.sectionnavigation.style.maxHeight = ''
+                }
+            } else {
+                let winheightcorr = parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
+                let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
+                let brandNavHeight = this.percent > 0 ? 40 : 0 
+            
+                if(navheight > winheightcorr){
+                    this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                    this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight +'px'
+                    
+                } else {
+                    this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                    this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px' 
+                }
+            }
+        },
+        disableScrolling() {
+            document.body.classList.add('overflow-hidden','h-full','w-full')
+            this.$refs.myOverlay.ontouchmove = (e) => e.preventDefault();
+            console.log("disableScrolling")
+        },
+        enableScrolling() {
+            document.body.classList.remove('overflow-hidden','h-full','w-full')
+            this.$refs.myOverlay.ontouchmove = (e) => true;
+            console.log("enableScrolling")
+        },
+        toggleScrolling(mode){
+            if(this.$screen(0) && !this.$screen('lg')){
+                mode == false ? this.disableScrolling() : this.enableScrolling()
+            }
+            if(this.$screen('lg') && mode == true){
+                this.enableScrolling()
+            }            
+        }          
+
+    }))
+
+    // context for the overlay
+    Alpine.data('overlayHandler', () => ({
+                shouldOverlayBeShown() {
+                        return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true  ))
+                    },
+                overlayWasClicked() {
+                    this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
+                    this.$dispatch('burger-close')
+                    this.$dispatch('close-servicemenu')
+                    // this.$dispatch('toggleScrolling', true )
+                    this.toggleScrolling(true)
+                }
+        }))
+
+    // context for all dropdowns
+    Alpine.data('dropdown', () => ({
+        dropped: false,
+        toggle() {
+            this.dropped = ! this.dropped; 
+        },
+        toggleServiceNav(){
+            this.dropped = ! this.dropped;
+            this.$store.searchFieldOpen = false;
+            
+            this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null; 
+            
+            this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
+            
+            console.log('currentID: '+ this.$store.serviceID.current)
+            console.log('target-id: '+this.$event.target.id)
+            console.log('element-id: '+this.$el.id)
+            console.log('serviceNav is open:'+ this.$store.serviceNavIsOpen)
+
+            this.$store.serviceID.current = this.$el.id
+
+            this.toggleScrolling(!this.$store.serviceNavIsOpen)
+            
+            let myFlyout = document.querySelector('#flyout-'+this.$el.id)
+            let brandNavHeight = this.percent > 0 ? 40 : 0 
+
+            if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
+                window.setTimeout(function(){
+                    if (myFlyout.scrollHeight > window.innerHeight-myFlyout.offsetTop) {
+                        myFlyout.style.height = 'auto'
+                        window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px' 
+                        myFlyout.style.overflowY = 'scroll'
+                    } else {
+                        myFlyout.style.maxHeight = ''
+                      //myFlyout.style.overflowY = 'hidden'
+                        }
+                },150)
+            }
+        }
+    }))
+
+    // There are several Flyouts sharing the same functionality and context, so put the data in an Alpine.data to make it reusable
+    Alpine.data('flyoutHandler', () => ({   
+        init() {
+            //Initial: x-collapse only on mobile/tablet 
+            if(window.innerWidth < 1024) {
+                this.$el.setAttribute("x-collapse","")
+            }  
+        },
+        sectionNavFlyoutWatcher() {
+            //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
+            this.$watch('dropped', value => {
+                let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
+                let brandNavHeight = this.percent > 0 ? 40 : 0
+                if(window.innerWidth < 1024) { 
+                    if(value == true ) { 
+                    
+                        if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
+                            this.$refs.sectionnavigation.style.maxHeight = a +'px'
+                            this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                        } else {
+                            this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop + brandNavHeight +'px'
+                            this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                        } 
+                    } else {
+                        if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
+                            this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                        } else {
+                            this.$refs.sectionnavigation.style.overflowY = 'scroll' 
+                        }
+                    }
+                }
+            })   
+        },
+        setFlyoutAnimationStyle() {
+            //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
+            if(window.innerWidth > 1023) {
+                if(this.$el.hasAttribute("x-collapse.duration.500ms")) {
+                    this.$el.removeAttribute("x-collapse.duration.500ms")
+                    delete this.$el._x_transition; 
+                    this.$el.style.removeProperty('overflow'); 
+                    this.$el.style.removeProperty('height'); 
+                    if (! this.$el._x_isShown) this.$el.style.display = 'none'
+                    if(this.$el.hasAttribute("hidden")) this.$el.removeAttribute("hidden")
+                }
+                
+            } else {
+                if(!this.$el.hasAttribute("x-collapse.duration.500ms")) this.$el.setAttribute("x-collapse.duration.500ms","")
+            }
+        }
+    }))
+})

package/dist/views/components/{Header/NavigationFlyout/NavigationFlyout.hbs → site_header/navigation_flyout/navigation_flyout.hbs}

@@ -44,11 +44,11 @@
         <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">
             {{#if this.showAsFlyout}}
                 {{#each this.columns}}
-                    {{> components/Header/NavigationFlyout/NavigationFlyoutColumn count=../this.columnCount navtype=../../_navigationType _parent=../../_parent _flyout=true~}}
+                    {{> components/site_header/navigation_flyout/navigation_flyout_column count=../this.columnCount navtype=../../_navigationType _parent=../../_parent _flyout=true~}}
                 {{/each}}
             {{else}}
                 {{#with this.items}}
-                    {{> components/Header/NavigationFlyout/NavigationFlyoutColumn selected=../../this.selected navtype=../../_navigationType _parent=../../_parent _flyout=false ~}}
+                    {{> components/site_header/navigation_flyout/navigation_flyout_column selected=../../this.selected navtype=../../_navigationType _parent=../../_parent _flyout=false ~}}
                 {{/with}}
             {{/if}}
         </div>

package/dist/views/components/{Header/NavigationFlyout/NavigationFlyoutColumn.hbs → site_header/navigation_flyout/navigation_flyout_column.hbs}

@@ -2,7 +2,7 @@
           
     {{~#each this ~}} 
         {{~#if this.title~}}
-            {{> components/Header/NavigationFlyout/NavigationFlyoutItem _parentselected=../selected _fromNav=../navtype _flyout=../_flyout _parent=../_parent ~}}
+            {{> components/site_header/navigation_flyout/navigation_flyout_item _parentselected=../selected _fromNav=../navtype _flyout=../_flyout _parent=../_parent ~}}
         {{~/if~}}       
     {{~/each~}}