Best way to keep side menu locked open above X resolution

Ionic Framework ionic-v3
#1

With Ionic now being a progressive web app in addition to running as a mobile app, I figured it was perfect for my next project, which needed to be a website and a mobile app.

But I have to say I’m a bit frustrated with how the menu works. I would like a way to keep the menu open if the resolution is greater than X amount, so on desktop it’s always there.

This is similar to how effectively every website works, including the main Ionic website. Yet this doesn’t seem to be an option for Ionic itself…

Before I go diving into this one myself, I’d figured I’d see if anyone had any ideas. My search turned up one other person asking the question, but no answers.

Thanks,
Rob

1 Like
#2

Take a look at the latest blog post. Sounds like what you are looking for. Still in a beta phase but they need people to test and help guide the development. If you already have an app that you can implement it on I’m sure they’d love for you to test it out.

2 Likes
#3

WOAH! Thank you!!

Perfect timing I guess considering it was just posted 5 days ago. I’ll pull this down asap and report back.

#4

Just marked your response as the solution. This worked perfectly, thanks again.

For those who want to implement it (I had to dig through the code for details, it’s not yet documented), here’s an example. This takes the default side menu starter app and changes it to use the split panel, specifically only splitting when the screen size is large.

App.html

<ion-split-panel when="lg">
  <ion-menu [content]="content">
    <ion-nav [root]="sidePanelRoot"></ion-nav>
  </ion-menu>
  <ion-nav [root]="mainRoot" main #content></ion-nav>
</ion-split-panel>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { SideMenu } from "./side-menu.component";


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  mainRoot: any = Page1;
  sidePanelRoot: any = SideMenu;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Page One', component: Page1 },
      { title: 'Page Two', component: Page2 }
    ];

  }

  initializeApp() {
    this.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();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

side-menu.component.ts

import { Component } from '@angular/core';
import { Nav, Platform, NavController } from 'ionic-angular';

@Component({
    template: `
     <ion-header>
       <ion-navbar><ion-title>Navigation</ion-title></ion-navbar>
     </ion-header>
     <ion-content [scrollbar-y]="false">
       <ion-list>
        <ion-item>Hola</ion-item>
        <ion-item>Hola</ion-item>
        <ion-item>Hola</ion-item>
        <button ion-item (click)="push()">Push</button>
        <ion-item>Hola</ion-item>
        <ion-item>Hola</ion-item>
        <ion-item>Hola</ion-item>
      </ion-list>
    </ion-content>
  `
})
export class SideMenu {
    constructor(public navCtrl: NavController) { }
    push() {
        this.navCtrl.push(SideMenu);
    }
}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { SideMenu } from './side-menu.component';

@NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2,
    SideMenu
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2,
    SideMenu
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
1 Like