# LayoutComponent -\> Navigation disappears after routing

**URL:** <https://forum.ionicframework.com/t/layoutcomponent-navigation-disappears-after-routing/184558>\
**Category:** Ionic Angular\
**Created:** [March 5, 2020, 12:39pm UTC](https://forum.ionicframework.com/t/layoutcomponent-navigation-disappears-after-routing/184558 "2020-03-05T12:39:34Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fab4guy](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@Fab4guy](https://forum.ionicframework.com/u/Fab4guy)\
**Post date:** [March 5, 2020, 12:39pm UTC](https://forum.ionicframework.com/t/layoutcomponent-navigation-disappears-after-routing/184558/1 "2020-03-05T12:39:34Z")

</div>

I have a funny problem.  
I have made a layout component.

**LayoutComponent**

```auto
<ion-split-pane contentId="main">
  <ion-menu side="start" menuId="custom" contentId="main">

    <ion-header>
      <div id="userBox">
        <div id="userImage"><i class="far fa-user-circle"></i></div>
        <p>Nicolas Lauinger<br>TGOPOD</p>
        <div id="switchTheme">
          <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" #theme [(ngModel)]="currentTheme" (change)="changeTheme(theme)">
            <label class="onoffswitch-label" for="myonoffswitch">
              <span class="onoffswitch-inner"></span>
              <span class="onoffswitch-switch"></span>
            </label>
          </div>

        </div>
        <p class="logout">
          <i class="fas fa-sign-out-alt"></i>
        </p>
      </div>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let nav of navi">
          <ion-item lines="none" [class.active]="isActive('/'+ nav.link)" [routerLink]="'/'+ nav.link">
            <i slot="start" class="fas {{nav.icon}}"></i>{{nav.linkName}}
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>

  </ion-menu>

  <ion-router-outlet animated="false" id="main"></ion-router-outlet>

</ion-split-pane>

```

In the app-routing.module.ts it is called at every path.

**app-routing.module.ts**

```auto
import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
import {LayoutWithSideNavComponent} from './layout/layout-with-side-nav/layout-with-side-nav.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: LayoutWithSideNavComponent,
    loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'info',
    component: LayoutWithSideNavComponent,
    loadChildren: () => import('./pages/info/info.module').then(m => m.InfoPageModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

```

**That’s what it looks like.**

 ![bild1](https://global.discourse-cdn.com/ionicframework/original/3X/f/3/f37d938a41ed218683d3c2d17c8f20531b796e52.jpeg)

**Now when I click on contact it looks like this.**

 ![bild2](https://global.discourse-cdn.com/ionicframework/original/3X/5/c/5c7d4d6ddfed0ff9ac56e69eac2cf1a7753639d7.jpeg)

**So far everything as expected and in order. But when I click on Dashboard again it suddenly looks like this. The navigation bar has disappeared.**

![bild3](https://global.discourse-cdn.com/ionicframework/original/3X/b/3/b37b7597b3d9dc4792a01b5e212e8990e5e6a2d6.jpeg)

**What am I doing wrong?**

---

<div class="post-metadata">

**Author:** ![csyber](https://avatars.discourse-cdn.com/v4/letter/c/df705f/32.png) [@csyber](https://forum.ionicframework.com/u/csyber)\
**Post date:** [March 4, 2022, 11:02am UTC](https://forum.ionicframework.com/t/layoutcomponent-navigation-disappears-after-routing/184558/2 "2022-03-04T11:02:08Z")

</div>

This is happening for me with Vue and Ionic 6.

Did you find out why this happens?