Creating a NavigationStrategy in Aurelia

Question

I'm trying to use Aurelia as my platform for a custom Wordpress theme.

What I want to do is define my navigation menu in Wordpress, use the Wordpress plugin for menus to expose the menus through the Wordpress API as a JSON string and then building the navigation menu in Aurelia.

Everything I have found so far involves creating a simple one line menu.

Has anyone done this or can point me in the right direction?

Answer 1

Since you're using server-side data to build your navigation menu, you might as well let the server do the hard work and let it generate a ready-to-use configuration for your router.

Let your plugin generate JSON like this:

{
  "routes": [
    {
      "route": "\"...\"",
      "moduleId": "\"...\"",
      "settings": {
        "childRoutes": [
          {
            "route": "\"...\"",
            "moduleId": "\"...\"",
          }
        ]
      }
   ]
}

Then in your root view model's configureRouter you could do something like this:

async configureRouter(config, router) {
  const resp = await http.fetch("api/menu-plugin-uri");
  const json = await resp.json();
  config.map(json.routes);
}

The child routes are stored in the settings object of the config, meaning we can use it for building a navigation menu and we can access it in child routes like so:

configureRouter(config, router) {
  const parentConfig = router.parent.currentInstruction.config;
  config.map(parentConfig.childRoutes);
}

That doesn't give you nice NavModels with isActive and everything, but this is about as good as it gets when it comes to nested navigation menu's currently.

I'm actually working on a plugin myself to try and address some of these limitations, though NOT ready for production yet.