Multiple layout within Ionic app

1. Master Pages: User & Admin

The Ionic app consists of two main pages, each serving as a master layout:

• User Page: Contains a side menu and a navigation bar for intuitive user interaction.
• Admin Page: Includes only a side menu, focusing on administrative tasks without additional navigation clutter.

2. User Page Layout

The user interface aims to provide a seamless experience by incorporating:

• Side Menu: A collapsible menu for quick navigation.
• Navigation Bar: A persistent toolbar at the top for core actions.
• Tabs: A structured format for organizing content.

3. Code sample

3.1 User Page Code (user.page.html)

<ion-menu contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>User Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item routerLink="/home">Home</ion-item>
      <ion-item routerLink="/profile">Profile</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-page>
  <ion-header>
    <ion-toolbar>
      <ion-title>User Dashboard</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-tabs>
      <ion-tab tab="home"></ion-tab>
      <ion-tab tab="profile"></ion-tab>
    </ion-tabs>
  </ion-content>
</ion-page>

3.2 Admin Page Layout

Administrators need a simpler interface focused on key functions. The split-pane layout allows for better content management.

Admin Page Code (admin.page.html)

<ion-split-pane>
  <ion-menu contentId="admin-content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Admin Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item routerLink="/dashboard">Dashboard</ion-item>
        <ion-item routerLink="/list-users">Users</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Admin Dashboard</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-router-outlet></ion-router-outlet>
    </ion-content>
  </ion-page>
</ion-split-pane>

3.3 Routing Modules

To ensure proper navigation, routing modules define the paths for each page

User Routing Module (user-routing.module.ts)

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },
  { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfilePageModule) }
];

Admin Routing Module (admin-routing.module.ts)

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardPageModule) },
  { path: 'list-users', loadChildren: () => import('./list-users/list-users.module').then(m => m.ListUsersPageModule) }
];

4. Conclusion

By implementing distinct layouts in an Ionic app, developers can optimize usability for different roles. The user page features a side menu, navigation bar, and tabs for improved interaction, while the admin page provides a structured side menu with a split-pane layout for better content management.

I hope this article helps with your Ionic app development! If you’d like modifications or more details, let me know!