From d40f56e676eedf20ebe522e01f0c4d4a5ec64e4d Mon Sep 17 00:00:00 2001
From: pandadtdyy <panda_dtdyy@outlook.com>
Date: Sat, 18 Dec 2021 18:24:36 +0800
Subject: [PATCH] ui: Add dropdown when nav is longer than window (#271)

Co-authored-by: undefined <i@undefined.moe>
---
 .../components/navigation/navigation.page.js  | 70 +++++++++++++++++++
 packages/ui-default/locales/zh.yaml           |  1 +
 2 files changed, 71 insertions(+)

diff --git a/packages/ui-default/components/navigation/navigation.page.js b/packages/ui-default/components/navigation/navigation.page.js
index ec1517b33..348c29e8c 100644
--- a/packages/ui-default/components/navigation/navigation.page.js
+++ b/packages/ui-default/components/navigation/navigation.page.js
@@ -15,6 +15,7 @@ function handleNavLogoutClick(ev) {
     .then(() => window.location.reload());
   ev.preventDefault();
 }
+
 function handlerSwitchAccount(ev) {
   let userSelector;
   const promise = new ActionDialog({
@@ -58,6 +59,62 @@ function handlerSwitchAccount(ev) {
   ev.preventDefault();
 }
 
+let trigger;
+let menu;
+
+function handleNavbar() {
+  let fromHide = false;
+  if ($(document).width() <= 600) {
+    for (const ele of menu.children()) {
+      ele.insertBefore(trigger);
+    }
+    trigger.hide();
+    return;
+  }
+  trigger.show();
+
+  let navItems = $('.nav__list--main > .nav__list-item');
+  let navItem = navItems.length - 2;
+  while (navItem && $('#menu').children('div').height() > 45) {
+    if (!$(navItems[navItem]).children('a').hasClass('nav--active')) {
+      $(navItems[navItem]).removeClass('nav__list-item').addClass('menu__item');
+      $(navItems[navItem]).children('a').removeClass('nav__item').addClass('menu__link');
+      console.log('hide', navItems[navItem]);
+      $(menu).prepend($(navItems[navItem]));
+    }
+    navItem--;
+    fromHide = true;
+  }
+
+  if (!fromHide && menu.children().length) {
+    while ($('#menu').children('div').height() <= 45 && menu.children().length) {
+      const ele = menu.children(0);
+      $(ele).addClass('nav__list-item').removeClass('menu__item');
+      $(ele).children('a').addClass('nav__item').removeClass('menu__link');
+      console.log('show', ele);
+      ele.insertBefore(trigger);
+    }
+  }
+
+  navItems = $('.nav__list--main > .nav__list-item');
+  navItem = navItems.length - 2;
+  if ($('#menu').children('div').height() > 45) {
+    while (navItem && $('#menu').children('div').height() > 45) {
+      if (!$(navItems[navItem]).children('a').hasClass('nav--active')) {
+        $(navItems[navItem]).removeClass('nav__list-item').addClass('menu__item');
+        $(navItems[navItem]).children('a').removeClass('nav__item').addClass('menu__link');
+        console.log('hide', navItems[navItem]);
+        $(menu).prepend($(navItems[navItem]));
+        break;
+      }
+      navItem--;
+    }
+  }
+
+  console.log('children', menu.children());
+  if (!menu.children().length) trigger.hide();
+}
+
 const navigationPage = new AutoloadPage('navigationPage', () => {
   if (!document.getElementById('panel') || !document.getElementById('menu')) return;
 
@@ -81,6 +138,19 @@ const navigationPage = new AutoloadPage('navigationPage', () => {
   slideout.on('beforeclose', () => $slideoutOverlay.hide());
 
   $('.header__hamburger').click(() => slideout.toggle());
+  $(window).on('resize', handleNavbar);
+}, () => {
+  trigger = $(tpl`
+    <li class="nav__list-item nav_more" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-more">
+      <a href="javascript:;" class="nav__item">
+        ${i18n('More')} <span class="icon icon-expand_more"></span>
+      </a>
+    </li>
+  `);
+  menu = $('<ol class="dropdown-target menu menu_more" id="menu-nav-more">');
+  trigger.append(menu);
+  $('.nav__list--main').append(trigger);
+  handleNavbar();
 });
 
 export default navigationPage;
diff --git a/packages/ui-default/locales/zh.yaml b/packages/ui-default/locales/zh.yaml
index 3fff5f397..690f5ab1f 100644
--- a/packages/ui-default/locales/zh.yaml
+++ b/packages/ui-default/locales/zh.yaml
@@ -454,6 +454,7 @@ Method: 方法
 Moderator: 管理员
 Month: 月
 Monthly Popular: 月度最受欢迎
+More: 更多
 Most Upvoted Solutions: 最被赞同的题解
 My Domains: 我的域
 My Files: 我的文件