Flowrouter and a second navigation bar

help
1

Hey,

I have a second navigation bar which is only visible inside one particular menu link.

The second navigation bar should therefor only show when I’m inside the particular menu link.

How do I solve the route logic of the second navigation bar when I only want to change the content of the container INSIDE the particular menu link:

grafik
grafik1112×787 18.4 KB

Again, whenever I navigate inside the second navigation bar, I only want to redraw the container inside the particular link and not the whole page including the submenu. Is this actually possible? What is the best approach for that?

Currently, I have one layout with one route.

Thanks in advance!

2

I found it easiest to use BlazeLayout with multiple data fields and two Template.dynamic helpers like so:

// layout.jade
template(name='layout')
  +mainMenu
  .container
    .left
      +Template.dynamic(template=submenu)
    .right
      +Template.dynamic(template=content)

// routes.js
FlowRouter.route('/link4', {
  action() {
    BlazeLayout.render('layout', { submenu: 'submenuForLink4', content: 'contentForSublink1' });
  }
});
FlowRouter.route('/link4/sublink2', {
  action() {
    BlazeLayout.render('layout', { submenu: 'submenuForLink4', content: 'contentForSublink2' });
  }
});

Apologies if you’re not using blaze, but same should apply to other view layers?

1 Like
3

Try using queryParams:

your Sublink-1 could link to /link4?submenu=4, or a click on the submenu button could trigger a call to FlowRouter.setParams({submenu: "4"}). This should not trigger a reload of the whole page.

Then in your Dynamic content component you could use FlowRouter.getQueryParam('submenu') to get the sublink-id, and act accordingly.

Or, if using React, send it as a prop to your component in your FlowRouter router.

1 Like
4

Thank you very much, both of you! Yep I’m using blaze.

I went for coagmano’s approach for the navigation bar with a second layout/second router, but will use eleventy’s suggestion for my component logic.