IBX-8449: [Main menu] Selected area of second level menu item changes after expanding/collapsing (#1279)

Author: GrabowskiM

src/bundle/Resources/public/js/scripts/sidebar/main.menu.js

@@ -27,6 +27,7 @@
             isActive,
         };
     });
+    const { resizerWidth } = secondLevelMenuNode.dataset;
     let resizeStartPositionX = 0;
     let secondMenuLevelCurrentWidth = secondLevelMenuNode.getBoundingClientRect().width;
     const collapseSecondLevelMenu = (event) => {
@@ -64,7 +65,7 @@
             return;
         }
 
-        const secondLevelMenuListWidth = secondLevelMenuWidth;
+        const secondLevelMenuListWidth = secondLevelMenuWidth - resizerWidth;
 
         secondLevelMenuNode.style.width = `${secondLevelMenuWidth}px`;
         secondLevelMenuNode.querySelectorAll('.ibexa-main-menu__tab-pane .ibexa-main-menu__items-list').forEach((itemList) => {

src/bundle/Resources/public/scss/_main-menu.scss

@@ -82,7 +82,7 @@
 
             .ibexa-main-menu {
                 &__items-list {
-                    width: calculateRem(216px);
+                    width: calculateRem(210px);
                     transition: width $ibexa-admin-transition-duration;
                     padding-top: calculateRem(8px);
                 }

src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level.html.twig

@@ -25,7 +25,11 @@
         {% endif %}
     {% endif %}
 
-    <div class="ibexa-main-menu__navbar ibexa-main-menu__navbar--second-level {{ extra_class }}" style="{{ second_menu_width_style }}">
+    <div
+        class="ibexa-main-menu__navbar ibexa-main-menu__navbar--second-level {{ extra_class }}"
+        style="{{ second_menu_width_style }}"
+        data-resizer-width="{{ resizer_width }}"
+    >
         <div class="tab-content ibexa-main-menu__tab-content">
             {% for child in current_item.children %}
                 <div