37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
import { IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonMenu, IonMenuToggle, IonNote } from '@ionic/react';
|
|
|
|
import { useLocation } from 'react-router-dom';
|
|
import { star, starOutline } from 'ionicons/icons';
|
|
import './Menu.css';
|
|
|
|
const Menu = ({ pages }) => {
|
|
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<IonMenu contentId="main" type="overlay">
|
|
<IonContent>
|
|
<IonList id="inbox-list">
|
|
<IonListHeader>Overlay Hooks</IonListHeader>
|
|
<IonNote>Choose one below to see a demo</IonNote>
|
|
|
|
{ pages.map((appPage, index) => {
|
|
|
|
const isSelected = location.pathname === appPage.url;
|
|
|
|
return (
|
|
<IonMenuToggle key={ index } autoHide={false}>
|
|
<IonItem className={ isSelected ? 'selected' : '' } routerLink={ appPage.url } routerDirection="none" lines="none" detail={false}>
|
|
<IonIcon slot="start" icon={ isSelected ? star : starOutline } />
|
|
<IonLabel>{ appPage.label }</IonLabel>
|
|
</IonItem>
|
|
</IonMenuToggle>
|
|
);
|
|
})}
|
|
</IonList>
|
|
</IonContent>
|
|
</IonMenu>
|
|
);
|
|
};
|
|
|
|
export default Menu; |