materialize-meteor icon indicating copy to clipboard operation
materialize-meteor copied to clipboard

Routing (iron:router) not working on navbar <a> click and navbar not closing properly

Open dragGH102 opened this issue 8 years ago • 0 comments

Routing (iron:router) is set up correctly. When I do routing anywhere else than within nav tags it just works. When the link is it the nav it doesn't (sometimes on the 2nd attempt which doesn't make any sense). Also the navbar doesn't close itself despiste closeOnClick option and the overlay stay there(every time, so I set up a work around)

client/views/navbar/navbar.html

    <template name="navbar">
        <nav>
            <ul id="slide-out" class="side-nav">
                <li><a id='configuration' href="#">{{i18n 'navbar.l.configuration'}}</a></li>
            </ul>
            <a href="#" data-activates="slide-out" class="button-collapse" style="margin-left: 5vw;"><i class="mdi-navigation-menu"></i></a>
        </nav>
    </template>

client/views/navbar/navbar.js

 Template.navbar.events({
    "click a": function(evt){
        evt.preventDefault();

       switch(evt.currentTarget.id){
           case 'configuration':
               Router.go("configuration");
               break;
       }

       // workaround for navbar not closing properly on <a> clicks
       $('.button-collapse').sideNav('hide');
       if($('#sidenav-overlay').length>0){
           $('#sidenav-overlay').hide();
       }


   }
});

Template.navbar.onRendered(function(){
        // init navbar button
        $('.button-collapse').sideNav({
                menuWidth: 250,
                edge: 'left', // Choose the horizontal origin
                closeOnClick: true // Closes side-nav on <a> clicks
            }
        );
    });

shared/libs/routing.js

Router.configure({
        layoutTemplate: 'common',
        loadingTemplate: 'loading'
    });

    Router.route('/configuration', {
        name:'configuration',
        template:'configuration',
        onBeforeAction: function(){
            if (Session.get('cordovaReady')) { 
                this.layout(null);
                this.render("configuration");
            }
            else { // "loop" rending "loading" screen until cordova is not ready
                this.render('loading');
                this.next();
            }
        }
    });

I was suspecting it was about the onBeforeAction hook but I tried to remove it and I get the same issue. Strangely if I replace Router.go with Router.current().render('configuration'); , it works (but it has drawbacks on following interactions). Similarly for navbar not closing workaround

dragGH102 avatar Oct 15 '15 01:10 dragGH102