Ion menu side navbar is getting closed if I click on any ionlist's ionitem

Question

here is my code

Menu.tsx

const Menu = () => {
  const showCat = () => {
    let res = Array(5)
      .fill(0)
      .map((_, i) => (
        <IonItem key={i}>
          <IonLabel>Cat{i}</IonLabel>
        </IonItem>
      ));
    return <IonList>{res}</IonList>;
  };
  return (
    <>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Meme11</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonMenuToggle auto-hide="false">
            <IonItem button routerLink={"/home"} routerDirection="none">
              <IonLabel>Home</IonLabel>
            </IonItem>
            <IonItem button routerLink={"/about"} routerDirection="none">
              <IonLabel>About</IonLabel>
            </IonItem>
            <IonItem
              onClick={() => {
                showCat();
              }}
            >
              <IonLabel>Categories</IonLabel>
            </IonItem>
          </IonMenuToggle>
        </IonList>
      </IonContent>
    </>
  );
};

App.tsx

const App: React.FC = () => (
  <IonApp>
    <IonSplitPane contentId="menu">
      <IonMenu class="custom" contentId="menu">
        <Menu />
      </IonMenu>
      <IonReactRouter>
        <IonRouterOutlet id="menu">
          <Route exact path="/home">
            <Home />
          </Route>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
          <Route exact path="/about">
            <About />
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonSplitPane>
  </IonApp>
);

In the above code, If I click on any Item of Ion List, the sidenav is getting closed(toggled). And I don't want it to close only if i click outside the sidenav or on ionmenubutton, it should close. If I click on the ionitem 'categories', then showCat function should get called and it should return nested ionlist.

Thank You

Callan · Answer 1 · 2022-01-23T13:50:59.457

I would try to stop propagation.

  <IonItem
          onClick={(e) => {
            e.stopPropagation();
            showCat();
          }}
        >

See more here: https://reactjs.org/docs/handling-events.html

UPDATE:

In order to make the sidebar stay just remove the ion menu toggle, like this:

 <IonContent>
    <IonList>
      
        <IonItem button routerLink={"/home"} routerDirection="none">
          <IonLabel>Home</IonLabel>
        </IonItem>
        <IonItem button routerLink={"/about"} routerDirection="none">
          <IonLabel>About</IonLabel>
        </IonItem>

        <IonItem
          onClick={(e) => {
            e.stopPropagation();
            showCat();
          }}
        >
          <IonLabel>Categories</IonLabel>
        </IonItem>

    </IonList>
  </IonContent>

Hi @Callan, the what about the sidebar which is getting closed, for every click on any list item???? can u please help me to resolve that issue — Manoj, Jan 19 '22 at 14:19

Ion menu side navbar is getting closed if I click on any ionlist's ionitem

1 Answers1