CODEWITHSUNDEEP
meteor
Prakash
Prakash

Reputation: 466

how do i use same sidenav in multiple pages

So i created a sidenav on one of my page and its working properly there what i want to do is on another page i want to use that same sidenav.

My side nav code:

<form id="keyword-form" class="side-nav rt-side-nav">
    <div>
        <center><h5>KEYWORDS</h5></center>
        <textarea rows="10" cols="50" id="txtarea" class="keyword-text" placeholder="enter comma seperated values for the products" contenteditable="true">{{keywords}}</textarea>                      
    </div>                      
    <div class="keyword-submit">
        <center><button type="submit" class="key-submit btn waves-effect waves-light col m12">SUBMIT</button></center>
    </div>
</form>
<a data-activates="keyword-form" class="button-collapse"></a>
<div hidden class="keyword">
</div>

Upvotes: 0

Views: 155

Answers (1)

Jan Jouke Tjalsma
Jan Jouke Tjalsma

Reputation: 610

Wrap your navbar code in a template then use that template on each page. See example in the Meteor Todo app tutorial. Or if you are using Iron Router put it in your app body template.

Template example:

<template name="sidenav">
    <form id="keyword-form" class="side-nav rt-side-nav">
        <div>
            <center><h5>KEYWORDS</h5></center>
            <textarea rows="10" cols="50" id="txtarea" class="keyword-text" placeholder="enter comma seperated values for the products" contenteditable="true">{{keywords}}</textarea>                      
        </div>                      
        <div class="keyword-submit">
            <center><button type="submit" class="key-submit btn waves-effect waves-light col m12">SUBMIT</button></center>
        </div>
    </form>
    <a data-activates="keyword-form" class="button-collapse"></a>
    <div hidden class="keyword">
    </div>
</template>

Then every time you want to show your sidenav:

{{> sidenav}}

Upvotes: 1

Related Questions