Can't open side menu outside tabbar pages

[linkon]

Hi,
I need to open side menu on tabbar pages and outside tabbar pages. But I am only able to open it on tabbar pages. Could someone please advice on how to open side menu from outside tabbar pages?

Here below I have given all the components. I am able to open menu from dashboard page but I also need to open it from member page.

<!-- Theis is the navigator -->
<ons-navigator id=“appNavigator” swipeable swipe-target-width=“80px” page=“login.html”>
</ons-navigator>

<!-- The Splitter Page -->
<template id=“home_splitter.html”>
<ons-page id=“home_splitter”>
<ons-splitter id=“appSplitter”>
<ons-splitter-side id=“usermenu” page=“usermenu.html” side=“right” collapse="" width=“200px”>
</ons-splitter-side>
<ons-splitter-content page=“tabbar.html”></ons-splitter-content>
</ons-splitter>
</ons-page>
</template>

<!-- Tabbar -->
<template id=“tabbar.html”>
<ons-page id=“tabbar-page”>
<ons-toolbar>
<ons-fab class=“right user-icon” onclick=“fn.userMenu()”>
<img class=“user-img” src=“car.jpg” alt=“User”>
</ons-fab>
</ons-toolbar>

    <ons-tabbar swipeable id="appTabbar" position="auto">
        <ons-tab label="Dashboard" icon="ion-home" page="dashboard.html"></ons-tab>
        <ons-tab label="Plan & Reports" icon="ion-home" page="planAndReports.html"></ons-tab>
        <ons-tab label="Support" icon="ion-home" page="support.html"></ons-tab>
    </ons-tabbar>
    </script>
</ons-page>

</template>

<!-- Menu–>
<template id=“usermenu.html”>
<ons-page>
<ons-list>
<ons-list-item onclick=“fn.logout()”>
<div class=“left”>
<i class=“icon ion-md-log-out dashboard-icon”></i>
</div>
<div class=“center”>
Sign Out
</div>
</ons-list-item>
</ons-list>
</ons-page>
</template>

<!-- dashboard page -->
<template id=“dashboard.html”>
<ons-page>
<h1>Hi</h1>
</ons-page>
</template>

<!-- member page -->
<template id=“member.html”>
<ons-page id=“member”>
<ons-toolbar>
<div class=“left”>
<ons-back-button>Back</ons-back-button>
</div>
<div class=“center”>Member</div>
<ons-fab class=“right user-icon” onclick=“fn.open()”>
<img class=“user-img” src=“Car.jpg” alt=“User”>
</ons-fab>
</ons-toolbar>
</ons-page>
</template>

//here is the .js function
window.fn.login = function () {
document.getElementById(‘appNavigator’).pushPage(“home_splitter.html”);
};

window.fn.userMenu = function () {
document.getElementById(‘appSplitter’).right.toggle();
}

[emccorson]

Maybe something like this? https://onsen.io/playground/?framework=vanilla&category=common patterns&module=splitter_navigator
But instead of navigator use tabbar.

[linkon]

@emccorson But I need tabbar to swipe between tabbar pages.

[emccorson]

The problem is that you have currently have the splitter inside the navigator, when you actually need the navigator inside the splitter.

Copy the example from the link I already posted. It defines a splitter, and within the splitter content is a navigator. That means that the splitter is available on every page, no matter what page the navigator shows.

Then for the tabbar, just define a page with a tabbar and push it using the navigator. That means you have:

1. A top-level splitter
2. Inside the top-level splitter: a navigator that is used to show pages.
3. Inside the navigator: a page containing a tabbar that is pushed by the navigator.