Skip to content

Commit 9e4be13

Browse files
committed
fix(layout): improve sidebar and navbar layouts
1 parent e78a940 commit 9e4be13

File tree

5 files changed

+241
-45
lines changed

5 files changed

+241
-45
lines changed

src/components/Header/Header.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ function Header({ toggleSidebar }) {
3434

3535
{/* User Dropsown Menu */}
3636
<div className="flex items-center">
37-
<div className="flex flex-col w-48 items-center">
37+
<div className="flex flex-col w-64 items-center">
3838
<span className="text-[#E5E7EB] mt-1 text-xl font-bold tracking-wider">
39-
Attene Davide
39+
Attene Alessandro
4040
</span>
4141
<span className="text-[#E5E7EB] font-medium">
42-
I.T.T. Deffenu - Olbia
42+
Ruolo: Amministratore
4343
</span>
4444
</div>
4545
<div className="relative mr-8">

src/components/Logo/Logo.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function LogoWithText() {
1919
alt="Logo SM"
2020
/>
2121
<span className="mx-4 text-lg font-bold text-gray-[#E5E7EB] text-center uppercase tracking-wider">
22-
Sport Management
22+
ASD Management
2323
</span>
2424
</div>
2525
</div>

src/components/Sidebar/Sidebar.jsx

+108-41
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,127 @@
1-
import { useNavigate } from "react-router-dom";
1+
import { useState } from "react";
2+
import { useNavigate, Link } from "react-router-dom";
23
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+
}
423

524
function Sidebar({ closeSidebar }) {
625
const navigate = useNavigate();
726

8-
// Logo Action
927
const handleClickLogo = () => navigate("/");
1028

11-
// TO FIX ${sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'}
12-
1329
return (
1430
<div
1531
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"
1733
>
1834
<Logo onClick={handleClickLogo} />
1935
<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>
55121
</nav>
56122
</div>
57123
);
58124
}
59125

60126
export default Sidebar;
127+
+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import axios from "axios";
2+
3+
const API_BASE_URL = "http://127.0.0.1:8000/";
4+
//const API_BASE_URL = "https://pcto-deffenu.vercel.app/";
5+
const API_VERSION = "api/v1/";
6+
const APP = "profiles/";
7+
const URL = `${API_BASE_URL}${API_VERSION}${APP}`;
8+
9+
const ATHLETES_ENDPOINT = "athletes/";
10+
const CATEGORIES_ENDPOINT = "athletes-categories/";
11+
const TRAINERS_ENDPOINT = "trainers/";
12+
const SPORT_DOCTORS_ENDPOINT = "sport-doctors/";
13+
14+
const API_ATHLETES = `${URL}${ATHLETES_ENDPOINT}`;
15+
const API_CATEGORIES = `${URL}${CATEGORIES_ENDPOINT}`;
16+
const API_TRAINERS = `${URL}${TRAINERS_ENDPOINT}`;
17+
const API_SPORT_DOCTORS = `${URL}${SPORT_DOCTORS_ENDPOINT}`;
18+
19+
const profilesService = {
20+
// ATHLETS
21+
22+
// Read Athlets
23+
getAthletes: async () => {
24+
const response = await axios.get(`${API_ATHLETES}`);
25+
return response.data;
26+
},
27+
28+
// Create Athlete
29+
createAthlete: async (athlete) => {
30+
const response = await axios.post(`${API_ATHLETES}`, athlete);
31+
return response.data;
32+
},
33+
34+
// Update Athlete
35+
updateAthlete: async (id, updatedAthlete) => {
36+
const response = await axios.put(`${API_ATHLETES}${id}/`, updatedAthlete);
37+
return response.data;
38+
},
39+
40+
// Delete Athlete
41+
deleteAthlete: async (id) => {
42+
const response = await axios.delete(`${API_ATHLETES}${id}/`);
43+
return response.data;
44+
},
45+
46+
// Read Athlete by ID
47+
getAthleteByID: async (id) => {
48+
const response = await axios.get(`${API_ATHLETES}${id}/`);
49+
return response.data;
50+
},
51+
52+
// CATEGORIES
53+
54+
// Read Category
55+
getCategories: async () => {
56+
const response = await axios.get(`${API_CATEGORIES}`);
57+
return response.data;
58+
},
59+
60+
// TRAINERS
61+
62+
// Read Trainers
63+
getTrainers: async () => {
64+
const response = await axios.get(`${API_TRAINERS}`);
65+
return response.data;
66+
},
67+
68+
// Create Trainer
69+
createTrainer: async (trainer) => {
70+
const response = await axios.post(`${API_TRAINERS}`, trainer);
71+
return response.data;
72+
},
73+
74+
// Update Trainer
75+
updateTrainer: async (id, updatedTrainer) => {
76+
const response = await axios.put(`${API_TRAINERS}${id}/`, updatedTrainer);
77+
return response.data;
78+
},
79+
80+
// Delete Trainer
81+
deleteTrainer: async (id) => {
82+
const response = await axios.delete(`${API_TRAINERS}${id}/`);
83+
return response.data;
84+
},
85+
86+
// Read Trainer by ID
87+
getTrainerByID: async (id) => {
88+
const response = await axios.get(`${API_TRAINERS}${id}/`);
89+
return response.data;
90+
},
91+
92+
// SPORT DOCTORS
93+
94+
// Read SportDoctors
95+
getSportDoctors: async () => {
96+
const response = await axios.get(`${API_SPORT_DOCTORS}`);
97+
return response.data;
98+
},
99+
100+
// Create SportDoctor
101+
createSportDoctor: async (sportDoctor) => {
102+
console.log(sportDoctor);
103+
const response = await axios.post(`${API_SPORT_DOCTORS}`, sportDoctor);
104+
return response.data;
105+
},
106+
107+
// Update SportDoctor
108+
updateSportDoctor: async (id, updatedSportDoctor) => {
109+
const response = await axios.put(
110+
`${API_SPORT_DOCTORS}${id}/`,
111+
updatedSportDoctor,
112+
);
113+
return response.data;
114+
},
115+
116+
// Delete SportDoctor
117+
deleteSportDoctor: async (id) => {
118+
const response = await axios.delete(`${API_SPORT_DOCTORS}${id}/`);
119+
return response.data;
120+
},
121+
122+
// Read SportDoctor by ID
123+
getSportDoctorByID: async (id) => {
124+
const response = await axios.get(`${API_SPORT_DOCTORS}${id}/`);
125+
return response.data;
126+
},
127+
};
128+
129+
export default profilesService;

0 commit comments

Comments
 (0)