Notes

import React, {useState} from 'react';
import {observer} from 'mobx-react';
import {Link} from 'react-router-dom';
import {useLocation} from 'react-router-dom';
import hasRole from '@aosprodsys/brucke-ui-core/dist/es/utils/hasRole';
import LinkConstants from '../constants/LinkConstants';
import {StoreContext} from '../utils/StoreContext';
import styles from '../sass/components/left-nav.scss';

export const LeftNav = () => {
const {
appState: {isLeftNavOpen, user}
} = React.useContext(StoreContext);
const location = useLocation(),
{pathname = ''} = location || {};
const [expandedMenus, setExpandedMenus] = useState({});
const toggleMenu = name => {
setExpandedMenus(prev => ({...prev, [name]: !prev[name]}));
};

return (
<section className={`${styles.leftNav} left-nav ${isLeftNavOpen ? 'open' : ''}`}>
<div className="links-wrapper">
{LinkConstants.map((link, ind) => {
if (link.requiredRoles && !hasRole(link.requiredRoles, user?.roles)) return null;

if (link.url) {
return (
<Link key={ind} to={link.url} className={`${pathname === link.url ? 'active' : ''} list-link`}>
<div className="global-body-medium nav-item main-nav">{link.name}</div>
</Link>
);
}

const isExpanded = !!expandedMenus[link.name];
const hasSubmenu = link.links && link.links.length > 0;
return (
<div key={ind}>
<div className="list-link" onClick={() => hasSubmenu && toggleMenu(link.name)}>
<div className={`${pathname === link.url ? 'active' : ''} global-body-medium nav-item main-nav`}>
{link.name}
</div>

{hasSubmenu && <span className={`expand-icon ${isExpanded ? 'icon-chevronup' : 'icon-chevrondown'}`} />}
</div>

{hasSubmenu && isExpanded && <SubNav navObj={link} key={ind} user={user} pathname={pathname} />}
</div>
);
})}
</div>
</section>
);
};

export const SubNav = ({navObj, user, pathname}) => {
const [expandedMenus, setExpandedMenus] = useState({});

const toggleSubmenu = name => {
setExpandedMenus(prevMenus => ({...prevMenus, [name]: !prevMenus[name]}));
};

return (
<section className={`subnav-container`}>
{navObj?.links?.map((link, index) => {
const isSubMenuOpen = !!expandedMenus[link.name];
const hasSubMenu = link.links && link.links.length > 0;

return (
<div key={index}>
<div className="list-link">
<Link to={link.url} className={`${pathname === link.url ? 'active' : ''}`}>
<div className="global-body-medium nav-item main-nav">{link.name}</div>
</Link>
{hasSubMenu && (
<span
className={`icon ${isSubMenuOpen ? 'icon-chevronup' : 'icon-chevrondown'}`}
onClick={() => toggleSubmenu(link.name)}
/>
)}
</div>
{hasSubMenu &&
isSubMenuOpen && (
<div className={`list-wrapper ${isSubMenuOpen ? 'open' : ''}`}>
{link.links.map((sublink, subIndex) => (
<Link
to={sublink.url}
className={`${pathname === sublink.url ? 'active' : ''} list-link`}
key={subIndex}
>
<div className="global-body-medium nav-item sub-nav">{sublink.name}</div>
</Link>
))}
</div>
)}
</div>
);
})}
</section>
);
};

export default observer(LeftNav);