I realise the following is not very helpful as I've pasted my code solution and didn't have the time to explain it.... Now I'm looking at it wondering what I was trying to solve. Anyway, if I remember I'll come back and fill in the blanks...

https://www.mediacurrent.com/blog/simplify-menu-and-twig-macros/

menu--main.html.twig

{# Get menu items #}
{% set items = simplify_menu('main') %}

  {# Iterate menu tree #}
  {% for menu_item in items.menu_tree %}

    {# Check if this is the active item. #}
    {% set active = (menu_item.active) ? ' is-active' : '' %}

    {# Check if this item is in the active trail. #}
    {% set active = active ~ ((menu_item.active_trail) ? ' is-active-trail' : '') %}

    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children {{ active }}">
      <a href="{{ menu_item.url }}" class="{{ active }}"><span>{{ menu_item.text }}</span></a>
      {% if menu_item.submenu %}

        <ul class="sub-menu">
          {% for submenu_item in menu_item.submenu %}
            {% set subactive = (submenu_item.active) ? ' is-active' : '' %} {# Check if this is the active item. #}
            {% set subactivetrail = (submenu_item.active_trail) ? ' is-active-trail' : '' %} {# Check if this item is in the active trail. #}
            <li class="menu-item menu-item-type-post_type menu-item-object-page {{ subactivetrail }}">
              <a href="{{ submenu_item.url }}" class="{{ subactive }}"><span>{{ submenu_item.text }}</span></a>
            </li>
          {% endfor %}
        </ul>

      {% endif %}
    </li>

  {% endfor %}

menu--main-sub.html.twig