139 lines
4.0 KiB
JavaScript
139 lines
4.0 KiB
JavaScript
import React from 'react'
|
|
import { useState, useEffect } from 'react'
|
|
import { Link, useLocation } from 'react-router-dom'
|
|
import "./Estilo/Toggle.css"
|
|
|
|
const ToggleSidebar = ({ perfil, items, defaultOpen = false }) => {
|
|
const [isOpen, setOpen] = useState(defaultOpen)
|
|
const [openSubmenu, setOpenSubmenu] = useState(null)
|
|
const [activeLink, setActiveLink] = useState('')
|
|
const location = useLocation()
|
|
|
|
useEffect(() => {
|
|
const currentPath = location.pathname
|
|
setActiveLink(currentPath)
|
|
|
|
const findActiveSubmenu = () => {
|
|
for (let item of items) {
|
|
if (item.submenu) {
|
|
const activeSubItem = item.submenu.find(subItem =>
|
|
subItem.url === currentPath
|
|
)
|
|
if (activeSubItem) {
|
|
setOpenSubmenu(item.key)
|
|
return
|
|
}
|
|
} else if (item.url === currentPath) {
|
|
setActiveLink(currentPath)
|
|
}
|
|
}
|
|
}
|
|
|
|
findActiveSubmenu()
|
|
}, [location.pathname, items])
|
|
|
|
const OpenClose = () => {
|
|
setOpen(!isOpen)
|
|
}
|
|
|
|
const handleSubmenuClick = (key) => {
|
|
setOpenSubmenu(openSubmenu === key ? null : key)
|
|
}
|
|
|
|
const isLinkActive = (url) => {
|
|
return activeLink === url
|
|
}
|
|
|
|
const renderLink = (item, isSubmenu = false) => {
|
|
const isActive = isLinkActive(item.url)
|
|
const linkClass = `sidebar-link ${isActive ? 'active' : ''} ${isSubmenu ? 'submenu-link' : ''}`
|
|
|
|
if (item.url && item.url.startsWith("/")) {
|
|
return (
|
|
<Link
|
|
to={item.url}
|
|
className={linkClass}
|
|
onClick={() => !isSubmenu && setActiveLink(item.url)}
|
|
>
|
|
{item.icon && <i className={`bi bi-${item.icon}`}></i>}
|
|
<span>{item.name}</span>
|
|
{isActive && <div className="active-indicator"></div>}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<a
|
|
href={item.url}
|
|
className={linkClass}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{item.icon && <i className={`bi bi-${item.icon}`}></i>}
|
|
<span>{item.name}</span>
|
|
<i className="bi bi-box-arrow-up-right external-icon"></i>
|
|
</a>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="toggle-sidebar-wrapper">
|
|
<div className='container-title' onClick={OpenClose}>
|
|
<p className='toggle-title'>{perfil}</p>
|
|
{isOpen
|
|
? <i className="bi bi-caret-down-fill toggle-arrow"></i>
|
|
: <i className="bi bi-caret-right-fill toggle-arrow"></i>
|
|
}
|
|
</div>
|
|
|
|
{isOpen && (
|
|
<ul className='sidebar-menu-list'>
|
|
{items.map((item, index) => {
|
|
if (item.isTitle) {
|
|
return (
|
|
<li key={`title-${index}`} className="sidebar-title">
|
|
<span>{item.name}</span>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
if (item.submenu) {
|
|
const isSubmenuActive = openSubmenu === item.key
|
|
return (
|
|
<li
|
|
key={item.key || index}
|
|
className={`sidebar-item has-sub ${isSubmenuActive ? "active" : ""}`}
|
|
>
|
|
<button
|
|
type="button"
|
|
className={`sidebar-link btn ${isSubmenuActive ? "submenu-active" : ""}`}
|
|
onClick={() => handleSubmenuClick(item.key)}
|
|
>
|
|
<i className={`bi bi-${item.icon}`}></i>
|
|
<span>{item.name}</span>
|
|
</button>
|
|
|
|
<ul className={`submenu ${isSubmenuActive ? "active" : ""}`}>
|
|
{item.submenu.map((subItem, subIndex) => (
|
|
<li key={subIndex} className="submenu-item">
|
|
{renderLink(subItem, true)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<li key={item.key || index} className="sidebar-item">
|
|
{renderLink(item)}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ToggleSidebar |