How to use splitter and navigation with a page that does not need the lateral menu?

[h3nr1ke]

Hello,
I`m creating an app that will have a login page and after login, will be redirected to a page with ons-splitter + ons-navigator.

In the end I have the following structure

<!-- first page displayed, no menu, only the action needed -->
<ons-page ng-controller="LoginController">
  <div class="page-content center page-login">
    <div class="logo">LOGO</div>
    <p>
      <ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
    </p>
    <p>
      <ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
    </p>
    <p>
      <ons-button class="button--large--cta">Login</ons-button>
    </p>

    <p>
      <ons-button class="button--large--cta">Register</ons-button>
    </p>

    <div class="button-bar">
      <div class="button-bar__item">
        <button class="button-bar__button">Text 1</button>
      </div>
      <div class="button-bar__item">
        <button class="button-bar__button">Text 2</button>
      </div>
    </div>
    <div class="app-version">V 0.0.1-dev</div>
  </div>
</ons-page>

<!-- the splitter with lateral menu -->
<template page="splitter.html">
  <ons-splitter var="mySplitter" ng-controller="SplitterController as splitter" close-on-tap>
    <ons-splitter-side side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item ng-click="myNav.pushPage('home.html')" tappable>
            Home
          </ons-list-item>
          <ons-list-item ng-click="myNav.pushPage('settings.html')" tappable>
            Settings
          </ons-list-item>
          <ons-list-item ng-click="myNav.pushPage('about.html')" tappable>
            About
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content page="navigator.html"></ons-splitter-content>
  </ons-splitter>
</template>

<!-- the navigator, called by the splitter -->
<template id="navigator.html">
  <ons-navigator animation="slide" var="myNav" page="home.html">
  </ons-navigator>
</template>

<!-- first navigators page -->
<template id="home.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="mySplitter.left.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Main
      </div>
    </ons-toolbar>
    <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
      Swipe right to open the menu!
    </p>
  </ons-page>
</template>

The login page does not need the lateral menu, since the user is not logged in, how is the correct approach to call the splitter from login page, since I’m not in the navigator?

If the page must be inside the navigator, how can I remove the lateral menu from this specific page?

Thanks for all the help. =)

[Fran Diox]

@h3nr1ke You just need to remove the swipeable attribute in the splitter-side and add it back whenever you need it (after logging in) :thumbsup:

[h3nr1ke]

hello @Fran-Diox , I see, so there is no way to connect the pages without the menu itself… that is clear, I will do as you suggested, thanks once again =D

[Manohar Khadka]

@Fran-Diox , hello there, I am still unable to hiding the top menu from navigator. I just removed
swipeable attribute from AppSplitter.vue and it’s not working. Do I need to use something else in case of using it with vue.js ? Thanks in advance.

[Michael Redwine]

If I understand the problem, I also have a situation like this. My login screen doesn’t need the splitter menu. But it doesn’t need a toolbar either. I first played with just removing swipeable, but later decided to keep my login page simple, and use “window.location = file.html” instead to go to the main page that has the splitter and everything.