51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
/**
|
|
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
|
|
*/
|
|
import {useLocation} from 'react-router-dom';
|
|
import {useSelector} from 'react-redux';
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
|
|
import {RootState} from 'store';
|
|
import urlRoute from 'routers/url-routes';
|
|
|
|
import {MenuLayout, MenuItem} from './style';
|
|
|
|
interface IMenu {
|
|
toggleShowMenu: () => void;
|
|
}
|
|
|
|
const menuTitles = Object.keys(urlRoute).filter((menuTitle: string) => menuTitle !== 'login');
|
|
const Menu = (props: IMenu) => {
|
|
const {toggleShowMenu} = props;
|
|
const applicationId = useSelector((state: RootState) => state.authentication.applicationId);
|
|
const {pathname} = useLocation();
|
|
const currentLocation = pathname.split('/')[2];
|
|
|
|
return (
|
|
<MenuLayout>
|
|
{menuTitles.map((menuItem: string): JSX.Element | null => {
|
|
const {path, icon, notSupported} = urlRoute[menuItem];
|
|
|
|
if (notSupported) {
|
|
return null;
|
|
}
|
|
|
|
const active = currentLocation === path;
|
|
|
|
return (
|
|
<MenuItem
|
|
className={active ? 'active' : ''}
|
|
onClick={toggleShowMenu}
|
|
key={menuItem}
|
|
to={`/${applicationId}/${path}`}
|
|
>
|
|
<span><FontAwesomeIcon icon={icon} /></span>
|
|
<p>{menuItem}</p>
|
|
</MenuItem>
|
|
);
|
|
})}
|
|
</MenuLayout>
|
|
);
|
|
};
|
|
|
|
export default Menu; |