Problem with tabs and shared ion-menu

Hi,
I’m trying to set up a common ion-menu for every tab in a tab-based interface.

I’ve added the same menu to each tab using ion-split-pane but when I navigate between tabs, I get an error, Cannot read property 'classList' of undefined because my tab content is not wrapped in the ion-page tag.

If I wrap each tab component in ion-page, (nesting ion-split-pane inside ion-page, or replacing ion-split-pane with ion-page) the menu stops opening on some tabs, after navigating between them.

Here’s my current approach, any suggestions welcome. I’m just showing the templates and the routing, that seems the be relevant stuff:

Tabs.vue:

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="cards" href="cards">
            <ion-icon :icon="currentRouteName === 'cards' ? documents : documentsOutline" />
            <ion-label>Cards</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="photos" href="photos">
            <ion-icon :icon="currentRouteName === 'photos' ? images : imagesOutline" />
            <ion-label>Photos</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="places" href="places">
            <ion-icon :icon="currentRouteName === 'places' ? compass : compassOutline" />
            <ion-label>Places</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

Cards.vue:

<template>
  <ion-split-pane content-id="cards-main">

    <ion-menu side="start" menu-id="first" content-id="cards-main">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-page id="cards-main">
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
          </ion-buttons>
          <ion-title>{{ currentProjectTitle }}</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content :fullscreen="true">
          <!-- content here -->
      </ion-content>
    </ion-page>

  </ion-split-pane>
</template>

etc.

Photos.vue:

<template>
  <ion-split-pane content-id="photos-main">

    <ion-menu side="start" menu-id="second" content-id="photos-main">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-page id="photos-main">
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
          </ion-buttons>
          <ion-title>Photos</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content :fullscreen="true">
        <!-- content here -->
      </ion-content>
    </ion-page>
  </ion-split-pane>
</template>

Routing:

{
    path: '/project/:project_id/tabs',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: '/project/:project_id/tabs/cards'
      },
      {
        path: 'cards',
        name: 'cards',
        component: () => import('@/views/Cards.vue'),
        beforeEnter: beforeEventLoadProjectData
      },
      {
        path: 'photos',
        name: 'photos',
        component: () => import('@/views/Photos.vue')
      },
      {
        path: 'places',
        name: 'places',
        component: () => import('@/views/Places.vue'),
        beforeEnter: beforeEventLoadProjectData
      }
    ],
    meta: {
      requiresAuth: true,
      authoriseRoles: []
    }
  }

3 posts - 2 participants

Read full topic