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
|
import React from 'react';
import "./sidebar.css";
import img0 from "../imgs/0.png"
import img1 from "../imgs/1.png"
import img2 from "../imgs/2.png"
import img3 from "../imgs/3.png"
import img4 from "../imgs/4.png"
import img5 from "../imgs/5.png"
import img6 from "../imgs/6.png"
import img7 from "../imgs/7.png"
import img8 from "../imgs/8.png"
export default function Sidebar() {
const sidebar_text = ['Home\u00A0page',"Profile","News","Records","Discussions","Leaderboards","Score\u00A0log"] // text on the buttons
const [sidebar, setSidebar] = React.useState();
// Locks button for 200ms before it can be clicked again, prevents spam
const [isLocked, setIsLocked] = React.useState(false);
function HandleLock(arg) {
if (!isLocked) {
setIsLocked(true);
setTimeout(() => setIsLocked(false), 200);
SidebarHide(arg)
}
}
// Clicked buttons
function SidebarClick(x){
const btn = document.querySelectorAll("button#side-grid");
sidebar_text.forEach((e,i) =>(
btn[i].style.backgroundColor="#202232",
btn[i].style.borderRadius="20px"
))
btn[x].style.backgroundColor="#141520"
btn[x].style.borderRadius="10px"
}
// The menu button
function SidebarHide(){
const btn = document.querySelectorAll("button#side-grid");
const span = document.querySelectorAll("#side-grid>span");
const side = document.querySelector("#sidebar-list");
if(sidebar===1){
setSidebar(0)
side.style.width="308px"
sidebar_text.forEach((e, i) =>(
btn[i].style.width="300px",
setTimeout(() => {span[i].style.opacity="1";span[i].textContent=e}, 200)
))
} else {
side.style.width="40px";
setSidebar(1)
sidebar_text.forEach((e,i) =>(
btn[i].style.width="40px",
span[i].style.opacity="0",
setTimeout(() => {span[i].textContent=""}, 100)
))
}
}
return (
<div id='sidebar'>
<div>
<img src={img0} alt="" width='320px' />
</div>
<div id='sidebar-list'>
<button onClick={()=>HandleLock()} id='side-menu'><img src={img1} alt="" /></button>
<p id='side-grid'></p> {/* p's are spaces between buttons */}
<button onClick={()=>SidebarClick(0)} id='side-grid'><img src={img2} alt="" /><span>Home page</span></button>
<button onClick={()=>SidebarClick(1)} id='side-grid'><img src={img3} alt="" /><span>Profile</span></button>
<p id='side-grid'></p>
<button onClick={()=>SidebarClick(2)} id='side-grid'><img src={img4} alt="" /><span>News</span></button>
<button onClick={()=>SidebarClick(3)} id='side-grid'><img src={img5} alt="" /><span>Records</span></button>
<button onClick={()=>SidebarClick(4)} id='side-grid'><img src={img6} alt="" /><span>Discussions</span></button>
<p id='side-grid'></p>
<button onClick={()=>SidebarClick(5)} id='side-grid'><img src={img7} alt="" /><span>Leaderboards</span></button>
<button onClick={()=>SidebarClick(6)} id='side-grid'><img src={img8} alt="" /><span>Score log</span></button>
</div>
<div id='sidebar-content'>
</div>
</div>
)
}
|