Help grouping child routes

Help Requests
1

Hello,

First, let me just say, I am primarily a designer but also part front-end developer so forgive me if this request seems elementary or is not appropriate for this forum. In a nutshell, I have child routes that I want to group and add a heading. I have reviewed the existing topics but didn’t find any matching what I am looking to do (or maybe I just don’t know enough to relate an existing topic to my request).

My route config file looks like this:

import { PLATFORM } from 'aurelia-framework';
const routes = [
    { route: ['', 'color'], name: 'colors',
        moduleId: PLATFORM.moduleName('./app/pages/colors'),
        nav: true,
        title: 'Colors',
        settings: {group: 'styles'}
    },
    { route: 'typography', name: 'typography',
        moduleId: PLATFORM.moduleName('./app/pages/typography'),
        nav: true,
        title: 'Typography',
        settings: {group: 'styles'}
    },
    { route: 'buttons', name: 'buttons',
        moduleId: PLATFORM.moduleName('./app/pages/buttons'),
        nav: true,
        title: 'Buttons,
        settings: {group: 'elements'}
    },
    { route: 'links', name: 'links',
        moduleId: PLATFORM.moduleName('./app/pages/links'),
        nav: true,
        title: 'Links',
        settings: {group: 'elements'}
    }
];
export {
    routes
};

And I would like it to render them like:
Styles

  • Colors
  • Typography

Elements

  • Buttons
  • Links

I am hoping there is a relatively easy way to do this but not certain if I can I utilize the “settings” group I have created or if I need to break them out into different child routes. If different child routes, do I need different viewports?

Thanks,
Wendee

1 Like
2

One solution is to put up two things: a) a value converter to do the grouping itself. b) do the rendering using the particular css framework you are using.

Check this codesandbox: https://codesandbox.io/embed/vvo7r15020?fontsize=14

Best regards.

4 Likes
3

Thank you @ormasoftchile! The example looks great! I don’t really know much about value converters (yet) and I will let you know how it goes!

Thanks!
Wendee

2 Likes