52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import React, { FC, useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { useSelector } from 'react-redux'
|
|
import { Button, Collapse, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'
|
|
import { FeatherIcon } from '../../../components/FeatherIcons'
|
|
|
|
interface INavMenu {
|
|
toggleSidebar: () => void
|
|
}
|
|
|
|
const NavMenu : FC<INavMenu> = (props: INavMenu) => {
|
|
//let { siteName, topMenu = [] } = useSelector((state: IReduxState) => state.settings)
|
|
|
|
const { toggleSidebar } = props
|
|
|
|
const [state, hookState] = useState({
|
|
isOpen: false
|
|
})
|
|
|
|
const toggle = () => {
|
|
hookState({
|
|
isOpen: !state.isOpen
|
|
})
|
|
}
|
|
|
|
return <header>
|
|
{/*<Navbar className="navbar-expand-sm navbar-toggleable-sm fixed-top border-bottom box-shadow mb-3 bg-light">
|
|
<Button color="light" onClick={toggleSidebar}>
|
|
<FeatherIcon icon="align-left" />
|
|
</Button>
|
|
<NavbarBrand href="/">{siteName}</ NavbarBrand>
|
|
<NavbarToggler onClick={toggle} className="mr-2"/>
|
|
<Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={state.isOpen} navbar>
|
|
<ul className="navbar-nav flex-grow">
|
|
{topMenu.map((item: IMenuItem, index: number) => {
|
|
return <NavItem key={index}>
|
|
<NavLink tag={Link} className="text-dark" to={item.target}>
|
|
{item.icon ? <FeatherIcon icon={item.icon}/> : ''}
|
|
{item.title}
|
|
</NavLink>
|
|
</NavItem>
|
|
})}
|
|
</ul>
|
|
</Collapse>
|
|
</Navbar>*/}
|
|
</header>
|
|
}
|
|
|
|
export {
|
|
NavMenu
|
|
}
|