Fix chatlist search horizontal menu

Fix sticky horizontal menu in shared media

src/components/appSearchSuper..ts

@@ -167,7 +167,7 @@ export default class AppSearchSuper {
     }, () => {
       this.scrollable.onScroll();
       this.onTransitionEnd();
-    });
+    }, undefined, navScrollable);
 
     this.tabs.inputMessagesFilterPhotoVideo.addEventListener('click', (e) => {
       const target = findUpClassName(e.target as HTMLDivElement, 'grid-item');

src/components/emoticonsDropdown/index.ts

@@ -343,6 +343,10 @@ export class EmoticonsDropdown {
 
       const which = whichChild(target);
 
+      /* if(menuScroll) {
+        menuScroll.scrollIntoView(target, false, 0);
+      } */
+
       if(!setActive(which)) {
         return;
       }

src/components/horizontalMenu.ts

@@ -1,7 +1,8 @@
 import { findUpTag, whichChild } from "../helpers/dom";
 import { TransitionSlider } from "./transition";
+import { ScrollableX } from "./scrollable";
 
-export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick?: (id: number, tabContent: HTMLDivElement) => void, onTransitionEnd?: () => void, transitionTime = 250) {
+export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick?: (id: number, tabContent: HTMLDivElement) => void, onTransitionEnd?: () => void, transitionTime = 250, scrollableX?: ScrollableX) {
   const selectTab = TransitionSlider(content, tabs || content.dataset.slider == 'tabs' ? 'tabs' : 'navigation', transitionTime, onTransitionEnd);
 
   if(tabs) {
@@ -19,6 +20,11 @@ export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick?
       const tabContent = content.children[id] as HTMLDivElement;
 
       if(onClick) onClick(id, tabContent);
+
+      if(scrollableX) {
+        scrollableX.scrollIntoView(target.parentElement.children[id] as HTMLElement, true, transitionTime);
+      }
+
       if(target.classList.contains('active') || id === selectTab.prevId) {
         return false;
       }

src/components/sidebarLeft/index.ts

@@ -190,6 +190,7 @@ export class AppSidebarLeft extends SidebarSlider {
       name: 'Voice'
     }], scrollable, this.searchGroups, true);
 
+    searchContainer.prepend(searchSuper.nav.parentElement.parentElement);
     scrollable.container.append(searchSuper.container);
 
     const resetSearch = () => {

src/lib/appManagers/appDialogsManager.ts

@@ -432,8 +432,6 @@ export class AppDialogsManager {
         id += 1;
       } */
 
-      foldersScrollable.scrollIntoView(this.folders.menu.firstElementChild.children[id] as HTMLElement, true, 250);
-
       id = +tabContent.dataset.filterId || 0;
 
       if(this.filterId == id) return;
@@ -448,7 +446,7 @@ export class AppDialogsManager {
           this.chatLists[folderId].innerHTML = '';
         }
       }
-    });
+    }, undefined, foldersScrollable);
 
     //selectTab(0);
     (this.folders.menu.firstElementChild.firstElementChild as HTMLElement).click();

src/scss/partials/_leftSidebar.scss

@@ -163,12 +163,10 @@
     }
     
     .search-super-tabs-scrollable { 
-      position: sticky; 
+      position: relative !important; 
-      top: 0; 
-      z-index: 2; 
 
-      .menu-horizontal ul {
+      .menu-horizontal li {
-        justify-content: space-around;
+        flex: 1 0 auto !important;
       }
     }
   }

src/scss/partials/_rightSidebar.scss

@@ -272,12 +272,6 @@
 
   &-tabs {
     //margin-top: 36px;
-    position: -webkit-sticky !important;
-	  position: sticky !important;
-    top: 0;
-    z-index: 2;
-    background-color: #fff;
-
     i {
       padding-right: 1.5rem !important;
 	    margin-left: -.75rem !important;
@@ -286,6 +280,11 @@
 
   &-tabs-scrollable {
     box-shadow: none !important;
+    position: -webkit-sticky !important;
+	  position: sticky !important;
+    top: 0;
+    z-index: 2;
+    background-color: #fff;
 
     .scrollable {
       position: relative;
@@ -506,9 +505,9 @@
       }
     }
 
-}
+  }
 
-&-content-music, &-content-voice {
+  &-content-music, &-content-voice {
 
     .search-super-month-items {
       padding: 20px 15px 0px 20px;