Merge pull request 'feat(standard-menu): add unified-search-input size handling' (#507) from bugfix/top-menu-popover into develop

Reviewed-on: https://gitnet.fr/deblan/side_menu/pulls/507

src/menus/StandardMenu.vue

@@ -140,10 +140,10 @@ const appLimit = () => {
   let otherElementsWidth = headerEnd ? headerEnd.offsetWidth : 0
 
   if (unifiedSearch && headerEnd.offsetWidth < unifiedSearch.offsetWidth) {
-    otherElementsWidth = totalWidth - unifiedSearch.getBoundingClientRect().left
+    otherElementsWidth += unifiedSearch.offsetWidth
   }
 
-  let maxWidth = totalWidth - otherElementsWidth
+  let maxWidth = body.offsetWidth - otherElementsWidth
 
   if (headerStart) {
     Array.from(headerStart.children).forEach((child) => {
@@ -153,7 +153,7 @@ const appLimit = () => {
     })
   }
 
-  return Math.max(0, Math.floor(maxWidth / 70))
+  return Math.max(0, Math.floor(maxWidth / 60))
 }
 
 const makeStyle = (app) => {
@@ -165,14 +165,9 @@ const makeStyle = (app) => {
 }
 
 const computeLists = () => {
-  mainAppList.value = appList.value.slice(0, appLimit())
+  const limit = appLimit()
-  popoverAppList.value = appList.value.slice(appLimit()).sort((a, b) => a.order - b.order)
+  mainAppList.value = appList.value.slice(0, limit)
-}
+  popoverAppList.value = appList.value.slice(limit).sort((a, b) => a.order - b.order)
-
-const reComputeLists = (delay) => {
-  window.clearTimeout(resizeTimeout)
-  resizeTimeout = window.setTimeout(computeLists, delay || 100)
-  document.querySelector('html').classList.toggle('cm-standardmenu-popover', popoverAppList.value.length > 0)
 }
 
 onMounted(async () => {
@@ -187,8 +182,7 @@ onMounted(async () => {
 
   setApps(await navStore.getCoreApps())
 
-  reComputeLists(500)
+  window.setInterval(computeLists, 100)
-  window.addEventListener('resize', reComputeLists)
 })
 </script>
 

src/scss/menu.scss

@@ -620,10 +620,8 @@ $header-icon-size: 20px;
   }
 }
 
-.cm-standardmenu-popover {
+#header {
-  #header {
   .unified-search-input:not(.unified-search-input--mobile) {
     position: unset !important;
   }
-  }
 }