Recently I started thinking about designing some Ionic applications specifically for larger physical screens (tablets and desktop). I wanted to have a layout much like Slack or Flickr for my iPad.
The basics of this layout are to have a fixed series of icons (tabs) displayed vertically on the left side of the window, and the rest of the window displays that tab’s content. However, currently, the Ionic Tab component can only be positioned horizontally at the top or bottom of the window. To solve this I turned to the SplitPane component.
This component allows me to have two separate containers (a sidemenu container and the main content container) that I can adjust and populate with content. However, the sidemenu will typically respond to various screen widths. Since I want the element to always be visible regardless of the width, I just needed to include the ‘when’ attribute to the ion-split-pane component and set its value to ‘xs’. See the documentation for the other allowable values.
By default, the width of the sidemenu is between 270px and 28% of the window. Since I just wanted a single row of touchable icons, I need to override this. When I first began playing with this component, those values were not directly exposed, but after filing a GitHub issue, they are now available as Sass variables.
In the variables.scss file, is simply add the following variables:
Adding my Tabs
< button ion-button large block clear icon-only>
< ion-icon name="md-list">
</ button>
I repeat this for the other tabs I wanted to display. Since I was not using the Tab component, the state management was going to become my responsibility. To handle the visual feedback, I add the following code to each button:
[color]="isList ? 'primary' : 'light'"
This code will set the color of the button based on the boolean state of the variable isList. If it is true, Ionic’s primary color will be used, otherwise, the light color will be applied. I added this to each of the remaining buttons, changing the variable for each button.
The final piece was to add a click handler to each button so I could switch the main content.
(click)="togglePage('List')"
togglePage(whichPage: string): void {
this.isList=false;
this.isLocation=false;
this.isSelf=false;
this.isNotifications=false;
this.isSearch=false;
this.isCamera=false;
letnewTab:string='';
switch (whichPage) {
case'List':
this.isList=true;
newTab='PhotosPage';
break;
case'Location':
this.isLocation=true;
newTab='LocationsPage';
break;
case'Self':
this.isSelf=true;
newTab='SelfPage';
break;
case'Notifications':
this.isNotifications=true;
newTab='NotificationsPage';
break;
case'Search':
this.isSearch=true;
newTab='SearchPage';
break;
case'Camera':
this.isCamera=true;
newTab='CameraPage';
break;
}
this.nav.setRoot(newTab);
}
Centering the Tabs
.centervert {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}

Vertical ‘Tabs’
I did add a Footer component to have App settings and Log Out button be anchored to the bottom of the column. The content pages are just Ionic generated stubs. I have posted the source for the shell of the application on my GitHub repo. Have fun!
great stuff!