fix(standardmenu): fix icons shift upwards when resizing

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

CHANGELOG.md

@@ -1,5 +1,15 @@
 ## [Unreleased]
 
+## 6.2.0
+
+### Added
+
+- feat(app): add compatibility with Nextcloud 35
+
+### Fixed
+
+- fix #510 #417: [Bug] Styling of the icon labels and overflow icon is not correct
+
 ## 6.1.0
 
 ### Added

appinfo/info.xml

@@ -30,7 +30,7 @@ Notice
 Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
 In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
 ]]></description>
-    <version>6.1.0</version>
+    <version>6.2.0</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.fr/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
@@ -53,7 +53,7 @@ In case of downtime, you can download **Custom Menu** from [here](https://kim.de
     <screenshot><![CDATA[https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_default_menu.png]]></screenshot>
     <dependencies>
         <php min-version="8.1" max-version="8.5" />
-        <nextcloud min-version="34" max-version="34"/>
+        <nextcloud min-version="34" max-version="35"/>
     </dependencies>
     <settings>
         <admin>OCA\SideMenu\Settings\Admin</admin>

src/menus/StandardMenu.vue

@@ -153,7 +153,7 @@ const appLimit = () => {
     })
   }
 
-  return Math.max(0, Math.floor(maxWidth / 60))
+  return Math.max(0, Math.floor(maxWidth / 60) - 1)
 }
 
 const makeStyle = (app) => {

src/scss/menu.scss

@@ -287,14 +287,6 @@
   }
 }
 
-.cm-standardmenu {
-  visibility: hidden;
-
-  &.show {
-    visibility: visible;
-  }
-}
-
 .cm-always-displayed {
   body {
     width: calc(100% - 50px) !important;
@@ -426,11 +418,25 @@
 $header-icon-size: 20px;
 
 .cm-standardmenu {
+  visibility: hidden;
   width: 100%;
   display: flex;
   flex-shrink: 1;
   flex-wrap: wrap;
 
+  &.show {
+    visibility: visible;
+  }
+
+  svg {
+    color: var(--color-background-plain-text) !important;
+  }
+
+  .app-menu-entry--label {
+    color: var(--color-background-plain-text) !important;
+    filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright)) !important;
+  }
+
   .app-menu-main {
     display: flex;
     flex-wrap: nowrap;