Menu and Dropdown Menu issue

1

I am trying to have only Home show all the time, with the rest of the routes configured in app.js showing up in a dropdown.

I have the dropdown working, but the routes also show up outside the dropdown along with the Home route.

app.js:

import {PLATFORM} from 'aurelia-pal';

export class App {
  configureRouter( config, router )
  {
    config.title = 'ARIS';
    config.options.pushState = true;
    config.options.root = '/';

    config.map([
      {
        route: '', 
        name: 'home', 
        moduleId: PLATFORM.moduleName('home'), 
        nav: true, 
        title: 'Home',
      },
      {
        route: 'login', 
        name: 'login', 
        moduleId: PLATFORM.moduleName('login'), 
        nav: false
      },
      {
        route: 'customer', 
        name: 'customer', 
        moduleId: PLATFORM.moduleName('customer'), 
        nav: true, 
        title: 'Customer',
        settings: {dropdown: true}
      },
      {
        route: 'search', 
        moduleId: PLATFORM.moduleName('search'), 
        nav: true, 
        title: 'Search/Worklist',
        settings: {dropdown: true}
      },
      ]);

    config.mapUnknownRoutes('home');
    config.fallbackRoute('home');    
    this.router = router;
  }
}

app.html:

<template>
  <require from="./styles.css"></require>
  <ul class="nav navbar-nav">
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a if.bind="!nav.settings.dropdown" 
            data-toggle="collapse" 
            data-target="#skeleton-navigation-navbar-collapse.in" 
            href.bind="row.href">${row.title}</a>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li repeat.for="nav of router.navigation" class.bind="nav.isActive ? 'active' :''">
                <a if.bind="nav.settings.dropdown"
                    href.bind="nav.href">${nav.title}</a>
             </li>
        </ul>
    </li>
</ul>
  <div class="container-md">
    <div class="row">
      <home class="col-sm-5 col-md-4"></home>
    </div>
    <div class="row"></div>
      <router-view class="col-lg"></router-view>
    </div>
  </div>
</template>
1 Like
2 
<ul class="nav navbar-nav">
    <li repeat.for="row of router.navigation" ...>
        <a if.bind="!nav.settings.dropdown" ...>

You are calling it row and then later checking for nav.settings, of course it will always be falsy, and so all your <a>'s show up.

1 Like
3

Thank you, I did not catch that simple error.

It fixed my problem.

1 Like