Implementing side menu routing and tabs routing on the crossplatform app

Ionic Framework Ionic Angular
1

Hi there, I’m trying to create a cross-platform application and I have created a Desktop view with a working side menu with several pages and I want to implement some tabs so the navigation on the desktop view can work with an implementation of ion-tabs that I created as a component

I’m wondering is someone can. put me in the right direction

Here is my app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'register',
    loadChildren: () => import('./pages/register/register.module').then( m => m.RegisterPageModule)
  },
  {
    path: 'profile',
    loadChildren: () => import('./pages/profile/profile.module').then( m => m.ProfilePageModule)
  },
  {
    path: 'pagos',
    loadChildren: () => import('./pages/pagos/pagos.module').then( m => m.PagosPageModule)
  },
  {
    path: 'trabajos',
    loadChildren: () => import('./pages/trabajos/trabajos.module').then( m => m.TrabajosPageModule)
  },
  {
    path: 'anuncios',
    loadChildren: () => import('./pages/anuncios/anuncios.module').then( m => m.AnunciosPageModule)
  },
  {
    path: 'galeria',
    loadChildren: () => import('./pages/galeria/galeria.module').then( m => m.GaleriaPageModule)
  },



];

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

Here my navtabs.component.html

<div class="tabs">
  <ion-tabs slot="bottom">
    <ion-tab-bar slot="bottom">

      <ion-tab-button tab="anuncios">
        <ion-icon name="notifications"></ion-icon>
        <ion-label>Anuncios</ion-label>
        <ion-badge>6</ion-badge>
      </ion-tab-button>
      <ion-tab-button tab="liturgias">
        <ion-icon name="albums"></ion-icon>
        <ion-label>Liturgias</ion-label>
      </ion-tab-button>
  
      <ion-tab-button tab="trabajos">
        <ion-icon name="briefcase"></ion-icon>
        <ion-label>Mis Trabajos</ion-label>
      </ion-tab-button>
  
      <ion-tab-button tab="galeria">
        <ion-icon name="images"></ion-icon>
        <ion-label>Galeria
        </ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</div>

Any help is most appreciated.

1 Like