CODEWITHSUNDEEP
ionic-frameworkionic2
user6426377
user6426377

Reputation:

Hidding side menu and nav bar in only 1 page

When i make hide-nav-bar="true" it also makes my sidebar menu disappear in the other pages i didnt wanted to. I just want to make the nav and side menu go away in the home page, but in the other pages my side menu is replaced for a back arrow for some reason. how can i solve this?

This is how it looks

enter image description here

This is how it is supposed to be

enter image description here

My code

<ion-view hide-nav-bar="true" title="Home" id="page1">
<ion-content padding="true" class="has-header backg">
 <img class="log" src='../../img/image2.png' alt="HTML5 Icon" style="width:90px;height:90px;">
   </ion-content>
</ion-view>

Upvotes: 1

Views: 517

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

Please take a look at this plunker.

I just want to make the nav and side menu go away in the home page

In order to do that, you can, first, avoid including a header in your view. By just including and ion-content element in your home page html code, that view is not gonna have a navbar.

<ion-content>
  <p>Home page</p>
  <!-- ... -->
  <!-- ... -->
</ion-content>

Even though we're not showing the navbar, the user could open the side menu by slicing it from the left (in this case) so we need to make sure to avoid that from happening like this:

Add an id to the ion-menu element like this:

<ion-menu [content]="content" side="left" id="menu">
  <ion-toolbar secondary>
    <ion-title>Menu</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu" detail-none>
        Close Menu
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

And then in your HomePage.ts disable it like this:

import { MenuController, ... } from 'ionic-angular';

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  constructor(private menuCtrl: MenuController, ...) { }

  ionViewDidEnter() {
    this.menuCtrl.enable(false, 'menu');
  }

  // ...
}

in the other pages my side menu is replaced for a back arrow for some reason.

That's related to the navigation array and how Ionic2 handles it. If you push a new page, that back arrow will be shown. Even though you can hide it, if the app is being run in an android device with a physical back button, the user will still be able togo back to the home page. If you don't want to let the user go back to the HomePage (because is the login page or something like that) use the setRoot method instead.

this.nav.setRoot(NewPage);

Upvotes: 1

Related Questions