feat(menu): Revamp navigation and styles - FRONT-3697

src/implementations/twig/components/menu/menu-item.html.twig

@@ -34,18 +34,34 @@
 <li class="{{ _menu_list_item_class }}" {{ _menu_list_item_attributes }}>
   <a href="{{ item.path }}" class="{{ _menu_item_class }}" {{ _menu_item_attributes }}>
     {{- item.label -}}
-    {%- if (item.children is defined and item.children is not empty and item.children is iterable) or item.external -%}
+    {%- if item.external -%}
       {% include '@ecl/icon/icon.html.twig' with {
         icon: {
           path: icon_path,
-          name: item.external ? 'external' : 'corner-arrow',
+          name: 'external',
           size: 'xs',
-          transform: item.external ? '' : 'rotate-90',
+          transform: 'rotate-90',
         },
-        extra_classes: item.external ? 'ecl-menu__link-icon--external ecl-menu__link-icon' : 'ecl-menu__link-icon',
+        extra_classes: 'ecl-menu__link-icon--external ecl-menu__link-icon',
       } %}
-    {% endif %}
+    {%- endif -%}
   </a>
+  {%- if (item.children is defined and item.children is not empty and item.children is iterable) -%}
+  {% include '@ecl/button/button.html.twig' with {
+    variant: 'primary',
+    type: 'button',
+    disabled: false,
+    icon: {
+      name: 'corner-arrow',
+      size: 'xs',
+      path: icon_path,
+      transform: 'rotate-180',
+    },
+    icon_position: 'after',
+    extra_classes: 'ecl-menu__button-caret',
+    extra_attributes: [{ name: 'data-ecl-menu-caret' }],
+  } %}
+  {%- endif -%}
 {% if item.children is defined and item.children is not empty and item.children is iterable %}
   <div
     class="ecl-menu__mega"

src/implementations/twig/components/menu/menu.html.twig

@@ -123,7 +123,7 @@
               icon: {
                 path: _icon_path,
                 name: 'corner-arrow',
-                size: 's',
+                size: 'xs',
                 transform: 'rotate-270',
               },
               extra_classes: 'ecl-button__icon ecl-button__icon--before',