Navigation menu item links do not use text-icon grouping for their down arrows.

[alan-cole]

Summary

While links now use text-icon to group the last word with the icon to allow for both to wrap together, this does not happen on the menu because the icon is added through javascript, and not through the twig template.

Steps to reproduce

View the primary navigation menu items when in drawer mode with expandable options.

Observed outcome

The arrows will not wrap as the screen width decreases.

Expected outcome

The arrows will should wrap as the screen width decreases.

[alan-cole]

We should update collapsible:

https://github.com/civictheme/uikit/blob/main/components/00-base/collapsible/collapsible.js#L46

If we add:

this.iconGroupEnabled = this.el.hasAttribute('data-collapsible-icon-group');

at line 40, then add:

  if (!this.panel.hasAttribute('data-collapsible-trigger-no-icon') && !this.trigger.querySelector('.ct-collapsible__icon')) {
    const iconEl = this.htmlToElement(this.icon);
    iconEl.classList.add('ct-collapsible__icon');
    // If multiple words - use last word and icon grouping.
    if (this.iconGroupEnabled) {
      const text = this.trigger.innerText.trim();
      const lastWordIndex = text.lastIndexOf(' ');
      const lastWord = lastWordIndex >= 0 ? text.substring(lastWordIndex + 1) : text;
      const firstWords = lastWordIndex >= 0 ? text.substring(0, lastWordIndex + 1) : '';
      const iconGroupEl = this.htmlToElement(`<span class="ct-text-icon__group">${lastWord} </span>`);
      iconGroupEl.append(iconEl);
      this.trigger.innerHTML = firstWords;
      this.trigger.append(iconGroupEl);
    } else {
      this.trigger.append(iconEl);
    }
  }

We then update navigation:

https://github.com/civictheme/uikit/blob/main/components/03-organisms/navigation/navigation.twig#L31

to:

{% set item_attributes = 'data-collapsible data-collapsible-collapsed data-collapsible-icon-group data-collapsible-group=' ~ menu_id ~ ' ' ~ (is_animated ? 'data-collapsible-duration=250' : 'data-collapsible-duration=0') %}

to include the data-collapsible-icon-group.