blob: f280a597c4f6ae291d05ef8be5a76992d0c17bbd (
plain) (
blame)
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
|
import React, { useCallback, useRef } from "react";
import { useLocation } from "react-router-dom";
import { UserProfile } from "@customTypes/Profile";
import _Header from "./Header";
import _Footer from "./Footer";
import _Content from "./Content";
import _Search from "./Search";
import links from "./Links";
interface SidebarProps {
setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
profile?: UserProfile;
onUploadRun: () => void;
}
const Sidebar: React.FC<SidebarProps> = ({
setToken,
setProfile,
profile,
onUploadRun,
}) => {
const [isSearching, setIsSearching] = React.useState<boolean>(false);
const [selectedButtonIndex, setSelectedButtonIndex] = React.useState<number>(1);
const searchbarRef = useRef<HTMLInputElement>(null);
const location = useLocation();
const path = location.pathname;
const handle_sidebar_click = useCallback(
(clicked_sidebar_idx: number) => {
setSelectedButtonIndex(clicked_sidebar_idx);
if (clicked_sidebar_idx == 0 && !isSearching) {
if (!isSearching) {
setIsSearching(true);
searchbarRef.current?.focus();
}
} else {
setIsSearching(false);
}
},
[isSearching]
);
React.useEffect(() => {
links.content.forEach((link, i) => {
if (path.includes(link.to)) {
handle_sidebar_click(i + 1);
}
})
links.footer.forEach((link, i) => {
if (path.includes(link.to)) {
handle_sidebar_click(links.content.length + i + 1);
}
})
}, [path]);
return (
<div className={`md:h-screen w-80 not-md:w-full text-white bg-block flex flex-col not-md:flex-row not-md:bg-gradient-to-t not-md:from-block not-md:to-bright
}`}>
{/* Header */}
<_Header />
<div className="flex flex-1 overflow-hidden w-full">
<div className={`flex flex-col transition-all duration-300 ${isSearching ? "w-[64px]" : "w-full"}`}>
{/* Sidebar Content */}
<_Content isSearching={isSearching} selectedButtonIndex={selectedButtonIndex} handle_sidebar_click={handle_sidebar_click} />
{/* Bottom Section */}
<_Footer profile={profile} isSearching={isSearching} selectedButtonIndex={selectedButtonIndex} onUploadRun={onUploadRun} handle_sidebar_click={handle_sidebar_click} />
</div>
<div className={`flex bg-panel ${isSearching ? 'w-full' : "w-0"}`}>
<_Search profile={profile} searchbarRef={searchbarRef} />
</div>
</div>
</div>
);
};
export default Sidebar;
|