Ionic 2 side menu always visible - css

Question

I have a requirement to always display side menu and hide menu icon in the title bar when my app is loaded in tablet devices. I tried a lot but no success. Can anyone though some light here?

Answer 1

Starting from Ionic version 2.2.0 there is an out of the box solution for this, called split pane:
<ion-split-pane>
<ion-menu [content]="myNav"></ion-menu>
<ion-nav #myNav main><ion-nav>
</ion-split-pane>
More information here

Answer 2

I think you are looking for the showWhen and hideWhen properties. Documentation here. Indeed, there is a tablet platform. But you will be confronted with this : when a user clicks outside a menu, he closes it.
As I explained here, what I would do to have a such behavior is to use a component wrapper inside the menu content and use this same wrapper with a showWhen property on tablet in the <ion-content>.
EDIT : Adding code to illustrate the solution I proposed.
Menu always visible on some platforms behavior like example
Test environment :
Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 3.19
Node Version: v6.9.1
Xcode version: Not installed
App
./src/app/app.component.html :
<ion-menu
[content]="root"
>
<ion-header>
<ion-toolbar>
<ion-title>
Menu
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<sitemap-component
hideWhen="tablet, phablet"
>
</sitemap-component>
</ion-content>
</ion-menu>
<ion-nav
#root
[root]="rootPage"
>
</ion-nav>
./src/app/app.component.ts :
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HomePage } from '../pages/home/home';
#Component({
templateUrl: "app.component.html"
})
export class MyApp {
rootPage = HomePage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
}
./src/app/app.module.ts :
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SitemapComponent } from '../components/sitemap/sitemap.component';
import { ContentComponent } from '../components/content/content.component';
#NgModule({
declarations: [
MyApp,
HomePage,
SitemapComponent,
ContentComponent
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
SitemapComponent,
ContentComponent
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
Main content (platform independent)
./src/components/content/content.component.html :
<p>
Here is the main content.
</p>
<button
ion-button
menuToggle
>
Menu
</button>
./src/components/content/content.component.scss :
content-component {
}
./src/components/content/content.component.ts :
import {Component} from '#angular/core'
#Component(
{
selector : 'content-component'
, templateUrl : 'content.component.html'
}
)
export class ContentComponent
{
constructor()
{
}
}
Sitemap (in menu or in main content part, according to the platform)
./src/components/sitemap/sitemap.component.html :
<p
hideWhen="tablet, phablet"
>
Here is the menu content on a platform that is neither a tablet nor a phablet.
</p>
<p
showWhen="tablet, phablet"
>
Here is the menu content on a platform that is a tablet or a phablet.
</p>
<ion-list
>
<ion-item
*ngFor="let item of item_array"
>
{{item}}
</ion-item>
</ion-list>
./src/components/sitemap/sitemap.component.scss :
sitemap-component {
}
./src/components/sitemap/sitemap.component.ts :
import {Component} from '#angular/core'
#Component(
{
selector : 'sitemap-component'
, templateUrl : 'sitemap.component.html'
}
)
export class SitemapComponent
{
item_array =
[
"foo"
, "bar"
]
constructor()
{
}
}
Home page
./src/pages/home/home.html :
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content
padding
>
<div
showWhen="tablet, phablet"
>
<ion-row>
<ion-col
width-20
>
<sitemap-component>
</sitemap-component>
</ion-col>
<ion-col
width-80
>
<content-component>
</content-component>
</ion-col>
</ion-row>
</div>
<div
hideWhen="tablet, phablet"
>
<content-component>
</content-component>
</div>
</ion-content>
./src/pages/home/home.scss :
page-home {
}
./src/pages/home/home.ts :
import { Component } from '#angular/core';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor()
{
}
}
Hope this helps!