I’m using the Inspinia Theme and Meteor-roles.
I’m using the roles package to show different navigation menus to different users depending on their role. I’m doing this by using the isInRole handlebars which is apart of Meteor-roles (scroll down to “-- Client --” to view this section).
The issue I’m having is whenever I use the isInRole handlebars it stops the collapsible navigation (Example: The “Dashboards”, “Graphs”, Forms" here) from working most of the time. If I click around to a few of my other pages and then go back, or refresh the page a bunch of times then sometimes it’ll start to work, but then I’ll refresh the page and it’ll stop again. Also, if I go directly to one of the pages that is in the collapsed menu (ie. “Users” in my screenshot below) then it stays open and seems to work as it should.
Here’s how I have it setup:
<template name="navigation">
{{#if isInRole 'admin'}}
{{> adminNav }}
{{/if}}
{{#if isInRole 'partner'}}
{{> partnerNav }}
{{/if}}
</template>
Here’s an example of the adminNav template, I removed a few things to try and make it less cluttered, but it still has the same issues (the collapsible part of it is near the bottom):
<template name="adminNav">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<!-- Close canvas menu used only on OffCanvas page -->
<!-- You can remove this tag if you dont use offCanvas menu -->
<a class="close-canvas-menu"><i class="fa fa-times"></i></a>
<!-- End offCanvas menu toggle -->
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element"> <span>
<img alt="image" class="img-circle" src="{{currentUser.profile.picture}}" width="48" height="48"/>
</span>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">{{currentUser.profile.name}}</strong>
</span> <span class="text-muted text-xs block">{{currentUser.accountType}} <b class="caret"></b></span> </span> </a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li><a href="{{pathFor route='profile'}}">Profile</a></li>
<li><a href="{{pathFor route='mailbox'}}">Mailbox</a></li>
<li class="divider"></li>
<li><a href="{{pathFor route='login'}}">Logout</a></li>
</ul>
</div>
<div class="logo-element">
X
</div>
</li>
<li class="{{isActiveRoute regex='/'}}">
<a href="{{pathFor route='dashboard'}}"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboard</span> </a>
</li>
<!-- Here is the collapsible part of the navigation -->
<li class="{{isActiveRoute regex='manage|manage-alerts'}}">
<a href="#"><i class="fa fa-gears"></i> <span class="nav-label">Manage</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse {{isActiveRoute regex='manage|manage-alerts' className='in'}}">
<li class="{{isActiveRoute regex='manage'}}"><a href="{{pathFor route='manage'}}"><i class="fa fa-users"></i> Users</a></li>
<li class="{{isActiveRoute regex='manage-alerts'}}"><a href="{{pathFor route='manage-alerts'}}"><i class="fa fa-bell"></i> Alerts</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</template>
Closed:
Open:
Any assistance here would be greatly appreciated, I’ve searched around quite a lot but can’t seem to find any info on why this might be doing this or how I can solve this issue.