[REPO REFACTOR]: changed to a better git repository structure with branches
This commit is contained in:
169
src/components/NavBar/NavBar.jsx
Normal file
169
src/components/NavBar/NavBar.jsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useAuth } from "../../hooks/useAuth";
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faSignIn,
|
||||
faUser,
|
||||
faSignOut,
|
||||
faHouse,
|
||||
faList,
|
||||
faBullhorn,
|
||||
faFile
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import '../../css/NavBar.css';
|
||||
|
||||
import NavGestion from './NavGestion';
|
||||
import ThemeButton from '../ThemeButton.jsx';
|
||||
|
||||
import IfAuthenticated from '../Auth/IfAuthenticated.jsx';
|
||||
import IfNotAuthenticated from '../Auth/IfNotAuthenticated.jsx';
|
||||
import IfRole from '../Auth/IfRole.jsx';
|
||||
|
||||
import { Navbar, Nav, Container } from 'react-bootstrap';
|
||||
import AnimatedDropdown from '../AnimatedDropdown.jsx';
|
||||
|
||||
import { CONSTANTS } from '../../util/constants.js';
|
||||
|
||||
const NavBar = () => {
|
||||
const { user, logout } = useAuth();
|
||||
const [showingUserDropdown, setShowingUserDropdown] = useState(false);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [isLg, setIsLg] = useState(window.innerWidth >= 992);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsLg(window.innerWidth >= 992 && window.innerWidth < 1200);
|
||||
};
|
||||
|
||||
handleResize(); // inicializar
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth >= 992) {
|
||||
setExpanded(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<Navbar expand="lg" sticky="top" expanded={expanded} onToggle={() => setExpanded(!expanded)}>
|
||||
<Container fluid>
|
||||
<Navbar.Toggle aria-controls="navbar" className="custom-toggler">
|
||||
<svg width="30" height="30" viewBox="0 0 30 30">
|
||||
<path
|
||||
d="M4 7h22M4 15h22M4 23h22"
|
||||
stroke="var(--navbar-link-color)"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
</svg>
|
||||
</Navbar.Toggle>
|
||||
|
||||
<Navbar.Collapse id="main-navbar">
|
||||
<Nav className="me-auto gap-2">
|
||||
<Nav.Link
|
||||
as={Link}
|
||||
to="/"
|
||||
title="Inicio"
|
||||
href="/"
|
||||
className={`text-truncate ${expanded ? "mt-3" : ""}`}
|
||||
onClick={() => setExpanded(false)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faHouse} className="me-2" />
|
||||
Inicio
|
||||
</Nav.Link>
|
||||
<Nav.Link
|
||||
as={Link}
|
||||
to="/lista-espera"
|
||||
title="Lista de espera"
|
||||
className={`text-truncate ${expanded ? "mt-3" : ""}`}
|
||||
onClick={() => setExpanded(false)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faList} className="me-2" />
|
||||
Lista de espera
|
||||
</Nav.Link>
|
||||
|
||||
<IfAuthenticated>
|
||||
<Nav.Link
|
||||
as={Link}
|
||||
to="/anuncios"
|
||||
title="Anuncios"
|
||||
className={`text-truncate ${expanded ? "mt-3" : ""}`}
|
||||
onClick={() => setExpanded(false)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faBullhorn} className="me-2" />Anuncios
|
||||
</Nav.Link>
|
||||
|
||||
<Nav.Link
|
||||
as={Link}
|
||||
to="/documentacion"
|
||||
title="Documentación"
|
||||
className={`text-truncate ${expanded ? "mt-3" : ""}`}
|
||||
onClick={() => setExpanded(false)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faFile} className="me-2" />Documentación
|
||||
</Nav.Link>
|
||||
</IfAuthenticated>
|
||||
|
||||
<IfRole roles={[CONSTANTS.ROLE_ADMIN, CONSTANTS.ROLE_DEV]}>
|
||||
<NavGestion onNavigate={() => setExpanded(false)} externalExpanded={expanded} />
|
||||
</IfRole>
|
||||
<div className="d-lg-none mt-2 ms-2">
|
||||
<ThemeButton onlyIcon={isLg} />
|
||||
</div>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
|
||||
<div className="d-none d-lg-block me-3">
|
||||
<ThemeButton onlyIcon={isLg} />
|
||||
</div>
|
||||
|
||||
<Nav className="d-flex flex-md-row flex-column gap-2 ms-auto align-items-center">
|
||||
<IfAuthenticated>
|
||||
<AnimatedDropdown
|
||||
className='end-0 position-absolute'
|
||||
show={showingUserDropdown}
|
||||
onMouseEnter={() => setShowingUserDropdown(true)}
|
||||
onMouseLeave={() => setShowingUserDropdown(false)}
|
||||
onToggle={(isOpen) => setShowingUserDropdown(isOpen)}
|
||||
trigger={
|
||||
<Link className="nav-link dropdown-toggle fw-bold">
|
||||
@{user?.user_name}
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<Link to="/perfil" className="text-muted dropdown-item nav-link">
|
||||
<FontAwesomeIcon icon={faUser} className="me-2" />
|
||||
Mi perfil
|
||||
</Link>
|
||||
<hr className="dropdown-divider" />
|
||||
<Link to="#" className="dropdown-item nav-link" onClick={logout}>
|
||||
<FontAwesomeIcon icon={faSignOut} className="me-2" />
|
||||
Cerrar sesión
|
||||
</Link>
|
||||
</AnimatedDropdown>
|
||||
</IfAuthenticated>
|
||||
|
||||
<IfNotAuthenticated>
|
||||
<Nav.Link as={Link} to="/login" title="Iniciar sesión">
|
||||
<FontAwesomeIcon icon={faSignIn} className="me-2" />
|
||||
Iniciar sesión
|
||||
</Nav.Link>
|
||||
</IfNotAuthenticated>
|
||||
</Nav>
|
||||
</Container>
|
||||
</Navbar>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavBar;
|
||||
67
src/components/NavBar/NavGestion.jsx
Normal file
67
src/components/NavBar/NavGestion.jsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import AnimatedDropdown from '../../components/AnimatedDropdown';
|
||||
import AnimatedDropend from '../../components/AnimatedDropend';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faGear, faUsers, faMoneyBill, faWallet, faFileInvoice,
|
||||
faEnvelope,
|
||||
faBellConcierge,
|
||||
faPeopleGroup
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import useRequestCount from '../../hooks/useRequestCount';
|
||||
|
||||
const NavGestion = ({ onNavigate, externalExpanded }) => {
|
||||
const [showing, setShowing] = useState(false);
|
||||
const count = useRequestCount();
|
||||
|
||||
return (
|
||||
<AnimatedDropdown
|
||||
show={showing}
|
||||
onMouseEnter={() => setShowing(true)}
|
||||
onMouseLeave={() => setShowing(false)}
|
||||
onToggle={(isOpen) => setShowing(isOpen)}
|
||||
trigger={
|
||||
<Link className={`nav-link dropdown-toggle ${externalExpanded ? "mt-3" : ""}`} role="button">
|
||||
<FontAwesomeIcon icon={faGear} className="me-2" />Gestión
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
{/* Submenú lateral: Asociación */}
|
||||
<AnimatedDropend
|
||||
trigger={
|
||||
<Link className="nav-link dropdown-toggle" role='button'>
|
||||
<FontAwesomeIcon icon={faPeopleGroup} className="me-2" />Asociación
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<Link to="/gestion/socios" className="dropdown-item nav-link" onClick={onNavigate}>
|
||||
<FontAwesomeIcon icon={faUsers} className="me-2" />Socios
|
||||
</Link>
|
||||
<Link to="/gestion/ingresos" className="dropdown-item nav-link" onClick={onNavigate}>
|
||||
<FontAwesomeIcon icon={faMoneyBill} className="me-2" />Ingresos
|
||||
</Link>
|
||||
<Link to="/gestion/gastos" className="dropdown-item nav-link" onClick={onNavigate}>
|
||||
<FontAwesomeIcon icon={faWallet} className="me-2" />Gastos
|
||||
</Link>
|
||||
<Link to="/gestion/balance" className="dropdown-item nav-link" onClick={onNavigate}>
|
||||
<FontAwesomeIcon icon={faFileInvoice} className="me-2" />Balance
|
||||
</Link>
|
||||
</AnimatedDropend>
|
||||
|
||||
<Link to="/gestion/solicitudes" className="dropdown-item nav-link" onClick={onNavigate}>
|
||||
<FontAwesomeIcon icon={faBellConcierge} />
|
||||
<span className="icon-with-badge">
|
||||
{count > 0 && <span className="icon-badge">{count}</span>}
|
||||
</span>
|
||||
Solicitudes
|
||||
</Link>
|
||||
|
||||
<Link to="/correo" className="dropdown-item nav-link" onClick={onNavigate}>
|
||||
<FontAwesomeIcon icon={faEnvelope} className="me-2" />Correo
|
||||
</Link>
|
||||
</AnimatedDropdown>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavGestion;
|
||||
Reference in New Issue
Block a user