Global Navigation


#1

Hi.

I have tried to add a global navigation to my app and solved it by removing any nav from the pages and adding it to the main app.html code. My problem is that since I removed it from the individual pages, there is no padding now for the content, sending the content up and behind the navigation bar. I tried adding a test padding to the ion-content element but still doesn’t nudge. Apparently, the actual content is on an inaccessible element that is generated by the ion-content directive. Any advice on how to fix this?

Snipp:
How it looks like:

Panel header is not visible.

My app.html:

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <!--<ion-title>OBTAM MOBILE</ion-title>-->
      <img style="height:3em" src="img/ologot.png" alt=""/>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{ globalVariables.get('nav-menu-title') }}</ion-title>
    <button ion-button menuToggle="right" end>
      &nbsp;<ion-icon name="person"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

<ion-menu side="right" type="push" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>
        User Settings
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose="right" ion-item *ngFor="let p of userOptions" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

My dashboard.html:

<!--
  Generated template for the Search page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-content padding class='content-page home'>
  <ion-refresher (ionRefresh)="reloadData($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <ion-card>
    <ion-card-header>
      Overview
    </ion-card-header>
    <ion-card-content>
      <canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
    </ion-card-content>
  </ion-card>

  <!-- Alerts -->
  <ion-card>
    <ion-card-header>
      Alerts
    </ion-card-header>
    <ion-list>
      <ion-item-sliding *ngFor="let alert of alerts">
        <ion-item>
          <ion-avatar item-left>
            <img src="//placeholdit.imgix.net/~text?txtsize=5&txt=36%C3%9736&w=36&h=36&text=AV">
          </ion-avatar>
          <h2>{{ alert.description }}</h2>
          <ion-note item-right>
            {{ alert.time }}
          </ion-note>
        </ion-item>
        <ion-item-options side="left">
          <button ion-button color="secondary" (click)="alertDetails(alert)">
            <ion-icon name="search"></ion-icon>
            Details
          </button>
        </ion-item-options>
        <ion-item-options side="right">
          <button ion-button color="danger" (click)="alertDismiss(alert)">
            <ion-icon name="remove-circle"></ion-icon>
            Dismiss
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
  </ion-card>
</ion-content>

Thanks!


#2

Solved by applying additional margins in app.scss file for all .scroll-content class like so:

.scroll-content{
  margin-top: $control-height+10 !important;
}

.scroll-content > .list-md{
  margin-top: 7px;
}