ReactJS tree menu component.
import LeftMenu from '@src/components/leftMenu/LeftMenu';
<LeftMenu menuItems={leftMenuItems}
collapsed={this.state.leftMenuCollapsed}
linkClickHandler={()=>this.closeLeftMenuMobile()}/>
JSON array of objects. There are objects of 2 types:
A group has 2 fields:
An item has the following fields:
icon: ['fab', 'facebook']
// or
icon: 'envelope',
lazy(() => import('@src/<path_to_component>'))
Example of the top menu JSON:
const dashboardMenu = [
{
groupTitle: 'Email',
items: [
{
title: 'Inbox',
icon: ['fab', 'facebook'],
color: '#e4951f',
url: '/app/inbox',
component: lazy(() => import('@src/modules/inbox/InboxUI'))
}
]
}];
Note 1. If no icon provided only title will be shown.
Note 2. If an icon is provided but no color, the default color will used. It can be found in /src/shared/theme/dashboard.scss:
aside.collapsed .aside-menu .menu-item svg {
color: #1fe4b7;
}