Nested layouts

[RoenLie]

Hey! just came across this library and it looks promising. Looking through the documentation I see no mention of the ability to nest layouts to be able to reuse certain components throughout the application. Is this just me not finding the correct documentation, or is it not a feature you plan on supporting?

[jakewhiteley]

Hi @RoenLie,

I'm not sure I fully understand - could you give an example of what you mean?

[RoenLie]

Sure!

In most of my projects I end up with a layout structure that is as follows.

• main layout ( header, sidebar )
  • sub layout 1 ( additional sidebar )
  • route 1
  • route 2
  • route 3
  • sub layout 2 ( now footer instead )
  • route 1
  • route 2
  • rout 3
• secondary layout ( another type of header & no sidebar )
  • route 1
  • route 2

This can be acomplished in other routers such as vaadin-router, by giving routes children routes recursively.

In this example there are 4 routes. / - takes you to the main layout without any child components /dashboard - takes you to the main layout component and puts the dashboard component inside the main layout. /list - puts the list component inside the main layout component. /list/sub - puts the sublist component inside the list component which is inside the main layout component.

{
  name:     'home',
  path:     '/',
  component: 'main-layout',
  children: [
    {
      name:   'dashboard',
      path:   '/dashboard',
      component: 'dashboard'
    },
    {
      name:   'list',
      path:   '/list',
      component: 'list',
      children: [
        {
          name: 'sublist',
          path: '/sub',
          component: 'sublist'
        }
      ]
    },
  ],
}

[jakewhiteley]

Strictly speaking, Taxi isn't really a routing engine! Its specifically for dealing with transitions between pages/content on your website where the routing can inform how to transition.

What you asked is pretty easy to achieve though. I would just wrap the whole page in Taxi so that the footer, header, sidebars (or lack thereof) is entirely contained within the data-taxi-view for that page.

By default Taxi only fetches and swaps 1 element from the target page into the current page - so by including all the layout within that element, you get what you want :)

[RoenLie]

Thank you for taking the time to answer :)

Your suggestion for how it could be accomplished means that I would have to include the different sublayout components in each view that used them, which is the exact issue that layouts and sublayouts attempt to fix. But as you explained Taxi is not designed for handling that type of SPA routing systems.

Your transitioning system looks very cool, and if in the future there was some sort of support for nested routes like I explained, I would be interested in trying it out at that point!

Good job so far and good luck in the further development of the library!