i have seen this question Durandal js router setup and would like to ask add a type within the durandal main navigation ... here is my code in shell,js
define(function (require) { var router = require('plugins/router'); return { router: router, activate: function () { return router.map([ { route: ['', 'home'], title: 'Home', moduleId: 'MVVM/home/home', type: 'left', nav: true }, { route: 'pastpaper', title: 'PastPaper', moduleId: 'MVVM/pastpaper/pastpaper', type: 'left', nav: true }, // Account Controller urls { route: 'login', title: 'Login', moduleId: 'MVVM/account/login/login', type: 'right', nav: true } ]).buildNavigationModel() .mapUnknownRoutes('MVVM/not-found/not-found', 'not-found') .activate(); } }; });
and here is my shell.html
<div data-bind="css: { 'st-loader': router.isNavigating }" style="top: -5px; position: fixed;"><span class="l-1" style="background: #000000;"></span><span class="l-2" style="background: #000000;"></span><span class="l-3" style="background: #000000;"></span><span class="l-4" style="background: #000000;"></span><span class="l-5" style="background: #000000;"></span><span class="l-6" style="background: #000000;"></span></div> <!--header> <span> Examination PastPaper Archive </span> </header--> <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="#bs-example-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" href="#"> <i class="fa fa-home"></i> <span style="font-weight:bold">epa</span> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" data-bind="foreach: router.navigationModel"> <li data-bind="css: { active: isActive }"> <a data-bind="attr: { href: hash }, text: title"></a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li role="search"> <form> <input class="search-input" placeholder="Search Here" name="q" autocomplete="off" spellcheck="false" type="text"> </form> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <span>Dropdown</span> <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#/view/a">Option A</a></li> <li><a tabindex="-1" href="#/view/b">Option B</a></li> </ul> </li> <li><a href="#">Dashboard</a></li> <li data-bind="css: { active: router.navigationModel().isActive}"><a data-bind="attr: { href: router.convertRouteToHash('login') }"><i class="fa fa-lock"></i> Login/Register</a></li> <li class="loader"> <i class="fa fa-spinner fa-spin fa-2x"></i> </li> </ul> </div> </nav> <div class="page-host" data-bind="router: { transition:'entrance', cacheViews:true }"> </div>
how do I create a two navigation from the main nav like this sample over here https://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/app/ko/index.js
I want so that I can put one navigation on the right, like login and other navigation on the left...