68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import React, { FC, useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { useSelector } from 'react-redux'
|
|
import classNames from 'classnames'
|
|
import { Collapse, Nav, NavItem, NavLink } from 'reactstrap'
|
|
import { FeatherIcon } from '../../../components/FeatherIcons'
|
|
import { IMenuItem, IReduxState, ISubMenuItem } from '../../../interfaces'
|
|
import style from './scss/style.module.scss'
|
|
|
|
interface ISubMenu {
|
|
icon?: string,
|
|
title: string,
|
|
items: ISubMenuItem []
|
|
}
|
|
|
|
const SubMenu : FC<ISubMenu> = (props: ISubMenu) => {
|
|
const { icon, title, items } = props
|
|
|
|
const [collapsed, setCollapsed] = useState(true)
|
|
const toggle = () => setCollapsed(!collapsed)
|
|
|
|
return (
|
|
<div>
|
|
<NavItem onClick={toggle} className={classNames(style.navitem, !collapsed ? style.menuopen : '')}>
|
|
<NavLink className={classNames("dropdown-toggle", `${style.navlink}`)}>
|
|
{icon ? <FeatherIcon icon={icon}/> : ''}
|
|
<span className={style.linktitle}>{title}</span>
|
|
</NavLink>
|
|
</NavItem>
|
|
<Collapse isOpen={!collapsed} navbar className={classNames(`${style.itemsmenu}`, { "mb-1": !collapsed })}>
|
|
{items.map((item: ISubMenuItem, index: number) => (
|
|
<NavItem key={index} className={classNames(style.navitem, "pl-4")}>
|
|
<NavLink tag={Link} to={item.target} className={style.navlink}>
|
|
{item.icon ? <FeatherIcon icon={item.icon}/> : ''}
|
|
<span className={style.linktitle}>{item.title}</span>
|
|
</NavLink>
|
|
</NavItem>
|
|
))}
|
|
</Collapse>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const SideMenu : FC = () => {
|
|
let { sideMenu = [] } = useSelector((state: IReduxState) => state.settings)
|
|
|
|
return <div className={style.sidemenu}>
|
|
<Nav vertical className="list-unstyled pb-3">
|
|
{sideMenu.map((item: IMenuItem, index: number) => {
|
|
if(item.items) {
|
|
return <SubMenu key={index} icon={item.icon} title={item.title} items={item.items} />
|
|
}
|
|
|
|
return <NavItem key={index} className={style.navitem}>
|
|
<NavLink tag={Link} to={item.target} className={style.navlink}>
|
|
{item.icon ? <FeatherIcon icon={item.icon}/> : ''}
|
|
<span className={style.linktitle}>{item.title}</span>
|
|
</NavLink>
|
|
</NavItem>
|
|
})}
|
|
</Nav>
|
|
</div>
|
|
}
|
|
|
|
export {
|
|
SideMenu
|
|
}
|