# Navigating from single page view to side-menu layout in ionic 4

**URL:** <https://forum.ionicframework.com/t/navigating-from-single-page-view-to-side-menu-layout-in-ionic-4/163030>\
**Category:** Ionic Framework\
**Created:** [May 3, 2019, 3:06pm UTC](https://forum.ionicframework.com/t/navigating-from-single-page-view-to-side-menu-layout-in-ionic-4/163030 "2019-05-03T15:06:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndrewB](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@AndrewB](https://forum.ionicframework.com/u/AndrewB)\
**Post date:** [May 3, 2019, 3:06pm UTC](https://forum.ionicframework.com/t/navigating-from-single-page-view-to-side-menu-layout-in-ionic-4/163030/1 "2019-05-03T15:06:01Z")

</div>

I’d like to build an app using Ionic 4 that simplistically works the following way:

- On-boarding page is shown with some images/text
- After user clicked ‘start’ button, some flag **onboarded=true** is written into local-storage
- User redirected to the main app view which is a **ion-split-pane** containing side-menu layout
- Next time when user launches app, I check if he/she already viewed on-boarding screen (by checking presence of **onboarded** var) and if it is - I immediately redirect the user to the main app having side-menu layout as I mentioned, omitting on-boarding screen

I started the project using ionic cli, based on side-menu template and modified it the following way to fulfill logic described above:

**app.component.ts**

```auto
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Storage } from '@ionic/storage';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent {

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private storage: Storage,
    private router: Router
  ) {
    this.initializeApp();
  }

  async initializeApp() {

    await this.platform.ready();

    this.statusBar.styleDefault();

    this.splashScreen.hide();

    const onboarded = await this.storage.get('onboarded');

    if (onboarded) {

      this.router.navigate(['main-app']);

    } else {

      this.router.navigate(['onboarding']);
    }
  }
}

```

* * *

**onboarding.page.html**

```auto
<ion-header>
  <ion-toolbar>
    <ion-title>onboarding</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
Welcome aboard!
<ion-button (click)="start()">Start app!</ion-button>
</ion-content>

```

* * *

**onboarding.page.ts**

```auto
import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Router } from '@angular/router';

@Component({
  selector: 'app-onboarding',
  templateUrl: './onboarding.page.html',
  styleUrls: ['./onboarding.page.scss'],
})
export class OnboardingPage {

  constructor(
    private storage: Storage,
    private router: Router
  ) { }

  start() {

    this.storage.set('onboarded', true);

    this.router.navigate(['main-app']);
  }
}

```

* * *

**main-app.page.html**

```auto
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>

```

* * *

**main-app.page.ts**

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

@Component({
  selector: 'app-main-app',
  templateUrl: './main-app.page.html',
  styleUrls: ['./main-app.page.scss'],
})
export class MainAppPage {

  public appPages = [
    {
      title: 'Home',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'List',
      url: '/list',
      icon: 'list'
    }
  ];

  constructor() { }

}

```

* * *

List and Home pages are just empty pages and their content is not important for this example  
Problem is that main-app containing side menu and content is not working properly. I know that there is a problem in `<ion-router-outlet main></ion-router-outlet>`'s usage but couldn’t find the right solution.  
Does anyone have ideas how to fix it?

Thanks!  
Andrew.

---

<div class="post-metadata">

**Author:** ![vamsidogiparthi](https://avatars.discourse-cdn.com/v4/letter/v/fbc32d/32.png) [@vamsidogiparthi](https://forum.ionicframework.com/u/vamsidogiparthi)\
**Post date:** [November 15, 2021, 9:26pm UTC](https://forum.ionicframework.com/t/navigating-from-single-page-view-to-side-menu-layout-in-ionic-4/163030/2 "2021-11-15T21:26:16Z")

</div>

Hi,  
We are using kind of same pattern. But its hard for me to understand, what’s the issue you are facing? Can you elaborate? so, that i can try to help