onClick do tab profile tem um onClick porem esse onClick não responde, alguem pode me ajudar?
reparem que tem uma div dentro desse ionTabButton, bom preciso que o menu abra quando o usuario clicar na tab profile, então fiz essa gambiarra pra funcionar, mas o IonTabButton deveria funcionar
const App: React.FC = () => {
const ref = React.useRef(null);
const dispatch = useDispatch();
const activeItem = useSelector((state: State) => state.general.menuActive);
React.useEffect(() => {
console.log(ref.current);
}, [ref]);
console.log(activeItem);
return (
<IonApp>
<Styled.GlobalApp />
<IonReactRouter history={customHistory}>
<Menu />
<IonRouterOutlet id="main-menu">
<Route path="/" exact component={LoadingPage} />
<Route path="/login" exact component={Login} />
{/* Reset Password Pages */}
<Route path="/reset-password/first-step" component={FirstStep} />
<Route path="/resetPassword/secondStep" component={SecondStep} />
{/* Panel Pages */}
<IonTabs
onIonTabsWillChange={(e) => {
console.log(e);
dispatch(setMenuActive(e.detail.tab));
}}
>
<IonRouterOutlet id="tabs">
<PrivateRoute exact path="/dashboard">
<Dashboard />
</PrivateRoute>
{/* Users do corban */}
<PrivateRoute
path="/users/list"
module={GroupModulesEnum.USERS}
exact
>
<UserList />
</PrivateRoute>
<PrivateRoute
path="/users/view"
module={GroupModulesEnum.USERS}
exact
>
<UserView />
</PrivateRoute>
<PrivateRoute
path="/users/add"
module={GroupModulesEnum.USERS}
exact
>
<UserAdd />
</PrivateRoute>
{/* Users do corban */}
{/* Customers Pages */}
<PrivateRoute path="/customers" exact>
<Customers />
</PrivateRoute>
<PrivateRoute exact path="/profile">
<Profile />
</PrivateRoute>
<PrivateRoute
path="/customers/list"
module={GroupModulesEnum.CLIENTS}
exact
>
<CustomersList />
</PrivateRoute>
<PrivateRoute
path="/customers/view"
module={GroupModulesEnum.CLIENTS}
exact
>
<CustomerView />
</PrivateRoute>
<PrivateRoute
path="/customers/add"
module={GroupModulesEnum.CLIENTS}
exact={true}
>
<CustomerAdd />
</PrivateRoute>
{/* Solicitations Pages */}
<PrivateRoute
path="/customers/:customer_uuid/requests"
module={GroupModulesEnum.CLIENTS}
exact
>
<RequestCustomerList />
</PrivateRoute>
<PrivateRoute
exact
module={GroupModulesEnum.CLIENTS}
path="/customers/:customer_uuid/requests/:request_uuid"
>
<SolicitationView />
</PrivateRoute>
<PrivateRoute
path="/customers/solicitations/add"
module={GroupModulesEnum.CLIENTS}
exact={true}
>
<SolicitationAdd />
</PrivateRoute>
<PrivateRoute
path="/customers/solicitations/recent"
module={GroupModulesEnum.PROPOSES}
exact
>
<Recent />
</PrivateRoute>
{/* Solicitations Pages */}
{/* Customers Pages */}
{/* Open Finance Pages */}
<PrivateRoute
path="/openfinance"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<OpenFinance />
</PrivateRoute>
<PrivateRoute
path="/openfinance/:item_uuid/view"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<OpenFinanceView />
</PrivateRoute>
<PrivateRoute
path="/openfinance/identity"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<OpenFinanceIdentity />
</PrivateRoute>
<PrivateRoute
path="/openfinance/ted"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<OpenFinanceTED />
</PrivateRoute>
<PrivateRoute
path="/openfinance/investment"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<OpenFinanceInvestment />
</PrivateRoute>
<PrivateRoute
path="/openfinanceterm"
module={GroupModulesEnum.OPEN_FINANCE}
exact={true}
>
<Term />
</PrivateRoute>
{/* Open Finance Pages */}
{/* Digital Account Pages */}
<PrivateRoute path="/digitalaccount" exact={true}>
<DigitalAccount />
</PrivateRoute>
<PrivateRoute path="/digitalaccount/view" exact={true}>
<DigitalAccountView />
</PrivateRoute>
<PrivateRoute path="/digitalaccount/add" exact={true}>
<DigitalAccountAdd />
</PrivateRoute>
{/* Digital Account Pages */}
{/* Comission Pages */}
<PrivateRoute path="/comission/table" exact={true}>
<ComissionTable />
</PrivateRoute>
<PrivateRoute path="/comission/simulator" exact={true}>
<ComissionSimulator />
</PrivateRoute>
<PrivateRoute path="/comission/charts" exact={true}>
<ComissionCharts />
</PrivateRoute>
{/* Comission Pages */}
{/* Terms and Conditions Pages */}
<PrivateRoute path="/termsandconditions" exact={true}>
<TermsAndConditions />
</PrivateRoute>
{/* Terms and Conditions Pages */}
{/* Profile Pages */}
<PrivateRoute path="/profile" exact={true}>
<Profile />
</PrivateRoute>
<PrivateRoute path="/edit" exact={true}>
<Edit />
</PrivateRoute>
<PrivateRoute path="/experience" exact={true}>
<Experience />
</PrivateRoute>
<PrivateRoute path="/certifications" exact={true}>
<Certifications />
</PrivateRoute>
<PrivateRoute path="/contato" exact={true}>
<Contato />
</PrivateRoute>
{/* Profile Pages */}
{/* Notifications Pages */}
<PrivateRoute path="/notifications" exact={true}>
<Notifications />
</PrivateRoute>
{/* Notifications Pages */}
{/* Notifications Pages */}
<PrivateRoute path="/searchpage" exact={true}>
<SearchPage />
</PrivateRoute>
{/* Notifications Pages */}
{/* CRM Pages */}
<PrivateRoute path="/crm/kanban" exact={true}>
<BitrixKanban />
</PrivateRoute>
<PrivateRoute
path="/comments/:ID"
module={GroupModulesEnum.PROPOSES}
exact={true}
>
<Comments />
</PrivateRoute>
{/* CRM Pages */}
{/* Page de Email */}
<PrivateRoute path="/email" exact={true}>
<Email />
</PrivateRoute>
{/* Page de Email */}
</IonRouterOutlet>
<IonTabBar
slot="bottom"
id="tabBar"
selectedTab={activeItem}
onChange={(e) => {
console.log(e);
}}
itemType={'button'}
onIonTabsWillChange={(e) => console.log('e', e)}
>
<IonTabButton tab="customers" href="/customers">
<IonIcon icon={logoCustomers} style={{ width: '100%' }} />
<IonLabel>Carteira</IonLabel>
</IonTabButton>
<IonTabButton tab="crm" href="/crm/kanban">
<IonIcon icon={logoCRM} style={{ width: '100%' }} />
<IonLabel>Propostas</IonLabel>
</IonTabButton>
<IonTabButton tab="dashboard" href="/dashboard">
<IonIcon icon={logoHome} style={{ width: '100%' }} />
<IonLabel>Home</IonLabel>
</IonTabButton>
<IonTabButton
tab="profile"
onClick={(e) => {
console.log('oi');
}}
>
<div
className="btn-profile"
onClick={async () => await menuController.open()}
>
<IonIcon icon={logoProfile} style={{ width: '100%' }} />
<IonLabel>Perfil</IonLabel>
</div>
</IonTabButton>
</IonTabBar>
</IonTabs>
{/* Panel Pages */}
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
};