Onsen use Navigator and Sidebar On Same Page

Question

I'm new to OnsenUI. I'm trying to show a page that uses navigator and I also want to have a sidebar on the same page. According to the documentation, this is possible, but I'm battling to get this to work. I currently have this:

<ons-sliding-menu var="sidebar" main-page="index.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>

<ons-navigator title="Navigator" var="mainNavigator">
    <ons-page id="home-page">
        <ons-toolbar>
            <div class="center">TITLE</div>
        </ons-toolbar>
        <ons-list id="main-list">
        </ons-list>
    </ons-page>
</ons-navigator>

<ons-template id="menu.html">
    <ons-page>
        <h1>Sidebar</h1>
    </ons-page>
</ons-template>

However, this does not show the sidebar or provide the sidebar functionality. I cannot find any documentation on how to do this. Any ideas?

Answer 1

Yes it is possible. The below should be your index.html content:

index.html:

<ons-sliding-menu var="sidebar" main-page="main.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="main.html">
<ons-navigator title="Navigator" var="mainNavigator">
    <ons-page id="home-page">
        <ons-toolbar>
            <div class="center">TITLE</div>
        </ons-toolbar>
        <ons-list id="main-list">
        </ons-list>
    </ons-page>
</ons-navigator>
</ons-template>

<ons-template id="menu.html">
    <ons-page>
        <h1>Sidebar</h1>
    </ons-page>
</ons-template>

Or take a look at onsen document at : http://onsenui.io/guide/components.html#ons-sliding-menu

With that, you could see how they did it at: http://codepen.io/onsen/pen/IDvFJ