Hi, kindly advise on how to create a side menu and main tabs bar to display different pages based on the role of user.
Edit:
- I am using Firebase Auth to authenticate users and Firestore for storage.
- The user roles in my project are business and customer.
Below is my menu code:
import {
IonContent,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonMenu,
IonMenuToggle,
IonNote
} from '@ionic/react';
import React from 'react';
import { useLocation } from 'react-router-dom';
import { barChartOutline, barChartSharp, scanOutline, scanSharp, bookmarkOutline, calculatorOutline, calculatorSharp, terminalOutline, terminalSharp, personCircleOutline, personCircleSharp, peopleOutline, peopleSharp, personAddOutline, personAddSharp, fileTrayFullOutline,fileTrayFullSharp, pricetagsSharp, pricetagsOutline, logInSharp, logInOutline, logOutSharp, logOutOutline, documentTextSharp, documentTextOutline, arrowDownCircleSharp, arrowDownCircleOutline, arrowUpCircleSharp, arrowUpCircleOutline, infiniteSharp, infiniteOutline } from 'ionicons/icons';
import './Menu.css';
interface AppPage {
url: string;
iosIcon: string;
mdIcon: string;
title: string;
}
/*Business Pages*/
const appBPages: AppPage[] = [
{
title: 'Dashboard',
url: '/tabs/BDashboard',
iosIcon: terminalOutline,
mdIcon: terminalSharp
},
{
title: 'Membership',
url: '/tabs/Membership',
iosIcon: personAddOutline,
mdIcon: personAddSharp
},
{
title: 'Product Catalog',
url: '/tabs/ProductCatalog',
iosIcon: pricetagsOutline,
mdIcon: pricetagsSharp
},
{
title: 'Reports',
url: '/tabs/Reports',
iosIcon: barChartOutline,
mdIcon: barChartSharp
},
{
title: 'QR Scanner',
url: '/QRScanner',
iosIcon: scanOutline,
mdIcon: scanSharp
},
{
title: 'Business Rules',
url: '/BusinessRules',
iosIcon: calculatorOutline,
mdIcon: calculatorSharp
},
{
title: 'Campaign Management',
url: '/CampaignManagement',
iosIcon: fileTrayFullOutline,
mdIcon: fileTrayFullSharp
},
{
title: 'Member Panel',
url: '/MemberPanel',
iosIcon: peopleOutline,
mdIcon: peopleSharp
},
{
title: 'Business Profile',
url: '/BusinessProfile',
iosIcon: personCircleOutline,
mdIcon: personCircleSharp
},
{
title: 'Logout',
url: '/BSignOut',
iosIcon: logOutOutline,
mdIcon: logOutSharp
},
{
title: 'Login',
url: '/BSignIn',
iosIcon: logInOutline,
mdIcon: logInSharp
}
];
/*Customer Pages*/
const appCPages: AppPage[] = [
{
title: 'Dashboard',
url: '/CDashboard',
iosIcon: terminalOutline,
mdIcon: terminalSharp
},
{
title: 'Subscriptions',
url: '/Subscriptions',
iosIcon: personAddOutline,
mdIcon: personAddSharp
},
{
title: 'Redemption Catalog',
url: '/RedemptionCatalog',
iosIcon: pricetagsOutline,
mdIcon: pricetagsSharp
},
{
title: 'EStatement',
url: '/EStatement',
iosIcon: documentTextOutline,
mdIcon: documentTextSharp
},
{
title: 'QR Code',
url: '/QRCode',
iosIcon: scanOutline,
mdIcon: scanSharp
},
{
title: 'Points',
url: '/Points',
iosIcon: infiniteOutline,
mdIcon: infiniteSharp
},
{
title: 'Earned Points',
url: '/EPoints',
iosIcon: arrowDownCircleOutline,
mdIcon: arrowDownCircleSharp
},
{
title: 'Redeemed Points',
url: '/RPoints',
iosIcon: arrowUpCircleOutline,
mdIcon: arrowUpCircleSharp
},
{
title: 'Profile',
url: '/CustomerProfile',
iosIcon: personCircleOutline,
mdIcon: personCircleSharp
},
{
title: 'Logout',
url: '/CSignOut',
iosIcon: logOutOutline,
mdIcon: logOutSharp
},
{
title: 'Login',
url: '/CSignIn',
iosIcon: logInOutline,
mdIcon: logInSharp
}
];
const labels = ['Active', 'Business', 'Favorite Catalog','Reminders'];
const Menu: React.FC = () => {
const location = useLocation();
return (
<IonMenu contentId="main" type="overlay">
<IonContent>
{/*Business Menu Pages*/}
<IonList id="inbox-list">
<IonListHeader>Menu</IonListHeader>
<IonNote>@BusinessName</IonNote>
{appBPages.map((appPage, index) => {
return (
<IonMenuToggle key={index} autoHide={false}>
<IonItem className={location.pathname === appPage.url ? 'selected' : ''} routerLink={appPage.url} routerDirection="none" lines="none" detail={false}>
<IonIcon slot="start" ios={appPage.iosIcon} md={appPage.mdIcon} />
<IonLabel>{appPage.title}</IonLabel>
</IonItem>
</IonMenuToggle>
);
})}
</IonList>
<IonList id="labels-list">
<IonListHeader>Labels</IonListHeader>
{labels.map((label, index) => (
<IonItem lines="none" key={index}>
<IonIcon slot="start" icon={bookmarkOutline} />
<IonLabel>{label}</IonLabel>
</IonItem>
))}
</IonList>
{/*Customer Menu Pages*/}
<IonList id="inbox-list">
<IonListHeader>Menu</IonListHeader>
<IonNote>@CustomerName</IonNote> {appCPages.map((appPage, index) => {
return (
<IonMenuToggle key={index} autoHide={false}>
<IonItem className={location.pathname === appPage.url ? 'selected' : ''} routerLink={appPage.url} routerDirection="none" lines="none" detail={false}>
<IonIcon slot="start" ios={appPage.iosIcon} md={appPage.mdIcon} />
<IonLabel>{appPage.title}</IonLabel>
</IonItem>
</IonMenuToggle>
);
})}
</IonList>
<IonList id="labels-list">
<IonListHeader>Labels</IonListHeader>
{labels.map((label, index) => (
<IonItem lines="none" key={index}>
<IonIcon slot="start" icon={bookmarkOutline} />
<IonLabel>{label}</IonLabel>
</IonItem>
))}
</IonList>
</IonContent>
</IonMenu>
);
};
export default Menu;
My Business Login code;
import React, { useState } from 'react';
import { IonButton, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider} from '@ionic/react';
import { enter} from 'ionicons/icons';
import fireConfig from '../../data/firebaseConfig';
const BSignIn: React.FC= () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [formSubmitted, setFormSubmitted] = useState(false);
const [emailError, setEmailError] = useState(false);
const [passwordError, setPasswordError] = useState(false);
const clearErrors = () =>{
setEmailError(true);
setPasswordError(true);
}
const handleBSignIn= async (e: React.FormEvent)=>{
e.preventDefault();
clearErrors();
fireConfig
.auth()
.signInWithEmailAndPassword(email,password)
.then((user) => {
// Signed in
})
.catch((error) => {
switch (error.code) {
case "auth/invalid-email":
case "auth/user-not-found":
setEmailError(error.message);
break;
case "auth/invalid-password":
setPasswordError(error.message);
break;
}
});
}
return (
<IonPage id="bSignIn-page">
<IonHeader>
<IonToolbar>
<IonTitle>Log In</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<div className="login-logo">
<img src="assets/icon/uzalendo.png" alt="icon.png" />
</div>
<form onSubmit={handleBSignIn}>
<IonList>
<IonItem>
<IonLabel position="stacked" color="primary">Email</IonLabel>
<IonInput type="email" value={email} placeholder="yourname@email.com" onIonChange={e => {setEmail(e.detail.value!); setEmailError(false);}} required></IonInput>
</IonItem>
<IonItem>
<IonLabel position="stacked" color="primary">Password</IonLabel>
<IonInput type="password" value={password} placeholder="Enter password" onIonChange={e => {setPassword(e.detail.value!); setPasswordError(false);}} required></IonInput>
{/*(click)='hideShowPassword()'*/}
</IonItem>
</IonList>
<IonButton type="submit">
<IonIcon icon={enter}></IonIcon>
Login
</IonButton>
</form>
</IonContent>
</IonPage>
);
};
export default BSignIn;