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.

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

<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>

<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>

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

<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:

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