Materialize.css sidemenu works randomly


#1

I’m using materialize.css but the sidemenu seems unpredictable. It usually works fine in all major browsers in the localhost but on production clicking on the sidemenu doesn’t make it appear (ridersam.meteor.com). I’m at a loss to what I’m doing wrong in this. I would bank on some Karma for your help in this :wink: The code for my header.html and header.js is as follows:

HEADER.html

<template name="header">
    	{{#if currentUser}}
    	<div class="navbar-fixed">
    		<nav role="navigation" class="amber accent-3">
    			<div class="nav-wrapper container">
    				<a href="#" class="brand-logo center disable-link-cursor">{{navTitle}}</a>
    				<a href="#" class="nav-back-button {{backButtonActive}}">
    					<i class="mdi-navigation-chevron-left" style="font-size: 3em;"></i>
    				</a>
    				<a href="#" data-activates="slide-out" class="button-collapse show-on-large {{buttonCollapseActive}}">
    					<i class="mdi-navigation-menu"></i>
    				</a>
    		
    				{{#if onActivityList}}
    					<a href="{{ pathFor 'activitySubmit' }}" class="right"><i class="mdi-content-add" style="font-size: 3em;"></i></a>
    				{{/if}}
    
    				<ul id="slide-out" class="side-nav amber accent-3">
    						<center><i class="ion-android-person custom-lg"></i></center>
    						<li class="{{ activeRouteClass 'rideList' }}"><span><i class="ion-android-bus liner"></i></span><a href="{{ pathFor 'ridesList' }}"><b>RIDES</b></a></li>
    
    						<li class="{{ activeRouteClass 'activityList' }}"><span><i class="ion-android-time liner"></i></span><a href="{{ pathFor 'activityList' }}"> <b>SCHEDULED</b></a></li>
    
    						<li class="{{ activeRouteClass 'mapCanvas' }}"><span><i class="ion-pull-request liner"></i></span><a href="{{ pathFor 'mapCanvas' }}"> <b>REQUEST RIDE</b></a></li>
    
    						<li><span><i class="ion-log-out liner"></i></span><a id="logout-button" href="#" ><b>LOG OUT</b></a></li>
    				</ul>
    			</div>
    		</nav>
    	</div>
    	{{/if}}	
    </template>

HEADER.Js

Template.header.onRendered(function () {
	$(".button-collapse").sideNav({
		menuWidth: 300, // Default: 240
		edge: "left",
		closeOnClick: true
	});
});

Template.header.helpers({
	navTitle: function () {
		switch (Router.current().route.getName()) {
			case "activityList": return "Your Scheduled";
			case "login": return "Log In";
			case "register": return "Register";
			case "activitySubmit": return "Schedule Route";
			case "activityPage": return this.title;
			default: return "RideGlobus";
		}
	},
	onActivityList: function () {
		return Router.current().route.getName() === "activityList";
	},
	buttonCollapseActive: function () {
		return isBackPage() ? "hide-display" : "show-display";
	},
	backButtonActive: function () {
		return isBackPage() ? "show-display" : "hide-display";
	},
	activeRouteClass: function () {
		var args = Array.prototype.slice.call(arguments, 0);
		args.pop();

		var active = _.any(args, function (name) {
			return Router.current() && Router.current().route.getName() === name;
		});

		return active && "active";
	}
});

Template.header.events({
	"click #logout-button": function (e) {
		e.preventDefault();

		Meteor.logout(function (error) {
			if (error) {
				alert("We could not log you out at the moment. Please try again later.");
			} else {
				Router.go("login");
			}
		});
	},
	"click .nav-back-button": function (e) {
		e.preventDefault();
		window.history.back();
	}
});

isBackPage = function () {
	switch (Router.current().route.getName()) {
		case "activitySubmit": return true;
		case "activityPage": return true;
		case "ridePage": return true;
		case "mapCanvas": return true;
		default: return false;
	}
}

#2

Your issue is the {{#if currentUser}} block. Your header template renders calling the $("button-collapse").sideNav({}) but since the network latency is greater on published app, the data for the current user has not been sent down yet thus causing the {{#if currentUser}} to be false and the elements inside it to not be in the DOM and thus $("button-collapse") doesn’t match anything.


#3

@copleykj Thanks a million times Kelly! Removing that seemed to do the trick. However,I have a login page and I donot want the header to appear on that. The header is in ‘includes’ and included in all the pages by default. How can I stop it to appear on the login page without using the {{#if currentUser}}?


#4

I currently accomplish this using layout templates. One layout template can be blank and have the content rendered to it that doesn’t need the header/footer etc. Then another can contain the header/footer and have the content rendered in for routes that need to include them.

The way you accomplish this depends on the router you use, but is easily accomplished in both iron:router or kadira:flow-router