|
|
@ -1,17 +1,73 @@ |
|
|
|
import { Container, Navbar } from 'react-bootstrap' |
|
|
|
import { useEffect, useState } from 'react' |
|
|
|
|
|
|
|
import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap' |
|
|
|
import { useSelector } from 'react-redux' |
|
|
|
import { useSelector } from 'react-redux' |
|
|
|
import { Link } from 'react-router-dom' |
|
|
|
import { Link } from 'react-router-dom' |
|
|
|
|
|
|
|
import IMenu from '../../Interfaces/Auth/IMenu' |
|
|
|
import { RootState } from '../../store/store' |
|
|
|
import { RootState } from '../../store/store' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
interface Isubmenu { |
|
|
|
|
|
|
|
menu: IMenu[] |
|
|
|
|
|
|
|
descripcion: string |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function Submenu({ descripcion, menu }: Isubmenu) { |
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<NavDropdown title={descripcion} id='basic-nav-dropdown'> |
|
|
|
|
|
|
|
{menu.map((item, index) => { |
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
<NavDropdown.Item href={item.url} key={item.url}> |
|
|
|
|
|
|
|
{item.descripcion} |
|
|
|
|
|
|
|
</NavDropdown.Item> |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
})} |
|
|
|
|
|
|
|
</NavDropdown> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function AOLNavbar() { |
|
|
|
function AOLNavbar() { |
|
|
|
|
|
|
|
//const MenuItems = useSelector((state: RootState) => state.MenuItems.MenuItems)
|
|
|
|
|
|
|
|
let _menu: IMenu[] = [] |
|
|
|
|
|
|
|
let mn: string = '' |
|
|
|
|
|
|
|
const [menu, setMenu] = useState(localStorage.getItem('menu') ? localStorage.getItem('menu') : '') |
|
|
|
|
|
|
|
const [mainMenu, setMainMenu] = useState(_menu) |
|
|
|
const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado) |
|
|
|
const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado) |
|
|
|
const User = useSelector((state: RootState) => state.UserProfile.UserProfile.User) |
|
|
|
const User = useSelector((state: RootState) => state.UserProfile.UserProfile.User) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (menu) { |
|
|
|
|
|
|
|
setMainMenu(JSON.parse(menu)) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, [menu]) |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Navbar bg='light'> |
|
|
|
<Navbar bg='light'> |
|
|
|
<Container> |
|
|
|
<Container> |
|
|
|
<Navbar.Brand href='#home'>AOL</Navbar.Brand> |
|
|
|
<Navbar.Brand href='#home'>AOL</Navbar.Brand> |
|
|
|
<Navbar.Toggle /> |
|
|
|
<Navbar.Toggle /> |
|
|
|
|
|
|
|
<Navbar.Collapse id='basic-navbar-nav'> |
|
|
|
|
|
|
|
<Nav className='me-auto'> |
|
|
|
|
|
|
|
{mainMenu |
|
|
|
|
|
|
|
? mainMenu.map((itemMenu, index) => { |
|
|
|
|
|
|
|
if (itemMenu.padreId === 0) { |
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
<> |
|
|
|
|
|
|
|
<Submenu |
|
|
|
|
|
|
|
descripcion={itemMenu.descripcion} |
|
|
|
|
|
|
|
key={itemMenu.id} |
|
|
|
|
|
|
|
menu={mainMenu.filter(function (item) { |
|
|
|
|
|
|
|
return item.padreId === itemMenu.id |
|
|
|
|
|
|
|
})} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
: ''} |
|
|
|
|
|
|
|
</Nav> |
|
|
|
|
|
|
|
</Navbar.Collapse> |
|
|
|
|
|
|
|
|
|
|
|
<Navbar.Collapse className='justify-content-end'> |
|
|
|
<Navbar.Collapse className='justify-content-end'> |
|
|
|
{UserLogued ? ( |
|
|
|
{UserLogued ? ( |
|
|
|
<Navbar.Text> |
|
|
|
<Navbar.Text> |
|
|
|