|
|
|
@ -1,21 +1,27 @@
|
|
|
|
|
// ** React Imports
|
|
|
|
|
import { useEffect } from 'react' |
|
|
|
|
import { NavLink } from 'react-router-dom' |
|
|
|
|
import { useEffect } from 'react'; |
|
|
|
|
import { NavLink } from 'react-router-dom'; |
|
|
|
|
|
|
|
|
|
// ** Third Party Components
|
|
|
|
|
import { Disc, X, Circle } from 'react-feather' |
|
|
|
|
import { Disc, X, Circle } from 'react-feather'; |
|
|
|
|
|
|
|
|
|
// ** Config
|
|
|
|
|
import themeConfig from '@configs/themeConfig' |
|
|
|
|
import themeConfig from '@configs/themeConfig'; |
|
|
|
|
|
|
|
|
|
const VerticalMenuHeader = props => { |
|
|
|
|
// ** Props
|
|
|
|
|
const { menuCollapsed, setMenuCollapsed, setMenuVisibility, setGroupOpen, menuHover } = props |
|
|
|
|
const { |
|
|
|
|
menuCollapsed, |
|
|
|
|
setMenuCollapsed, |
|
|
|
|
setMenuVisibility, |
|
|
|
|
setGroupOpen, |
|
|
|
|
menuHover |
|
|
|
|
} = props; |
|
|
|
|
|
|
|
|
|
// ** Reset open group
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (!menuHover && menuCollapsed) setGroupOpen([]) |
|
|
|
|
}, [menuHover, menuCollapsed]) |
|
|
|
|
if (!menuHover && menuCollapsed) setGroupOpen([]); |
|
|
|
|
}, [menuHover, menuCollapsed]); |
|
|
|
|
|
|
|
|
|
// ** Menu toggler component
|
|
|
|
|
const Toggler = () => { |
|
|
|
@ -27,7 +33,7 @@ const VerticalMenuHeader = props => {
|
|
|
|
|
className='text-primary toggle-icon d-none d-xl-block' |
|
|
|
|
onClick={() => setMenuCollapsed(true)} |
|
|
|
|
/> |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
return ( |
|
|
|
|
<Circle |
|
|
|
@ -36,15 +42,15 @@ const VerticalMenuHeader = props => {
|
|
|
|
|
className='text-primary toggle-icon d-none d-xl-block' |
|
|
|
|
onClick={() => setMenuCollapsed(false)} |
|
|
|
|
/> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='navbar-header'> |
|
|
|
|
<ul className='nav navbar-nav flex-row'> |
|
|
|
|
<li className='nav-item mr-auto'> |
|
|
|
|
<NavLink to='/' className='navbar-brand'> |
|
|
|
|
<NavLink to='/' className='navbar-brand' style={{ marginRight: 0 }}> |
|
|
|
|
<span className='brand-logo'> |
|
|
|
|
<img src={themeConfig.app.appLogoImage} alt='logo' /> |
|
|
|
|
</span> |
|
|
|
@ -54,12 +60,16 @@ const VerticalMenuHeader = props => {
|
|
|
|
|
<li className='nav-item nav-toggle'> |
|
|
|
|
<div className='nav-link modern-nav-toggle cursor-pointer'> |
|
|
|
|
<Toggler /> |
|
|
|
|
<X onClick={() => setMenuVisibility(false)} className='toggle-icon icon-x d-block d-xl-none' size={20} /> |
|
|
|
|
<X |
|
|
|
|
onClick={() => setMenuVisibility(false)} |
|
|
|
|
className='toggle-icon icon-x d-block d-xl-none' |
|
|
|
|
size={20} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default VerticalMenuHeader |
|
|
|
|
export default VerticalMenuHeader; |
|
|
|
|