categories.js

Categories = new Mongo.Collection('categories');


if (Meteor.isServer) {
    Categories.allow({
        insert: function(userId, doc) {
            return true;
        },

        update: function(userId, doc, fieldNames, modifier) {
            return true;
        },

        remove: function(userId, doc) {
            return true;
        }
    });
}

home_controller.js

HomeController = RouteController.extend({

    subscriptions: function() {
        this.subscribe('categories');
        this.subscribe('photos');
    },
    data: function () {
        console.log(this.params.name);
        Session.set('category', this.params.name);
    },
    action: function () {
        this.render('MasterLayout', {});
    }
}

list_categories.html

<template name="ListCategories">
    <ul>
        {{#each Categories}}
        <li id="categories"><a class="btn btn-default" href="/{{name}}">{{name}}</a></li>
        {{/each}}
    </ul>
</template>

list_categories.js

Template.ListCategories.helpers({
	Categories: function() {
		return Categories.find();
	}
});

list_photos.html

<template name="ListPhotos">
    <div id='photos'>
        <div class='page-header'>
            <h1>
        <small>
        	{{#if catnotselected}}
        		Photos
        	{{else}}
        		{{category}}  Photos
    		{{/if}}
		</small>
      </h1>
        </div>
        <div id='mainContent'>
            {{#each photolist}} {{>photo}} {{else}} {{#if catnotselected}}
            <div class='page-header'>
                <h1><small>Select a category.</small></h1></div>
            {{else}}
            <div class='page-header'>
                <h1><small>No photos in this category.</small></h1></div>
            {{/if}} {{/each}}
        </div>
    </div>
</template>

list_photos.js

Template.ListPhotos.helpers({
    catnotselected: function() {
        return Session.equals('category', null);
    },
    category: function() {
        return Session.get('category');
    }
});

master_layout.html

<template name="MasterLayout">
    <div class="navbar">
        <div class="container">
            <div class="navbar-inner">
                <a class="brand btn" href="/"><img style="height: 40px; width: 135px;" src="img/logo.png" />
                    <p>Photos</p>
                </a>
                <div id="login-button" class="btn btn-default pull-right">
                    {{> loginButtons}}
                </div>
            </div>
        </div>
    </div>
    <div class='container-fluid'>
        <div class='row'>
            <div class='col-xs-12 text-center'>
                {{> yield 'categories'}}
            </div>
            <div class='col-xs-10 col-xs-offset-1 text-center'>
                {{> yield 'photos'}}
            </div>
        </div>
    </div>
</template>

master_layout.js

Template.MasterLayout.onCreated(function() {
    Session.set('category', null);
});

photos.js

Photos = new Mongo.Collection('photos');


if (Meteor.isServer) {
    Photos.allow({
        insert: function(userId, doc) {
            return true;
        },

        update: function(userId, doc, fieldNames, modifier) {
            return true;
        },

        remove: function(userId, doc) {
            return true;
        }
    });
}

routes.js

Router.configure({
    layoutTemplate: 'MasterLayout',
    loadingTemplate: 'Loading',
    notFoundTemplate: 'NotFound',
    yieldTemplates: {
        'photos': {
            to: 'ListPhotos'
        },
        'categories': {
            to: 'ListCategories'
        }
    }
});

Router.route('/', {
    name: 'home',
    controller: 'HomeController',
    action: 'action',
    where: 'client'
});

Router.route('/:name', {
    name: 'photos',
    controller: 'HomeController',
    action: 'action',
    where: 'client'
});