Skip to content

Commit 905c2e0

Browse files
annunziatocannunziatoc
committed
Standardized icon and Balancer logo sizes in the sidebar
1 parent e0c0479 commit 905c2e0

File tree

1 file changed

+97
-97
lines changed

1 file changed

+97
-97
lines changed

‎frontend/src/pages/Layout/Layout_V2_Sidebar.tsx‎

Lines changed: 97 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,117 @@
1-
import React, { useState, useEffect } from "react";
2-
import { Link, useNavigate, useLocation } from "react-router-dom";
3-
import { ChevronLeft, ChevronRight, File, Loader2 } from "lucide-react";
1+
import React, {useState, useEffect} from "react";
2+
import {Link, useNavigate, useLocation} from "react-router-dom";
3+
import {ChevronLeft, ChevronRight, File, Loader2} from "lucide-react";
44
import axios from "axios";
55

66
interface File {
7-
id: number;
8-
guid: string;
9-
file_name: string;
10-
title: string | null;
7+
id: number;
8+
guid: string;
9+
file_name: string;
10+
title: string | null;
1111
}
1212

1313
const Sidebar: React.FC = () => {
14-
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
15-
const [files, setFiles] = useState<File[]>([]);
16-
const [isLoading, setIsLoading] = useState(true);
17-
const navigate = useNavigate();
18-
const location = useLocation();
14+
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
15+
const [files, setFiles] = useState<File[]>([]);
16+
const [isLoading, setIsLoading] = useState(true);
17+
const navigate = useNavigate();
18+
const location = useLocation();
1919

20-
const toggleSidebar = () => {
21-
setSidebarCollapsed(!sidebarCollapsed);
22-
};
23-
24-
useEffect(() => {
25-
const fetchFiles = async () => {
26-
try {
27-
const baseUrl = import.meta.env.VITE_API_BASE_URL;
28-
const response = await axios.get(`${baseUrl}/v1/api/uploadFile`, {
29-
headers: {
30-
Authorization: `JWT ${localStorage.getItem("access")}`,
31-
},
32-
});
33-
if (Array.isArray(response.data)) {
34-
setFiles(response.data);
35-
}
36-
} catch (error) {
37-
console.error("Error fetching files", error);
38-
} finally {
39-
setIsLoading(false);
40-
}
20+
const toggleSidebar = () => {
21+
setSidebarCollapsed(!sidebarCollapsed);
4122
};
4223

43-
fetchFiles();
44-
}, []);
24+
useEffect(() => {
25+
const fetchFiles = async () => {
26+
try {
27+
const baseUrl = import.meta.env.VITE_API_BASE_URL;
28+
const response = await axios.get(`${baseUrl}/v1/api/uploadFile`, {
29+
headers: {
30+
Authorization: `JWT ${localStorage.getItem("access")}`,
31+
},
32+
});
33+
if (Array.isArray(response.data)) {
34+
setFiles(response.data);
35+
}
36+
} catch (error) {
37+
console.error("Error fetching files", error);
38+
} finally {
39+
setIsLoading(false);
40+
}
41+
};
4542

46-
const handleFileClick = (guid: string) => {
47-
const params = new URLSearchParams(location.search);
48-
const currentGuid = params.get("guid");
43+
fetchFiles();
44+
}, []);
4945

50-
if (guid !== currentGuid) {
51-
navigate(`/drugsummary?guid=${guid}&page=1`);
52-
} else {
53-
navigate(
54-
`/drugsummary?guid=${guid}${params.has("page") ? `&page=${params.get("page")}` : ""}`
55-
);
56-
}
57-
};
46+
const handleFileClick = (guid: string) => {
47+
const params = new URLSearchParams(location.search);
48+
const currentGuid = params.get("guid");
5849

59-
return (
60-
<div
61-
className={`z-10 h-screen ${
62-
sidebarCollapsed ? "w-16" : "w-60"
63-
} flex flex-col border-r border-blue-200 bg-white transition-all duration-300 ease-in-out`}
64-
>
65-
<div className="flex h-16 w-full items-center justify-between px-4">
66-
{!sidebarCollapsed && (
67-
<Link to={`/AdminPortal`}>
68-
<h1 className="bg-gradient-to-r from-blue-500 via-blue-700 to-blue-300 bg-clip-text font-quicksand text-xl font-bold text-transparent lg:text-3xl">
69-
Balancer
70-
</h1>
71-
</Link>
72-
)}
73-
<button
74-
onClick={toggleSidebar}
75-
className="ml-auto rounded-full p-1 text-gray-500 hover:bg-gray-100"
76-
>
77-
{sidebarCollapsed ? (
78-
<ChevronRight size={20} />
79-
) : (
80-
<ChevronLeft size={20} />
81-
)}
82-
</button>
83-
</div>
50+
if (guid !== currentGuid) {
51+
navigate(`/drugsummary?guid=${guid}&page=1`);
52+
} else {
53+
navigate(
54+
`/drugsummary?guid=${guid}${params.has("page") ? `&page=${params.get("page")}` : ""}`
55+
);
56+
}
57+
};
8458

85-
{/* File List Section */}
86-
<div className="mt-4 flex-1 overflow-y-auto">
87-
{isLoading ? (
88-
<div className="flex justify-center py-4">
89-
<Loader2 className="h-6 w-6 animate-spin text-blue-500" />
90-
</div>
91-
) : (
92-
<ul className="space-y-1 px-2">
93-
{files.map((file) => (
94-
<li key={file.guid}>
59+
return (
60+
<div
61+
className={`z-10 h-screen ${
62+
sidebarCollapsed ? "w-16" : "w-60"
63+
} flex flex-col border-r border-blue-200 bg-white transition-all duration-300 ease-in-out`}
64+
>
65+
<div className="flex h-16 w-full items-center justify-between px-4">
66+
{!sidebarCollapsed && (
67+
<Link to={`/AdminPortal`}>
68+
<h1 className="bg-gradient-to-r from-blue-500 via-blue-700 to-blue-300 bg-clip-text font-quicksand text-3xl font-bold text-transparent">
69+
Balancer
70+
</h1>
71+
</Link>
72+
)}
9573
<button
96-
onClick={() => handleFileClick(file.guid)}
97-
className={`flex w-full items-center rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-blue-100 ${
98-
sidebarCollapsed ? "justify-center" : ""
99-
}`}
74+
onClick={toggleSidebar}
75+
className="ml-auto rounded-full p-1 text-gray-500 hover:bg-gray-100"
10076
>
101-
<File className="mr-2 h-4 w-4 text-gray-500" />
102-
{!sidebarCollapsed && (
103-
<span className="truncate">
77+
{sidebarCollapsed ? (
78+
<ChevronRight size={20}/>
79+
) : (
80+
<ChevronLeft size={20}/>
81+
)}
82+
</button>
83+
</div>
84+
85+
{/* File List Section */}
86+
<div className="mt-4 flex-1 overflow-y-auto ">
87+
{isLoading ? (
88+
<div className="flex justify-center py-4">
89+
<Loader2 className="h-6 w-6 animate-spin text-blue-500"/>
90+
</div>
91+
) : (
92+
<ul className="space-y-1 px-2">
93+
{files.map((file) => (
94+
<li key={file.guid}>
95+
<button
96+
onClick={() => handleFileClick(file.guid)}
97+
className={`flex w-full items-center rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-blue-100 ${
98+
sidebarCollapsed ? "justify-center" : ""
99+
}`}
100+
>
101+
<File className="mr-2 h-4 w-4 text-gray-500"/>
102+
{!sidebarCollapsed && (
103+
<span className="truncate w-44">
104104
{file.title || file.file_name.replace(/\.[^/.]+$/, "")}
105105
</span>
106-
)}
107-
</button>
108-
</li>
109-
))}
110-
</ul>
111-
)}
112-
</div>
113-
</div>
114-
);
106+
)}
107+
</button>
108+
</li>
109+
))}
110+
</ul>
111+
)}
112+
</div>
113+
</div>
114+
);
115115
};
116116

117117
export default Sidebar;

0 commit comments

Comments
 (0)