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.
