Navigation through dynamic pages polymer

Question

i'm working on a polymer webApp with spring-boot, so far I've did like two seperate apps because I can't figure out how to navigate from tab to tab, I'd really like to merge the two I don't mind having buttons to navigate please.

As u can see in the first picture there are tabs I would like to navigate through them the applications tab would for example take me to the app in the other picture. I search a lot through the web but all I could find are how to navigate between static content.

This is the first app

and its src

and this the other app

and its src

Answer 1

You can use the app-route component. https://elements.polymer-project.org/elements/app-route

Here's the polycast about the app-route. https://www.youtube.com/watch?v=iAgSvlYavX0&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=2

Basicly, you'll use the route and page attribute to set the route that is active. The switch between of what piece of code is active will be made using the iron-selector component.

Something like this:

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

<iron-selector attr-for-selected="route"
               selected="[[ page ]]"
               role="navigation">
    <a route="editor" href="/editor">Editor</a>
    <a route="analyze" href="/analyze">Analyze</a>
    <a route="community" href="/community">Community</a>
</iron-selector>

<iron-pages role="main"
            attr-for-selected="route"
            selected="[[ page ]]">
    <my-editor route="editor"></my-editor>
    <my-analyze route="analyze"></my-analyze>
    <my-community route="community"></my-community>
</iron-pages>

<script>
     Polymer({ 
         is:'my-element',
         properties: {
             page: {
                 type: String,
                 notify: true,
                 reflectToAttribute: true,
                 observer: "_pageChanged"
             }
         },

         observers: [
             "_routePageChanged(routeData.page)"
         ],

         attached: function(e) {
             // Lazyload the views as soon as the AppShell has been Painted
             this.importHref(
                 this.resolveUrl("my-editor.html"), null, null, true);
             this.importHref(
                 this.resolveUrl("my-analyze"), null, null, true);
             this.importHref(
                 this.resolveUrl("my-community"), null, null, true);

             // If the application is reloaded, redirect to /analyze
             if(this.page != "analyze"){
                 this.set("route.path", "/analyze");
             }
         },

         _changeRoute: function(e) {
             this.set("route.path", e.detail.requestRoute);
         },

         _routePageChanged: function(page) {
             this.page = page || "analyze";
         },
     })
</script>