IBX-11909: new main menu design (#1944)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: tischsoic

src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js

@@ -260,7 +260,9 @@ const hideAll = (baseElement = doc) => {
     const tooltipsNode = baseElement.querySelectorAll(TOOLTIPS_SELECTOR);
 
     for (const tooltipNode of tooltipsNode) {
-        bootstrap.Tooltip.getOrCreateInstance(tooltipNode).hide();
+        const tooltipInstance = bootstrap.Tooltip.getInstance(tooltipNode);
+
+        tooltipInstance?.hide();
     }
 };
 const observe = (baseElement = doc) => {

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

@@ -1,6 +1,8 @@
 @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/custom.scss' as *;
 @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *;
 @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/mixins/tooltips' as *;
+@use '@ibexa-admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/variables/colors' as *;
+@use '@ibexa-admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/variables/typography' as *;
 @use 'sass:color';
 
 .ibexa-tooltip {
@@ -61,7 +63,7 @@
         border-radius: $ibexa-border-radius-small;
         background-color: $ibexa-color-white;
         color: $ibexa-color-dark;
-        font-size: $ibexa-text-font-size;
+        font-size: $text-font-size-m;
         text-align: left;
         line-height: calculateRem(21px);
         box-shadow: 0 calculateRem(4px) calculateRem(6px) rgba(135, 135, 135, 0.35);
@@ -76,7 +78,7 @@
     }
 
     &--navigation {
-        @include tooltip-variant($ibexa-color-dark, $ibexa-color-complementary-primary-400);
+        @include tooltip-variant($color-neutral-10, $color-primary-80);
 
         .ibexa-tooltip {
             &__inner {

src/bundle/Resources/public/scss/_custom-tooltip.scss

@@ -2,11 +2,33 @@
 @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *;
 
 .ibexa-main-menu-popup {
+    background-color: $ibexa-color-dark;
+    border-color: $ibexa-color-dark-500;
+
+    &__item-content {
+        color: $ibexa-color-white;
+        padding: calculateRem(7.5px) calculateRem(12px);
+
+        > .ibexa-main-menu__item-text-column {
+            padding: 0;
+        }
+
+        &:hover {
+            color: $ibexa-color-complementary-primary-400;
+            background-color: transparent;
+        }
+
+        &--current {
+            > .ibexa-main-menu__item-text-column {
+                color: $ibexa-color-complementary-primary-400;
+            }
+        }
+    }
+
     &__group-item {
         flex-direction: column;
         height: 100%;
         align-items: initial;
-        border-top: calculateRem(1px) solid $ibexa-color-info-800;
 
         .ibexa-popup-menu {
             &__item {
@@ -15,14 +37,25 @@
         }
     }
 
-    .ibexa-main-menu-popup &__group-name {
-        color: $ibexa-color-light-700;
+    &__group-item-content {
+        color: $ibexa-color-dark-300;
+        padding: 0;
+    }
+
+    &__group-name {
+        border-top: calculateRem(1px) solid $ibexa-color-dark-500;
+        color: $ibexa-color-dark-500;
         font-size: $ibexa-text-font-size-small;
         cursor: initial;
+        padding: calculateRem(1px) 0;
+        margin-left: calculateRem(12px);
+        margin-top: calculateRem(8px);
+        border-radius: 0;
+        width: initial;
 
         &:hover {
             background-color: initial;
-            color: $ibexa-color-light-700;
+            color: $ibexa-color-dark-500;
         }
     }
 }