Solved: Hamburgers and Child Routers

Help Requests
1

I have an App, built with the CLI and the routing template – so it has a nav-bar.html file

I have two child routers, each with their own copies of the contents of the nav-bar.html file

When a child router is running, it’s menu takes over the menu from the App – all is well

When I shrink the window down until the Hamburger menu becomes visible – it contains the menu from the App not from the child router !?! All is not well…

Why isn’t my child router’s menu being loaded into the Hamburger?

How can I reload (?) the Hamburger menu from the child router ?

Am I doing something wring in having multiple copies of the contents of nav-bar.html ?

1 Like
4

I built the CLI version of a Routed App and replaced child-router.html with this (see below) and the result is that no matter how deep I am in the child routers the hamburger menu only shows the app entries

Is there any way to reload the hamburger menu with the child router entries?

<template bindable="router">
  <section class="au-animate">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-navbar-collapse-1">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" click.delegate="gotoPipeline()" href="javascript: void(0)">
          <i class="fa fa-arrow-left"></i>
          <span>${router.title}</span>
        </a>
      </div>

      <div class="collapse navbar-collapse" id="navigation-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
            <a data-toggle="collapse" data-target="#navigation-navbar-collapse-1.in" href.bind="row.href">${row.title}</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="loader" if.bind="router.isNavigating">
            <i class="fa fa-spinner fa-spin fa-2x"></i>
          </li>
        </ul>
      </div>

    </nav>
    <div>
      <router-view swap-order="after"></router-view>
    </div>
  </section>
</template>
5

Fixed:

 Easy solution -- use a different ID for the child's hamburger menu

navigation-navbar-collapse-1 => navigation-navbar-collapse-101

2 Likes