search panel coordinates

src/components/site-header/site-search/site-search.tsx

@@ -128,6 +128,8 @@ export class SiteSearch {
       // Close desktop menu panel and lang menu panel if they are open.
       this.searchPanelToggled.emit();
 
+      this.adjustPosition(this.el);
+      /*
       let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
       const headerHeight = hyHeader.classList.contains('hy-site-header--sticky-active')
         ? `${hyHeader.offsetHeight}px`
@@ -135,12 +137,6 @@ export class SiteSearch {
       const searchPanel = this.el.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;
       searchPanel.style.top = headerHeight;
 
-      // Remove hidden class from cludo suggestions
-      let cludoSayt = document.querySelectorAll('stencil-cludo-sayt')[0] as HTMLElement;
-      if (cludoSayt) {
-        cludoSayt.classList.remove('hidden');
-      }
-
       // Add shadow backdrop
       let rect = searchPanel.getBoundingClientRect();
 
@@ -148,6 +144,13 @@ export class SiteSearch {
         ? hyHeader.offsetHeight + rect.height
         : hyHeader.offsetTop + hyHeader.offsetHeight + rect.height;
       this.showBackdropShadow('open', shadowTop);
+       */
+
+      // Remove hidden class from cludo suggestions
+      let cludoSayt = document.querySelectorAll('stencil-cludo-sayt')[0] as HTMLElement;
+      if (cludoSayt) {
+        cludoSayt.classList.remove('hidden');
+      }
 
       // Without setTimeout it will not focus the input because it hasn't rendered yet.
       setTimeout(() => {
@@ -160,6 +163,66 @@ export class SiteSearch {
     event.stopPropagation();
   }
 
+  adjustPosition(target) {
+    let headerHeight = '0';
+    let shadowTop = 0;
+    const searchPanel = target.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;
+    let rect = searchPanel.getBoundingClientRect();
+
+    if (this.isGroup) {
+      let hyHeader = target.closest('.hy-site-header__content-top') as HTMLElement;
+      if (hyHeader) {
+        let rectHeader = hyHeader.getBoundingClientRect();
+        headerHeight = `${rectHeader.height}px`;
+
+        // Add shadow backdrop
+        //@todo For some reason rect (Search Panel) is {
+        //     "x": 0,
+        //     "y": 0,
+        //     "width": 0,
+        //     "height": 0,
+        //     "top": 0,
+        //     "right": 0,
+        //     "bottom": 0,
+        //     "left": 0
+        // }
+        shadowTop = hyHeader.offsetHeight + rect.height;
+      }
+    } else {
+      let hyHeader = target.closest('.hy-site-header') as HTMLElement;
+      headerHeight = hyHeader.classList.contains('hy-site-header--sticky-active')
+        ? `${hyHeader.offsetHeight}px`
+        : `${hyHeader.offsetTop + hyHeader.offsetHeight}px`;
+
+      // Add shadow backdrop
+      shadowTop = hyHeader.classList.contains('hy-site-header--sticky-active')
+        ? hyHeader.offsetHeight + rect.height
+        : hyHeader.offsetTop + hyHeader.offsetHeight + rect.height;
+    }
+
+    searchPanel.style.top = headerHeight;
+    this.showBackdropShadow('open', shadowTop);
+
+    /*
+    let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
+
+    if (hyTopHeader && hyTopHeader.hasAttribute('is-mobile')) {
+      console.log('do mobile stuff');
+    } else {
+      let mainMenuToggle = target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
+      let mainMenuDropdown = target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
+      let mainMenuList = target.shadowRoot.querySelector('.list') as HTMLElement;
+      if (mainMenuDropdown && mainMenuList && mainMenuToggle) {
+        let rectHeader = hyTopHeader.getBoundingClientRect();
+        let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
+        mainMenuDropdown.style.top = `${rectHeader.height}px`;
+
+        mainMenuList.style.left = `${rectMenuToggle.left}px`;
+      }
+    }
+    */
+  }
+
   showBackdropShadow(state = 'close', top = 0) {
     let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
     let hyBackdropDiv = hyHeader.children[0] as HTMLElement;