custom class prop and support for iconUrl fallback in nav items

[Gaetanbrl]

We need to enhance the NavItem components (Link, DropDown, DropDown sub items) with two improvements:

1 - new customClass prop

Currently, only static and conditional classes (active, disabled) are applied.

This enhancement will merge classCustom dynamically with existing classes, so that extra classes can be applied per item.

2 - New propr iconUrl fallback

Currently, we can only use icon from CSS sheet (e.g iconoir).

This proposal allow to render using props.item.iconUrl if provided.

Otherwise, fallback to the existing props.item.icon CSS class

Example with Link

/public/config.json :

    {
      "label": "Catalogue",
      "i18n": "catalogue",
      "url": "/datahub",
      "activeAppUrl": "/datahub",
      "customClass": "custom-catalog-btn",
      "iconUrl": "/public/custom.svg"
    }

/public/custom.css :

.custom-catalog-btn {
    color: red;
}

HTML :

<div class="lg:flex hidden">
  <a href="/datahub" class="nav-item custom-catalog-btn">
    <div class="flex items-center">
      <!-- Icon from URL (highest priority) -->
      <img src="/public/icon_catalogApp.svg" alt="" class="item-icon" style="width: 0.9rem; height: 0.9rem;">
      <span class="ml-1 first-letter:capitalize">Catalogue</span>
    </div>
  </a>
</div>