|
1 |
| -import { useNavigate } from "react-router-dom"; |
| 1 | +import { useState } from "react"; |
| 2 | +import { useNavigate, Link } from "react-router-dom"; |
2 | 3 | import Logo from "./../Logo/Logo.jsx";
|
3 |
| -import { Link } from "react-router-dom"; |
| 4 | + |
| 5 | +function SidebarItem({ title, children }) { |
| 6 | + const [open, setOpen] = useState(false); |
| 7 | + |
| 8 | + const toggleOpen = () => setOpen((prev) => !prev); |
| 9 | + |
| 10 | + return ( |
| 11 | + <div> |
| 12 | + <div |
| 13 | + className="flex items-center px-6 py-2 mt-4 text-white font-semibold hover:bg-gray-700 hover:text-[#FF9500] hover:bg-opacity-25 cursor-pointer" |
| 14 | + onClick={toggleOpen} |
| 15 | + > |
| 16 | + <span className="mx-3">{title}</span> |
| 17 | + <span className="ml-auto mr-3">{open ? "-" : "+"}</span> |
| 18 | + </div> |
| 19 | + {open && <div className="ml-6">{children}</div>} |
| 20 | + </div> |
| 21 | + ); |
| 22 | +} |
4 | 23 |
|
5 | 24 | function Sidebar({ closeSidebar }) {
|
6 | 25 | const navigate = useNavigate();
|
7 | 26 |
|
8 |
| - // Logo Action |
9 | 27 | const handleClickLogo = () => navigate("/");
|
10 | 28 |
|
11 |
| - // TO FIX ${sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'} |
12 |
| - |
13 | 29 | return (
|
14 | 30 | <div
|
15 | 31 | className="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform
|
16 |
| - lg:translate-x-0 lg:static lg:inset-0" |
| 32 | + lg:translate-x-0 lg:static lg:inset-0" |
17 | 33 | >
|
18 | 34 | <Logo onClick={handleClickLogo} />
|
19 | 35 | <nav id="sidebar" className="mt-10 tracking-wider">
|
20 |
| - <Link |
21 |
| - to="/athletes" |
22 |
| - className="flex items-center px-6 py-2 mt-4 text-white font-semibold hover:bg-gray-700 hover:text-[#FF9500] hover:bg-opacity-25" |
23 |
| - onClick={closeSidebar} |
24 |
| - > |
25 |
| - <span className="mx-3">Atleti</span> |
26 |
| - </Link> |
27 |
| - <Link |
28 |
| - to="/trainers" |
29 |
| - className="flex items-center px-6 py-2 mt-4 text-white font-semibold hover:bg-gray-700 hover:text-[#FF9500] hover:bg-opacity-25" |
30 |
| - onClick={closeSidebar} |
31 |
| - > |
32 |
| - <span className="mx-3">Allenatori</span> |
33 |
| - </Link> |
34 |
| - <Link |
35 |
| - to="/sport-doctors" |
36 |
| - className="flex items-center px-6 py-2 mt-4 text-white font-semibold hover:bg-gray-700 hover:text-[#FF9500] hover:bg-opacity-25" |
37 |
| - onClick={closeSidebar} |
38 |
| - > |
39 |
| - <span className="mx-3">Medici Sportivi</span> |
40 |
| - </Link> |
41 |
| - <Link |
42 |
| - to="/payments" |
43 |
| - className="flex items-center px-6 py-2 mt-4 text-white font-semibold hover:bg-gray-700 hover:text-[#FF9500] hover:bg-opacity-25" |
44 |
| - onClick={closeSidebar} |
45 |
| - > |
46 |
| - <span className="mx-3">Compensi</span> |
47 |
| - </Link> |
48 |
| - <Link |
49 |
| - to="/sport-certificates" |
50 |
| - className="flex items-center px-6 py-2 mt-4 text-white font-semibold hover:bg-gray-700 hover:text-[#FF9500] hover:bg-opacity-25" |
51 |
| - onClick={closeSidebar} |
52 |
| - > |
53 |
| - <span className="mx-3">Certificati Medici</span> |
54 |
| - </Link> |
| 36 | + <SidebarItem title="Anagrafiche"> |
| 37 | + <Link |
| 38 | + to="/athletes/" |
| 39 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 40 | + onClick={closeSidebar} |
| 41 | + > |
| 42 | + Visualizza Atleti |
| 43 | + </Link> |
| 44 | + <Link |
| 45 | + to="/athletes/new/" |
| 46 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 47 | + onClick={closeSidebar} |
| 48 | + > |
| 49 | + Aggiungi Atleta |
| 50 | + </Link> |
| 51 | + <Link |
| 52 | + to="/trainers/" |
| 53 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 54 | + onClick={closeSidebar} |
| 55 | + > |
| 56 | + Visualizza Allenatori |
| 57 | + </Link> |
| 58 | + <Link |
| 59 | + to="/trainers/new" |
| 60 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 61 | + onClick={closeSidebar} |
| 62 | + > |
| 63 | + Aggiungi Allenatore |
| 64 | + </Link> |
| 65 | + <Link |
| 66 | + to="/sport-doctors/" |
| 67 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 68 | + onClick={closeSidebar} |
| 69 | + > |
| 70 | + Visualizza Medici Sportivi |
| 71 | + </Link> |
| 72 | + <Link |
| 73 | + to="/sport-doctors/new" |
| 74 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 75 | + onClick={closeSidebar} |
| 76 | + > |
| 77 | + Aggiungi Medico Sportivo |
| 78 | + </Link> |
| 79 | + </SidebarItem> |
| 80 | + <SidebarItem title="Pagamenti"> |
| 81 | + <Link |
| 82 | + to="/payments/" |
| 83 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 84 | + onClick={closeSidebar} |
| 85 | + > |
| 86 | + Visualizza Compensi Allenatore |
| 87 | + </Link> |
| 88 | + <Link |
| 89 | + to="/payments/new" |
| 90 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 91 | + onClick={closeSidebar} |
| 92 | + > |
| 93 | + Aggiungi Compenso Allenatore |
| 94 | + </Link> |
| 95 | + </SidebarItem> |
| 96 | + <SidebarItem title="Documentazione"> |
| 97 | + <Link |
| 98 | + to="/sport-certificates/" |
| 99 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 100 | + onClick={closeSidebar} |
| 101 | + > |
| 102 | + Visualizza Certificati Medici |
| 103 | + </Link> |
| 104 | + <Link |
| 105 | + to="/sport-certificates/new" |
| 106 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 107 | + onClick={closeSidebar} |
| 108 | + > |
| 109 | + Aggiungi Certificato Medico |
| 110 | + </Link> |
| 111 | + </SidebarItem> |
| 112 | + <SidebarItem title="Bandi Sportivi"> |
| 113 | + <Link |
| 114 | + to="#" |
| 115 | + className="block px-4 py-2 text-white hover:bg-gray-700 hover:text-[#FF9500]" |
| 116 | + onClick={closeSidebar} |
| 117 | + > |
| 118 | + Legge 17/1999 Art.22 |
| 119 | + </Link> |
| 120 | + </SidebarItem> |
55 | 121 | </nav>
|
56 | 122 | </div>
|
57 | 123 | );
|
58 | 124 | }
|
59 | 125 |
|
60 | 126 | export default Sidebar;
|
| 127 | + |
0 commit comments