Two different side menus on different tabs

Tobeworks0 · March 5, 2021, 4:11pm

Hello,
I think I have a very simple problem, but didnt find the answers after many hours of trying. I think I just have a comprehension problem here. Cant imagine that this is a bug.

I just want to implement two different Menus on two tabs with a toggle button for each. After clicking button 2 on the Tab2, the toggle button (menu=“first”) on Tab 1 is hidden.

Tab1

<IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      
      <IonMenu side="start" menuId="first" contentId="foo" id="first">
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Start Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
        </IonList>
      </IonContent>
    </IonMenu>

      <IonContent fullscreen id="foo">

      
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonMenuButton menu="first"></IonMenuButton>
      
      </IonContent>
    </IonPage>

Tab2

<IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 2</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonMenu side="start" menuId="second" contentId="foo2" id="second">
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Start Menu Tab 2</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu2 Item</IonItem>
          <IonItem>Menu2 Item</IonItem>
          <IonItem>Menu2 Item</IonItem>
          <IonItem>Menu2 Item</IonItem>
          <IonItem>Menu2 Item</IonItem>

        </IonList>
      </IonContent>
    </IonMenu>


      <IonContent fullscreen id="foo2">

      

        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 2</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonMenuButton menu="second"></IonMenuButton>
      </IonContent>
    </IonPage>

Btw, it`s the same with a third Tab, it only knows the last Tab, that was used

aaronksaunders · March 5, 2021, 9:38pm

menu component should be the same, the contents of the menu should change based on the tab that you are in, leave the menu at the top level

Tobeworks0 · March 6, 2021, 6:51am

Funny, just watched a video from you yesterday and followed your channel
Ok, thanks, I try to do it like this, but then I have to use Context or Redux, I think.

But I think this is kind of a bug. I mean the documentation says: "There can be any number of menus attached to the content. ", but this is not possible, as I tried a lot of different possibilities. And the system is also very logical: Just wire it with different IDs. But it`s not working.

aaronksaunders · March 6, 2021, 9:03pm

If you post a project in stackblitz or somewhere, I can take a look at your original approach.

I just think that taking a look at some sort of basic state management sooner than later is beneficial

Tobeworks0 · March 8, 2021, 12:29pm

Im not getting it to work on stackblitz, but I have a [repo](https://github.com/Tobeworks/ionicreactsidebartest). Its just the initial Ionic Tab project and a different menue and a Button for every tab in app.tsx.
The menues are mounted to the ids in the tabs on the root content element (#foo and #foo2, like described in the docs). The second menue ist commened out, because its not working. But if youre commend out the first one, the second with (with different mounting #foo2) is working again.

aaronksaunders · March 10, 2021, 6:24am

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/tab1">
            <Menu1 /> //<== MOVED MENUS INSIDE THE ROUTE
            <Tab1 />
          </Route>
          <Route exact path="/tab2">
            <Menu2 /> //<== MOVED MENUS INSIDE THE ROUTE
            <Tab2 />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
          <Route exact path="/">
            <Redirect to="/tab1" />
          </Route>
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon icon={ellipse} />
            <IonLabel>Tab 2</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon icon={square} />
            <IonLabel>Tab 3</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

TAB 1

const Tab1: React.FC = () => {
  return (
    <IonPage >
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton menu="first"></IonMenuButton>
          </IonButtons>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen id="foo">
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer name="Tab 1 page" />
      </IonContent>
    </IonPage>
  );
};

TAB 2

const Tab2: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="end">
            <IonMenuButton menu="second"></IonMenuButton>
          </IonButtons>
          <IonTitle>Tab 2</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen id="foo2">
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 2</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer name="Tab 2 page" />
      </IonContent>
    </IonPage>
  );
};

MENUS

const Menu2 = () => {
  return (
    <IonMenu side="end" menuId="second" contentId="foo2" id="second">
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Start Menu 2</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu2 Item</IonItem>
          <IonItem>Menu2 Item</IonItem>
          <IonItem>Menu2 Item</IonItem>
          <IonItem>Menu2 Item</IonItem>
          <IonItem>Menu2 Item</IonItem>
        </IonList>
      </IonContent>
    </IonMenu>
  );
};

const Menu1 = () => {
  return (
    <IonMenu side="start" menuId="first" contentId="foo" id="first">
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Start Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
        </IonList>
      </IonContent>
    </IonMenu>
  );
};

check out reactjs content Ionic React Tutorial Playlist

Tobeworks0 · March 10, 2021, 10:27am

Great, works perfectly.
But… I tried it now with a third one, with dynamic props and then it`s not working again anymore.

github.com

Tobeworks/ionicreactsidebartest/blob/baa962f4eb63307446b5d251f32a83d0c0588680/src/App.tsx

import { Redirect, Route } from 'react-router-dom';
import {
  IonApp,
  IonContent,
  IonHeader,
  IonIcon,
  IonItem,
  IonLabel,
  IonList,
  IonMenu,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { ellipse, square, triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';

This file has been truncated. show original

Will check out your playlist asap, looks great.

aaronksaunders · March 10, 2021, 4:42pm

i just ran the code and it works fine?

Tobeworks0 · March 11, 2021, 10:24am

Sorry, I added a comment, it was the working version, but now I committed the not working version with

<Menu3 menuId="first" contentId="foo" id="first" />
and
<Menu3 menuId="second" contentId="foo2" id="second" />

Today I downloaded the Ionic UI App (iOS) and there is an example with 4 different menus: It is working fine BUT: On one page the “Menu button” was lost, too. I had to come back to the root menu first, then it worked again. Now I am more sure, there must be a bug somewhere. But I think the app was not made with ionic/react, it`s made in angular.

EDIT: Just for Info: The main problem of the posting has been solved with Context API for now, but I still think, there is something like a bug in ionic/react.