What's the best practice to combine with core-submenu?

[robdodson]

Combining core-pages with core-menu is really easy because they both extend core-selector and can share a selected scope variable. But what's the best way to combine core-pages with a core-menu that also contains core-submenu items? Clicking on a core-submenu will not update the parent scope variable so it's confusing to wire these things together, although logically it seems like they should work.

[tantive]

I am facing the same problem here. Getting the submenus to work is possible with the help of multiple selected variables and some expressions, although it feels completely unintuitive. Personally, I gave up when I tried to combine it with routing provided by the flatiron-director.

So what's the recommended way of combining core-menu, core-submenu and flatiron-director while using a single selected scope variable?

<core-menu selected="0" selectedItem="{{selectedItem}}" valueattr="id" id="core_menu" theme="core-light-theme">
          <core-item id="home" icon="home" label="Home" horizontal center layout active></core-item>

      <core-submenu selected="{{cvselected}}" selectedItem="{{cvselectedItem}}" valueattr="id" id="cv" icon="work" label="Curriculum Vitae">
              <core-item id="cvprojects" icon="list" label="Projects"></core-item>
                  <!-- ... -->
      </core-submenu>

      <core-submenu selected="{{pubsselected}}" selectedItem="{{pubsselectedItem}}" valueattr="id" id="publications" icon="folder" label="Publications">
              <core-item id="pubsJC" icon="list" label="Journal/Conference"></core-item>
                  <!-- ... -->
      </core-submenu>

          <!-- ... -->
</core-menu>

...

<core-pages selected="{{((cvselectedItem.label.length > 0) || (pubsselectedItem.label.length > 0)) ? null : selectedItem.id}}" valueattr="id" notap id="core_pages" fit>
        <section id="home"></section>
                <!-- ... -->
</core-pages>

<core-pages selected="{{cvselected}}" valueattr="id" notap id="core_pages" fit>
        <section id="cvprojects"></section>
                <!-- ... -->
</core-pages>

<core-pages selected="{{pubsselected}}" valueattr="id" notap id="core_pages" fit>
        <section id="pubsJC"></section>
                <!-- ... -->
</core-pages>