Skip to content

Instantly share code, notes, and snippets.

@djabif

djabif/app.component.html

Created March 17, 2019 18:48
Show Gist options
  • Save djabif/9accd0e0ca6905c606d72e7e3dfe89fd to your computer and use it in GitHub Desktop.
Save djabif/9accd0e0ca6905c606d72e7e3dfe89fd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.component.html
<ion-app dir="{{textDir}}">
<ion-split-pane>
<ion-menu class="app-sidemenu">
<ion-header>
<ion-toolbar>
<ion-row class="user-details-wrapper">
<ion-col size="4">
<app-aspect-ratio [ratio]="{w: 1, h: 1}">
<app-image-shell class="user-avatar add-spinner" [src]="'https://pbs.twimg.com/profile_images/722153095761903616/WjIKQ7Wm_400x400.jpg'"></app-image-shell>
</app-aspect-ratio>
</ion-col>
<ion-col class="user-info-wrapper" size="8">
<h3 class="user-name">Ionic Themes</h3>
<h5 class="user-handle">@IonicThemes</h5>
</ion-col>
</ion-row>
<ion-row class="user-stats-wrapper user-details-wrapper">
<ion-col>
<span class="user-stat-value">1553</span>
<span class="user-stat-name">Following</span>
</ion-col>
<ion-col>
<span class="user-stat-value">537</span>
<span class="user-stat-name">Followers</span>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>Layouts</ion-list-header>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item [routerLink]="p.url">
<ion-icon slot="start" [src]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<ion-list>
<ion-list-header>Forms</ion-list-header>
<ion-menu-toggle auto-hide="false">
<ion-item [routerLink]="['/forms-and-validations']">
<ion-icon slot="start" src="./assets/sample-icons/side-menu/forms.svg"></ion-icon>
<ion-label>
Forms & Validations
</ion-label>
</ion-item>
<ion-item [routerLink]="['/forms-filters']">
<ion-icon slot="start" name="options"></ion-icon>
<ion-label>
Filters
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<ion-list>
<ion-list-header>Account</ion-list-header>
<ion-menu-toggle auto-hide="false" *ngFor="let p of accountPages; let i = index">
<ion-item [routerLink]="p.url">
<ion-icon slot="start" [src]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<ion-list>
<ion-list-header>Showcase</ion-list-header>
<ion-menu-toggle auto-hide="false">
<ion-item [routerLink]="['/showcase/app-shell']">
<ion-icon slot="start" name="egg"></ion-icon>
<ion-label>
App Shell
</ion-label>
</ion-item>
<ion-item [routerLink]="['/showcase/route-resolvers-ux']">
<ion-icon slot="start" name="cog"></ion-icon>
<ion-label>
Route Resolvers UX
</ion-label>
</ion-item>
<ion-item [routerLink]="['/showcase/custom-components']">
<ion-icon slot="start" name="color-wand"></ion-icon>
<ion-label>
Custom Components
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<!-- Main app content get's rendered in this router-outlet -->
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment