1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import React, { useCallback, useRef } from "react";
import { Link, useLocation } from "react-router-dom";
import { UserProfile } from "@customTypes/Profile";
import Header from "./Header";
import Footer from "./Footer";
import Content from "./Content";
interface SidebarProps {
setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
profile?: UserProfile;
setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
onUploadRun: () => void;
}
const Sidebar: React.FC<SidebarProps> = ({
setToken,
profile,
setProfile,
onUploadRun,
}) => {
// const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false);
const [isSidebarOpen, setSidebarOpen] = React.useState<boolean>(false);
const [selectedButtonIndex, setSelectedButtonIndex] = React.useState<number>(1);
const location = useLocation();
const path = location.pathname;
const sidebarRef = useRef<HTMLDivElement>(null);
const sidebarButtonRefs = useRef<(HTMLButtonElement | null)[]>([]);
// const _handle_sidebar_toggle = useCallback(() => {
// if (!sidebarRef.current) return;
// if (isSidebarOpen) {
// setSidebarOpen(false);
// } else {
// setSidebarOpen(true);
// searchbarRef.current?.focus();
// }
// }, [isSidebarOpen]);
const handle_sidebar_click = useCallback(
(clicked_sidebar_idx: number) => {
setSelectedButtonIndex(clicked_sidebar_idx);
if (isSidebarOpen) {
setSidebarOpen(false);
}
},
[isSidebarOpen]
);
React.useEffect(() => {
if (path === "/") {
setSelectedButtonIndex(1);
} else if (path.includes("games")) {
setSelectedButtonIndex(2);
} else if (path.includes("rankings")) {
setSelectedButtonIndex(3);
} else if (path.includes("profile")) {
setSelectedButtonIndex(4);
} else if (path.includes("rules")) {
setSelectedButtonIndex(5);
} else if (path.includes("about")) {
setSelectedButtonIndex(6);
}
}, [path]);
const getButtonClasses = (buttonIndex: number) => {
const baseClasses = "flex items-center gap-3 w-full text-left bg-inherit cursor-pointer border-none rounded-[2000px] py-3 px-3 transition-all duration-300 hover:bg-panel";
const selectedClasses = selectedButtonIndex === buttonIndex ? "bg-primary text-background" : "bg-transparent text-foreground";
return `${baseClasses} ${selectedClasses}`;
};
return (
<div className={`w-80 not-md:w-full text-white bg-block flex flex-col not-md:flex-row
}`}>
{/* Header */}
<Header />
<div className="flex h-full w-full">
<div className="flex flex-col">
{/* Sidebar Content */}
<Content profile={profile} isSidebarOpen={isSidebarOpen} sidebarButtonRefs={sidebarButtonRefs} getButtonClasses={getButtonClasses} handle_sidebar_click={handle_sidebar_click} />
{/* Bottom Section */}
<Footer profile={profile} onUploadRun={onUploadRun} setToken={setToken} setProfile={setProfile} sidebarButtonRefs={sidebarButtonRefs} getButtonClasses={getButtonClasses} handle_sidebar_click={handle_sidebar_click} />
</div>
<div className="w-20">
</div>
</div>
</div>
);
};
export default Sidebar;
|