Monaca Onsen UI Discord Chat Github Repo

Can't open side menu outside tabbar pages



  • 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();
    }


  • administrators

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



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


  • administrators

    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.