chrisgriffith

<ion-split-panel>
  <ion-menu [content]="content" when="xs">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>

chrisgriffith

<ion-split-pane>
 <ion-menu [content]="content">
   <ion-header>
     <ion-toolbar>
       <ion-title>{{title}}</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content>

     <ion-list>

chrisgriffith

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

import { MainPage } from '../pages/main/main';
import { MercuryPage } from '../pages/mercury/mercury';
import { GeminiPage } from '../pages/gemini/gemini';
import { ApolloPage } from '../pages/apollo/apollo';
import { AstpPage } from '../pages/astp/astp';
import { SkylabPage } from '../pages/skylab/skylab';

chrisgriffith

.split-pane-visible > .split-pane-side {
    border-right: none !important;
}

.menu-inner ion-content {
    border-right: 1px solid #dedede;
}

chrisgriffith

< ion-header >

 < ion-navbar >
   < button ion-button menuToggle >< ion-icon name="menu" >< /ion-icon >< /button >
   < ion-title >{{title}}< /ion-title >
 < /ion-navbar >

< /ion-header >

chrisgriffith

import { Component } from '@angular/core';
import { Events, NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-mercury',
  templateUrl: 'mercury.html'
})

export class MercuryPage {
  title: String = ' ';

chrisgriffith

projectSelected(theProject) {
    this.nav.setRoot(theProject.details);
    this.menuCtrl.close();
}

chrisgriffith

<ion-header>
  <ion-navbar color="dark">
    <ion-title>
      Apollo 14
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <img src="assets/imgs/apollo14.jpg">

chrisgriffith

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  isLabelActive: Boolean = false;
  constructor () { }

chrisgriffith

.activeInputIcon {
    color:#3880ff;
}