@xenknight/framework7 0.0.6 → 0.0.7

package/components/navbar-new/navbar.js

@@ -0,0 +1,568 @@
+import $ from '../../shared/dom7.js';
+import { bindMethods } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+const Navbar = {
+  size(el) {
+    const app = this;
+    const $el = $(el);
+    const $innerEl = $el.children('.navbar-new-inner');
+    if (!$innerEl.length) return;
+    const navbarNewParams = app.params.navbarNew || {};
+    const needCenterTitle = $innerEl.hasClass('navbar-new-inner-centered-title') || navbarNewParams[`${app.theme}CenterTitle`];
+    const needLeftTitle = app.theme === 'ios' && !navbarNewParams[`${app.theme}CenterTitle`];
+    if (!needCenterTitle && !needLeftTitle) return;
+    if ($el.parents('.tab:not(.tab-active)').length > 0 || $el.parents('.popup:not(.modal-in)').length > 0) {
+      return;
+    }
+    if (app.theme !== 'ios' && navbarNewParams[`${app.theme}CenterTitle`]) {
+      $innerEl.addClass('navbar-new-inner-centered-title');
+    }
+    if (app.theme === 'ios' && !navbarNewParams.iosCenterTitle) {
+      $innerEl.addClass('navbar-new-inner-left-title');
+    }
+    const left = app.rtl ? $innerEl.children('.right') : $innerEl.children('.left');
+    const right = app.rtl ? $innerEl.children('.left') : $innerEl.children('.right');
+    const title = $innerEl.children('.title');
+    const noLeft = left.length === 0;
+    const noRight = right.length === 0;
+    const leftWidth = noLeft ? 0 : left.outerWidth(true);
+    const rightWidth = noRight ? 0 : right.outerWidth(true);
+    const titleWidth = title.outerWidth(true);
+    const navbarStyles = $innerEl.styles();
+    const navbarWidth = $innerEl[0].offsetWidth;
+    const navbarInnerWidth = navbarWidth - parseInt(navbarStyles.paddingLeft, 10) - parseInt(navbarStyles.paddingRight, 10);
+    let currLeft;
+    let diff;
+    if (noRight) {
+      currLeft = navbarInnerWidth - titleWidth;
+    }
+    if (noLeft) {
+      currLeft = 0;
+    }
+    if (!noLeft && !noRight) {
+      currLeft = (navbarInnerWidth - rightWidth - titleWidth + leftWidth) / 2;
+    }
+    let requiredLeft = (navbarInnerWidth - titleWidth) / 2;
+    if (navbarInnerWidth - leftWidth - rightWidth > titleWidth) {
+      if (requiredLeft < leftWidth) {
+        requiredLeft = leftWidth;
+      }
+      if (requiredLeft + titleWidth > navbarInnerWidth - rightWidth) {
+        requiredLeft = navbarInnerWidth - rightWidth - titleWidth;
+      }
+      diff = requiredLeft - currLeft;
+    } else {
+      diff = 0;
+    }
+
+    // Center title
+    if (needCenterTitle) {
+      let titleLeft = diff;
+      if (app.rtl && noLeft && noRight && title.length > 0) titleLeft = -titleLeft;
+      title.css({
+        left: `${titleLeft}px`
+      });
+    }
+  },
+  hide(el, animate, hideStatusbar) {
+    if (animate === void 0) {
+      animate = true;
+    }
+    if (hideStatusbar === void 0) {
+      hideStatusbar = false;
+    }
+    const app = this;
+    const $el = $(el);
+    if (!$el.length) return;
+    if ($el.hasClass('navbar-new-hidden')) return;
+    let className = `navbar-new-hidden${animate ? ' navbar-new-transitioning' : ''}`;
+    const currentIsLarge = $el.find('.title-large').length;
+    if (currentIsLarge) {
+      className += ' navbar-new-large-hidden';
+    }
+    if (hideStatusbar) {
+      className += ' navbar-new-hidden-statusbar';
+    }
+    $el.transitionEnd(() => {
+      $el.removeClass('navbar-new-transitioning');
+    });
+    $el.addClass(className);
+    $el.trigger('navbar-new:hide');
+    app.emit('navbarNewHide', $el[0]);
+  },
+  show(el, animate) {
+    if (el === void 0) {
+      el = '.navbar-new-hidden';
+    }
+    if (animate === void 0) {
+      animate = true;
+    }
+    const app = this;
+    const $el = $(el);
+    if (!$el.length) return;
+    if (!$el.hasClass('navbar-new-hidden')) return;
+    if (animate) {
+      $el.addClass('navbar-new-transitioning');
+      $el.transitionEnd(() => {
+        $el.removeClass('navbar-new-transitioning');
+      });
+    }
+    $el.removeClass('navbar-new-hidden navbar-new-large-hidden navbar-new-hidden-statusbar');
+    $el.trigger('navbar-new:show');
+    app.emit('navbarNewShow', $el[0]);
+  },
+  getElByPage(page) {
+    let $pageEl;
+    let $navbarEl;
+    let pageData;
+    if (page.$navbarNewEl || page.$el) {
+      pageData = page;
+      $pageEl = page.$el;
+    } else {
+      $pageEl = $(page);
+      if ($pageEl.length > 0) pageData = $pageEl[0].f7Page;
+    }
+    if (pageData && pageData.$navbarNewEl && pageData.$navbarNewEl.length > 0) {
+      $navbarEl = pageData.$navbarNewEl;
+    } else if ($pageEl) {
+      $navbarEl = $pageEl.children('.navbar-new');
+    }
+    if (!$navbarEl || $navbarEl && $navbarEl.length === 0) return undefined;
+    return $navbarEl[0];
+  },
+  getPageByEl(navbarEl) {
+    const $navbarEl = $(navbarEl);
+    if ($navbarEl.parents('.page').length) {
+      return $navbarEl.parents('.page')[0];
+    }
+    let pageEl;
+    $navbarEl.parents('.view').find('.page').each(el => {
+      if (el && el.f7Page && el.f7Page.navbarEl && $navbarEl[0] === el.f7Page.navbarEl) {
+        pageEl = el;
+      }
+    });
+    return pageEl;
+  },
+  collapseLargeTitle(navbarEl) {
+    const app = this;
+    const $navbarEl = $(navbarEl);
+    const $pageEl = $(app.navbarNew.getPageByEl($navbarEl));
+    $navbarEl.addClass('navbar-new-large-collapsed');
+    $pageEl.eq(0).addClass('page-with-navbar-new-large-collapsed').trigger('page:navbarlargecollapsed');
+    app.emit('pageNavbarLargeCollapsed', $pageEl[0]);
+    $navbarEl.trigger('navbar-new:collapse');
+    app.emit('navbarNewCollapse', $navbarEl[0]);
+  },
+  expandLargeTitle(navbarEl) {
+    const app = this;
+    const $navbarEl = $(navbarEl);
+    const $pageEl = $(app.navbarNew.getPageByEl($navbarEl));
+    $navbarEl.removeClass('navbar-new-large-collapsed');
+    $pageEl.eq(0).removeClass('page-with-navbar-new-large-collapsed').trigger('page:navbarlargeexpanded');
+    app.emit('pageNavbarLargeExpanded', $pageEl[0]);
+    $navbarEl.trigger('navbar-new:expand');
+    app.emit('navbarNewExpand', $navbarEl[0]);
+  },
+  toggleLargeTitle(navbarEl) {
+    const app = this;
+    const $navbarEl = $(navbarEl);
+    if ($navbarEl.hasClass('navbar-new-large-collapsed')) {
+      app.navbarNew.expandLargeTitle($navbarEl);
+    } else {
+      app.navbarNew.collapseLargeTitle($navbarEl);
+    }
+  },
+  initNavbarOnScroll(pageEl, navbarEl, needHide, needCollapse, needTransparent) {
+    const app = this;
+    const support = getSupport();
+    const $pageEl = $(pageEl);
+    const $navbarEl = $(navbarEl);
+    const $titleLargeEl = $navbarEl.find('.title-large');
+    const isLarge = $titleLargeEl.length || $navbarEl.hasClass('navbar-new-large');
+    let navbarHideHeight = 44;
+    const snapPageScrollToLargeTitle = app.params.navbarNew.snapPageScrollToLargeTitle;
+    const snapPageScrollToTransparentNavbar = app.params.navbarNew.snapPageScrollToTransparentNavbar;
+    let previousScrollTop;
+    let currentScrollTop;
+    let scrollHeight;
+    let offsetHeight;
+    let reachEnd;
+    let action;
+    let navbarHidden;
+    let navbarCollapsed;
+    let navbarTitleLargeHeight;
+    let navbarOffsetHeight;
+    if (needCollapse || needHide && isLarge) {
+      navbarTitleLargeHeight = $navbarEl.css('--f7-navbar-new-large-title-height');
+      if (navbarTitleLargeHeight && navbarTitleLargeHeight.indexOf('px') >= 0) {
+        navbarTitleLargeHeight = parseInt(navbarTitleLargeHeight, 10);
+        if (Number.isNaN(navbarTitleLargeHeight) && $titleLargeEl.length) {
+          navbarTitleLargeHeight = $titleLargeEl[0].offsetHeight;
+        } else if (Number.isNaN(navbarTitleLargeHeight)) {
+          if (app.theme === 'ios') navbarTitleLargeHeight = 52;else if (app.theme === 'md') navbarTitleLargeHeight = 88;
+        }
+      } else if ($titleLargeEl.length) {
+        navbarTitleLargeHeight = $titleLargeEl[0].offsetHeight;
+      } else {
+        // eslint-disable-next-line
+        if (app.theme === 'ios') navbarTitleLargeHeight = 52;else if (app.theme === 'md') navbarTitleLargeHeight = 88;
+      }
+    }
+    if (needHide && isLarge) {
+      navbarHideHeight += navbarTitleLargeHeight;
+    }
+    let scrollChanged;
+    let scrollContent;
+    let scrollTimeoutId;
+    let touchEndTimeoutId;
+    const touchSnapTimeout = 70;
+    const desktopSnapTimeout = 300;
+    function calcScrollableDistance() {
+      $pageEl.find('.page-content').each(pageContentEl => {
+        pageContentEl.f7ScrollableDistance = pageContentEl.scrollHeight - pageContentEl.offsetHeight;
+      });
+    }
+    function snapLargeNavbar() {
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      if (inSearchbarExpanded) return;
+      if (!scrollContent || currentScrollTop < 0) return;
+      if (currentScrollTop >= navbarTitleLargeHeight / 2 && currentScrollTop < navbarTitleLargeHeight) {
+        $(scrollContent).scrollTop(navbarTitleLargeHeight, 100);
+      } else if (currentScrollTop < navbarTitleLargeHeight) {
+        $(scrollContent).scrollTop(0, 200);
+      }
+    }
+    function snapTransparentNavbar() {
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      if (inSearchbarExpanded) return;
+      if (!scrollContent || currentScrollTop < 0) return;
+      if (currentScrollTop >= navbarOffsetHeight / 2 && currentScrollTop < navbarOffsetHeight) {
+        $(scrollContent).scrollTop(navbarOffsetHeight, 100);
+      } else if (currentScrollTop < navbarOffsetHeight) {
+        $(scrollContent).scrollTop(0, 200);
+      }
+    }
+    function handleNavbarTransparent() {
+      const isHidden = $navbarEl.hasClass('navbar-new-hidden');
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      if (inSearchbarExpanded || isHidden) return;
+      if (!navbarOffsetHeight) {
+        navbarOffsetHeight = navbarEl.offsetHeight;
+      }
+      let opacity = currentScrollTop / navbarOffsetHeight;
+      const notTransparent = $navbarEl.hasClass('navbar-new-transparent-visible');
+      opacity = Math.max(Math.min(opacity, 1), 0);
+      if (notTransparent && opacity === 1 || !notTransparent && opacity === 0) {
+        $navbarEl.find('.navbar-new-bg, .title').css('opacity', '');
+        return;
+      }
+      if (notTransparent && opacity === 0) {
+        $navbarEl.trigger('navbar-new:transparenthide');
+        app.emit('navbarNewTransparentHide', $navbarEl[0]);
+        $navbarEl.removeClass('navbar-new-transparent-visible');
+        $navbarEl.find('.navbar-new-bg, .title').css('opacity', '');
+        return;
+      }
+      if (!notTransparent && opacity === 1) {
+        $navbarEl.trigger('navbar-new:transparentshow');
+        app.emit('navbarNewTransparentShow', $navbarEl[0]);
+        $navbarEl.addClass('navbar-new-transparent-visible');
+        $navbarEl.find('.navbar-new-bg, .title').css('opacity', '');
+        return;
+      }
+      $navbarEl.find('.navbar-new-bg, .title').css('opacity', opacity);
+      if (snapPageScrollToTransparentNavbar) {
+        if (!support.touch) {
+          clearTimeout(scrollTimeoutId);
+          scrollTimeoutId = setTimeout(() => {
+            snapTransparentNavbar();
+          }, desktopSnapTimeout);
+        } else if (touchEndTimeoutId) {
+          clearTimeout(touchEndTimeoutId);
+          touchEndTimeoutId = null;
+          touchEndTimeoutId = setTimeout(() => {
+            snapTransparentNavbar();
+            clearTimeout(touchEndTimeoutId);
+            touchEndTimeoutId = null;
+          }, touchSnapTimeout);
+        }
+      }
+    }
+    let previousCollapseProgress = null;
+    let collapseProgress = null;
+    function handleLargeNavbarCollapse(pageContentEl) {
+      const isHidden = $navbarEl.hasClass('navbar-new-hidden');
+      if (isHidden) return;
+      const isLargeTransparent = $navbarEl.hasClass('navbar-new-large-transparent') || $navbarEl.hasClass('navbar-new-large') && $navbarEl.hasClass('navbar-new-transparent');
+      previousCollapseProgress = collapseProgress;
+      const scrollableDistance = Math.min(navbarTitleLargeHeight, pageContentEl.f7ScrollableDistance || navbarTitleLargeHeight);
+      collapseProgress = Math.min(Math.max(currentScrollTop / scrollableDistance, 0), 1);
+      const previousCollapseWasInMiddle = previousCollapseProgress > 0 && previousCollapseProgress < 1;
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      if (inSearchbarExpanded) return;
+      navbarCollapsed = $navbarEl.hasClass('navbar-new-large-collapsed');
+      const $bgEl = $navbarEl.find('.navbar-new-bg');
+      if (collapseProgress === 0 && navbarCollapsed) {
+        app.navbarNew.expandLargeTitle($navbarEl[0]);
+      } else if (collapseProgress === 1 && !navbarCollapsed) {
+        app.navbarNew.collapseLargeTitle($navbarEl[0]);
+      }
+      if (collapseProgress === 0 && navbarCollapsed || collapseProgress === 0 && previousCollapseWasInMiddle || collapseProgress === 1 && !navbarCollapsed || collapseProgress === 1 && previousCollapseWasInMiddle) {
+        if (app.theme === 'md') {
+          $navbarEl.find('.navbar-new-inner').css('overflow', '');
+        }
+        $navbarEl.find('.title').css('opacity', '');
+        $navbarEl.find('.title-large-text, .subnavbar').css('transform', '');
+        $navbarEl.find('.title-large-text').css('opacity', '');
+        if (app.theme === 'md') {
+          if (isLargeTransparent) {
+            $bgEl.css('opacity', '');
+          }
+          $bgEl.css('transform', '');
+        }
+      } else if (collapseProgress > 0 && collapseProgress < 1) {
+        if (app.theme === 'md') {
+          $navbarEl.find('.navbar-new-inner').css('overflow', 'visible');
+        }
+        $navbarEl.find('.title').css('opacity', -0.5 + collapseProgress * 1.5);
+        $navbarEl.find('.title-large-text, .subnavbar').css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
+        $navbarEl.find('.title-large-text').css('opacity', 1 - collapseProgress * 2);
+        if (app.theme === 'md') {
+          if (isLargeTransparent) {
+            $bgEl.css('opacity', collapseProgress);
+          }
+          $bgEl.css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
+        }
+      }
+      if (snapPageScrollToLargeTitle) {
+        if (!support.touch) {
+          clearTimeout(scrollTimeoutId);
+          scrollTimeoutId = setTimeout(() => {
+            snapLargeNavbar();
+          }, desktopSnapTimeout);
+        } else if (touchEndTimeoutId) {
+          clearTimeout(touchEndTimeoutId);
+          touchEndTimeoutId = null;
+          touchEndTimeoutId = setTimeout(() => {
+            snapLargeNavbar();
+            clearTimeout(touchEndTimeoutId);
+            touchEndTimeoutId = null;
+          }, touchSnapTimeout);
+        }
+      }
+    }
+    function handleTitleHideShow() {
+      if ($pageEl.hasClass('page-with-card-opened')) return;
+      scrollHeight = scrollContent.scrollHeight;
+      offsetHeight = scrollContent.offsetHeight;
+      reachEnd = currentScrollTop + offsetHeight >= scrollHeight;
+      navbarHidden = $navbarEl.hasClass('navbar-new-hidden');
+      if (reachEnd) {
+        if (app.params.navbarNew.showOnPageScrollEnd) {
+          action = 'show';
+        }
+      } else if (previousScrollTop > currentScrollTop) {
+        if (app.params.navbarNew.showOnPageScrollTop || currentScrollTop <= navbarHideHeight) {
+          action = 'show';
+        } else {
+          action = 'hide';
+        }
+      } else if (currentScrollTop > navbarHideHeight) {
+        action = 'hide';
+      } else {
+        action = 'show';
+      }
+      if (action === 'show' && navbarHidden) {
+        app.navbarNew.show($navbarEl, true, true);
+        navbarHidden = false;
+      } else if (action === 'hide' && !navbarHidden) {
+        app.navbarNew.hide($navbarEl, true, false, true);
+        navbarHidden = true;
+      }
+      previousScrollTop = currentScrollTop;
+    }
+    function handleScroll(e) {
+      scrollContent = this;
+      if (e && e.target && e.target !== scrollContent) {
+        return;
+      }
+      currentScrollTop = scrollContent.scrollTop;
+      scrollChanged = currentScrollTop;
+      if (needCollapse) {
+        handleLargeNavbarCollapse(scrollContent);
+      } else if (needTransparent) {
+        handleNavbarTransparent();
+      }
+      if ($pageEl.hasClass('page-previous')) return;
+      if (needHide) {
+        handleTitleHideShow();
+      }
+    }
+    function handeTouchStart() {
+      scrollChanged = false;
+    }
+    function handleTouchEnd() {
+      clearTimeout(touchEndTimeoutId);
+      touchEndTimeoutId = null;
+      touchEndTimeoutId = setTimeout(() => {
+        if (scrollChanged !== false) {
+          if (needTransparent && !needCollapse) {
+            snapTransparentNavbar();
+          } else {
+            snapLargeNavbar();
+          }
+          clearTimeout(touchEndTimeoutId);
+          touchEndTimeoutId = null;
+        }
+      }, touchSnapTimeout);
+    }
+    $pageEl.on('scroll', '.page-content', handleScroll, true);
+    if (support.touch && (needCollapse && snapPageScrollToLargeTitle || needTransparent && snapPageScrollToTransparentNavbar)) {
+      app.on('touchstart:passive', handeTouchStart);
+      app.on('touchend:passive', handleTouchEnd);
+    }
+    calcScrollableDistance();
+    if (needCollapse || needTransparent) {
+      $pageEl.find('.page-content').each(pageContentEl => {
+        if (pageContentEl.scrollTop > 0) handleScroll.call(pageContentEl);
+      });
+    }
+    app.on('resize', calcScrollableDistance);
+    $pageEl[0].f7DetachNavbarNewScrollHandlers = function f7DetachNavbarNewScrollHandlers() {
+      app.off('resize', calcScrollableDistance);
+      delete $pageEl[0].f7DetachNavbarNewScrollHandlers;
+      $pageEl.off('scroll', '.page-content', handleScroll, true);
+      if (support.touch && (needCollapse && snapPageScrollToLargeTitle || needTransparent && snapPageScrollToTransparentNavbar)) {
+        app.off('touchstart:passive', handeTouchStart);
+        app.off('touchend:passive', handleTouchEnd);
+      }
+    };
+  }
+};
+export default {
+  name: 'navbar-new',
+  create() {
+    const app = this;
+    bindMethods(app, {
+      navbarNew: Navbar
+    });
+  },
+  params: {
+    navbarNew: {
+      scrollTopOnTitleClick: true,
+      iosCenterTitle: true,
+      mdCenterTitle: false,
+      hideOnPageScroll: false,
+      showOnPageScrollEnd: true,
+      showOnPageScrollTop: true,
+      collapseLargeTitleOnScroll: true,
+      snapPageScrollToLargeTitle: true,
+      snapPageScrollToTransparentNavbar: true
+    }
+  },
+  on: {
+    'panelBreakpoint panelCollapsedBreakpoint panelResize viewResize resize viewMasterDetailBreakpoint': function onPanelResize() {
+      const app = this;
+      $('.navbar-new').each(navbarEl => {
+        app.navbarNew.size(navbarEl);
+      });
+    },
+    pageBeforeRemove(page) {
+      if (page.$el[0].f7DetachNavbarNewScrollHandlers) {
+        page.$el[0].f7DetachNavbarNewScrollHandlers();
+      }
+    },
+    pageReinit(page) {
+      const app = this;
+      const $navbarEl = $(app.navbarNew.getElByPage(page));
+      if (!$navbarEl || $navbarEl.length === 0) return;
+      app.navbarNew.size($navbarEl);
+    },
+    pageInit(page) {
+      const app = this;
+      const $navbarEl = $(app.navbarNew.getElByPage(page));
+      if (!$navbarEl || $navbarEl.length === 0) return;
+
+      // Size
+      app.navbarNew.size($navbarEl);
+
+      // Need Collapse On Scroll
+      let needCollapseOnScrollHandler;
+      if ($navbarEl.find('.title-large').length > 0) {
+        $navbarEl.addClass('navbar-new-large');
+      }
+      if ($navbarEl.hasClass('navbar-new-large')) {
+        if (app.params.navbarNew.collapseLargeTitleOnScroll) needCollapseOnScrollHandler = true;
+        page.$el.addClass('page-with-navbar-new-large');
+      }
+
+      // Need transparent on scroll
+      let needTransparentOnScroll;
+      if (!needCollapseOnScrollHandler && $navbarEl.hasClass('navbar-new-transparent')) {
+        needTransparentOnScroll = true;
+      }
+
+      // Need Hide On Scroll
+      let needHideOnScrollHandler;
+      if (app.params.navbarNew.hideOnPageScroll || page.$el.find('.hide-navbar-new-on-scroll').length || page.$el.hasClass('hide-navbar-new-on-scroll') || page.$el.find('.hide-bars-on-scroll').length || page.$el.hasClass('hide-bars-on-scroll')) {
+        if (page.$el.find('.keep-navbar-new-on-scroll').length || page.$el.hasClass('keep-navbar-new-on-scroll') || page.$el.find('.keep-bars-on-scroll').length || page.$el.hasClass('keep-bars-on-scroll')) {
+          needHideOnScrollHandler = false;
+        } else {
+          needHideOnScrollHandler = true;
+        }
+      }
+      if (needCollapseOnScrollHandler || needHideOnScrollHandler || needTransparentOnScroll) {
+        app.navbarNew.initNavbarOnScroll(page.el, $navbarEl[0], needHideOnScrollHandler, needCollapseOnScrollHandler, needTransparentOnScroll);
+      }
+    },
+    'panelOpen panelSwipeOpen modalOpen': function onPanelModalOpen(instance) {
+      const app = this;
+      instance.$el.find('.navbar-new').each(navbarEl => {
+        app.navbarNew.size(navbarEl);
+      });
+    },
+    tabShow(tabEl) {
+      const app = this;
+      $(tabEl).find('.navbar-new').each(navbarEl => {
+        app.navbarNew.size(navbarEl);
+      });
+    }
+  },
+  clicks: {
+    '.navbar-new .title': function onTitleClick($clickedEl, clickedData, e) {
+      const app = this;
+      if (!app.params.navbarNew.scrollTopOnTitleClick) return;
+      if ($(e.target).closest('a, button').length > 0) {
+        return;
+      }
+      let $pageContentEl;
+
+      // Find active page
+      const $navbarEl = $clickedEl.parents('.navbar-new');
+
+      // Static Layout
+      $pageContentEl = $navbarEl.parents('.page-content');
+      if ($pageContentEl.length === 0) {
+        // Fixed Layout
+        if ($navbarEl.parents('.page').length > 0) {
+          $pageContentEl = $navbarEl.parents('.page').find('.page-content');
+        }
+      }
+      if ($pageContentEl && $pageContentEl.length > 0) {
+        // Check for tab
+        if ($pageContentEl.hasClass('tab')) {
+          $pageContentEl = $pageContentEl.parent('.tabs').children('.page-content.tab-active');
+        }
+        if ($pageContentEl.length > 0) $pageContentEl.scrollTop(0, 300);
+      }
+    }
+  },
+  vnode: {
+    'navbar-new': {
+      postpatch(vnode) {
+        const app = this;
+        app.navbarNew.size(vnode.elm);
+      }
+    }
+  }
+};