CODEWITHSUNDEEP
ionic-framework
Stefan
Stefan

Reputation: 897

Ionic navigation with starting dashboard and side menu

I have a simple app which always starts up a dashboard. This is the initial page where the user has an overview over the current state.

From there he navigates to modules using direct links on the dashboard itself or the given side menu.

In every module there should be a back-button visible to reach the dashboard. Whenever the user navigates from Module A to Module B (using the side-menu, which is always available!) the back-button should not navigate back to Module A, it should target the dashboard...

Here a sketch how it should be: Sketch

Is there any way to archive this?

Upvotes: 0

Views: 287

Answers (1)

thepio
thepio

Reputation: 6263

Yes it's possible. The easiest way to achieve this is to just forget (disable) the Ionic default back button and place one of your own in there. Have a abstract controller for the whole app or make your own for the header or where ever you would like the back button to be (a place where to place the controller code). For example:

HTML:

<button class="button button-clear header-item" ng-click="goToDashboard()">
  <i class="icon ion-android-arrow-back"></i>
</button>

Controller:

$scope.goToDashboard = function() {
  $state.go('dashboard');
};

Here is a simple Codepen about the solution: https://codepen.io/thepio/pen/GqvvjA?editors=1010

In this example you can just navigate to different tabs through the content and then navigate back to dashboard with the arrow on the left top corner.

Upvotes: 1

Related Questions