Popover menu in bottom navigation

Ionic Framework
#1

Hello, I’m new with ionic, I’m using it with React framework.
My problem is to insert a popover menu inside a bottom navigation (something like for “extra” settings).

export const App: React.FC = () => {
  const [showPopover, setShowPopover] = useState(false);
return (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/CashDevices" component={CashDevices} exact={true} />
          <Route path="/ChequeDevices" component={ChequeDevices} exact={true} />
          <Route path="/CardReaders" component={CardReaders} exact={true} />
          <Route path="/Printers" component={Printers} exact={true} />
          <Route path="/CassConfig" component={CassConfig} exact={true} />
          <Route path="/GBRUSettings" component={GBRUSettings} exact={true} />
          <Route path="/" render={() => <Redirect to="/Home" />} exact={true} />
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="CashDevices" href="/CashDevices">
            <IonIcon icon={flash} />
            <IonLabel class="ion-text-wrap">Cash</IonLabel>
          </IonTabButton>
          <IonTabButton tab="ChequeDevices" href="/ChequeDevices">
            <IonIcon icon={apps} />
            <IonLabel class="ion-text-wrap">Cheque</IonLabel>
          </IonTabButton>
          <IonTabButton tab="CardReaders" href="/CardReaders">
            <IonIcon icon={send} />
            <IonLabel class="ion-text-wrap">Readers</IonLabel>
          </IonTabButton>
          <IonTabButton tab="Printers" href="/Printers">
            <IonIcon icon={send} />
            <IonLabel class="ion-text-wrap">Printers</IonLabel>
          </IonTabButton>
          <IonTabButton tab="CassConfig" href="/CassConfig">
            <IonIcon icon={send} />
            <IonLabel class="ion-text-wrap">Cassettes</IonLabel>
          </IonTabButton>


          <IonTabButton onClick={() => setShowPopover(true)}>
            <IonIcon icon={more} />
            <IonLabel class="ion-text-wrap">More</IonLabel>
          </IonTabButton>
          <IonPopover isOpen={showPopover} onDidDismiss={e => setShowPopover(false)}>
            <p>This is popover content</p>
          </IonPopover>

        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);
};

Actually all the routing are working but when I click on “More” button (which should trigger the popover) nothing happens.

FYI:
Screenshot%20(250)

1 Like