Question - App Route with Sub Paging.

[RossLegalSuite]

I've read : https://www.polymer-project.org/2.0/toolbox/case-study#routing
And: https://github.com/PolymerElements/app-route

I think I am just confused how to use the subrouting component, but the documents and example I have read hasn't really gotten me anywhere.

If anyone could point out the elephant in the room for me that would be great.

What am I trying to Achieve?
I have a list of items(called matters) which I display on my-matters.html (this page currently calls another custom element called matters-list.html which brings through the list)
http://127.0.0.1:8081/matters

I want to be able to click on one of these and go to a details page (I've built this template called matters-details.html
EG: http://127.0.0.1:8081/matters/123

The question :

How do I handle the routing on the my-matters.html
my understanding is that if I add a button to hit the href /matters/123 there should be some app route logic on the my-matter.html page that knows to close the matter-list and open the matter detail?

Or am I going about this wrong and need to add two pages
my-matters-list.html
my-matters-details.html
and in the my-app routing use both there under the url /matters ?

Here is my code taken from the starter kit mostly: my-app.html

`

<style> :host { --app-primary-color: #4285f4; --app-secondary-color: black;

    display: block;
  }

  app-drawer-layout:not([narrow]) [drawer-toggle] {
    display: none;
  }

  app-header {
    color: #fff;
    background-color: var(--app-primary-color);
  }

  app-header paper-icon-button {
    --paper-icon-button-ink-color: white;
  }

  .drawer-list {
    margin: 0 20px;
  }

  .drawer-list a {
    display: block;
    padding: 0 16px;
    text-decoration: none;
    color: var(--app-secondary-color);
    line-height: 40px;
  }

  .drawer-list a.iron-selected {
    color: black;
    font-weight: bold;
  }
</style>

<app-location
    route="{{route}}"
    url-space-regex="^[[rootPath]]">
</app-location>

<app-route
    route="{{route}}"
    pattern="[[rootPath]]:page"
    data="{{routeData}}"
    tail="{{subroute}}">
</app-route>

<app-route
route="{{subroute}}"
pattern="/:id"
data="{{subrouteData}}">

<app-drawer-layout fullbleed force-narrow narrow="{{narrow}}">
  <!-- Drawer content -->
  <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="home" href="[[rootPath]]home">Welcome</a>
      <a name="matters" href="[[rootPath]]matters">Matters</a>
      <a name="view2" href="[[rootPath]]view2">View Two</a>
      <a name="view3" href="[[rootPath]]view3">View Three</a>
    </iron-selector>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout has-scrolling-region>

    <app-header slot="header" condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
        <div main-title>LegalSuite Software</div>
      </app-toolbar>
    </app-header>

    <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <my-home name="home"></my-home>
      <my-matters name="matters"></my-matters>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-view404 name="view404"></my-view404>
    </iron-pages>
  </app-header-layout>
</app-drawer-layout>

<script> // Gesture events like tap and track generated from touch will not be // preventable, allowing for better scrolling performance. Polymer.setPassiveTouchGestures(true); class MyApp extends Polymer.Element { static get is() { return 'my-app'; } static get properties() { return { page: { type: String, reflectToAttribute: true, observer: '_pageChanged', }, routeData: Object, subroute: Object, // This shouldn't be neccessary, but the Analyzer isn't picking up // Polymer.Element#rootPath rootPath: String, }; } static get observers() { return [ '_routePageChanged(routeData.page)', ]; } _routePageChanged(page) { // If no page was found in the route data, page will be an empty string. // Default to 'home/Welcome' in that case. this.page = page || 'home'; // Close a non-persistent drawer when the page & route are changed. if (!this.$.drawer.persistent) { this.$.drawer.close(); } } _pageChanged(page) { // Load page import on demand. Show 404 page if fails const resolvedPageUrl = this.resolveUrl('my-' + page + '.html'); Polymer.importHref( resolvedPageUrl, null, this._showPage404.bind(this), true); } _showPage404() { this.page = 'view404'; } } window.customElements.define(MyApp.is, MyApp); </script> ` my-matters.html : `

<style include="shared-styles"> :host { display: block;

    padding: 10px;
  }
</style>

<div class="card">
  <div class="circle">M</div>
  <h1>Matters</h1>
  <matter-list></matter-list>
  //example
  <matter-detail linkedmatterid="123"></matter-detail>

<script> class Matters extends Polymer.Element { static get is() { return 'my-matters'; } }

window.customElements.define(Matters.is, Matters);

</script>

`