aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/sidebar.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/sidebar.js')
-rw-r--r--frontend/src/components/sidebar.js148
1 files changed, 100 insertions, 48 deletions
diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
index 0bc5a1e..d5a55fd 100644
--- a/frontend/src/components/sidebar.js
+++ b/frontend/src/components/sidebar.js
@@ -1,7 +1,9 @@
1import React from 'react'; 1import React from 'react';
2import { Link, useLocation } from "react-router-dom";
2 3
4import "../App.css"
3import "./sidebar.css"; 5import "./sidebar.css";
4import img0 from "../imgs/0.png" 6import logo from "../imgs/logo.png"
5import img1 from "../imgs/1.png" 7import img1 from "../imgs/1.png"
6import img2 from "../imgs/2.png" 8import img2 from "../imgs/2.png"
7import img3 from "../imgs/3.png" 9import img3 from "../imgs/3.png"
@@ -10,19 +12,16 @@ import img5 from "../imgs/5.png"
10import img6 from "../imgs/6.png" 12import img6 from "../imgs/6.png"
11import img7 from "../imgs/7.png" 13import img7 from "../imgs/7.png"
12import img8 from "../imgs/8.png" 14import img8 from "../imgs/8.png"
15import img9 from "../imgs/9.png"
13 16
17export default function Sidebar(x) {
14 18
15export default function Sidebar() { 19// Locks search button for 300ms before it can be clicked again, prevents spam
16const sidebar_text = ['Home\u00A0page',"Profile","News","Records","Discussions","Leaderboards","Score\u00A0log"] // text on the buttons
17const [sidebar, setSidebar] = React.useState();
18
19
20// Locks button for 200ms before it can be clicked again, prevents spam
21const [isLocked, setIsLocked] = React.useState(false); 20const [isLocked, setIsLocked] = React.useState(false);
22function HandleLock(arg) { 21function HandleLock(arg) {
23if (!isLocked) { 22if (!isLocked) {
24 setIsLocked(true); 23 setIsLocked(true);
25 setTimeout(() => setIsLocked(false), 200); 24 setTimeout(() => setIsLocked(false), 300);
26 SidebarHide(arg) 25 SidebarHide(arg)
27 } 26 }
28} 27}
@@ -30,66 +29,119 @@ if (!isLocked) {
30 29
31// Clicked buttons 30// Clicked buttons
32function SidebarClick(x){ 31function SidebarClick(x){
33const btn = document.querySelectorAll("button#side-grid"); 32const btn = document.querySelectorAll("button");
34 33
34if(sidebar===1){setSidebar(0);SidebarHide()}
35 35
36sidebar_text.forEach((e,i) =>( 36btn.forEach((e,i) =>{
37 btn[i].style.backgroundColor="#202232", 37 btn[i].style.backgroundColor="inherit"
38 btn[i].style.borderRadius="20px" 38})
39)) 39btn[x].style.backgroundColor="#202232"
40 40
41btn[x].style.backgroundColor="#141520"
42btn[x].style.borderRadius="10px"
43} 41}
44 42
45 43
46// The menu button 44// The menu button
45const [sidebar, setSidebar] = React.useState();
46
47function SidebarHide(){ 47function SidebarHide(){
48const btn = document.querySelectorAll("button#side-grid"); 48const btn = document.querySelectorAll("button");
49const span = document.querySelectorAll("#side-grid>span"); 49const span = document.querySelectorAll("button>span");
50const side = document.querySelector("#sidebar-list"); 50const side = document.querySelector("#sidebar-list");
51 51
52if(sidebar===1){ 52if(sidebar===1){
53 setSidebar(0) 53 setSidebar(0)
54 side.style.width="308px" 54 side.style.width="320px"
55 sidebar_text.forEach((e, i) =>( 55 btn.forEach((e, i) =>{
56 btn[i].style.width="300px", 56 e.style.width="310px"
57 setTimeout(() => {span[i].style.opacity="1";span[i].textContent=e}, 200) 57 setTimeout(() => {span[i].style.opacity="1"}, 100)
58 )) 58 })
59 side.style.zIndex="2"
59} else { 60} else {
60 side.style.width="40px"; 61 side.style.width="40px";
61 setSidebar(1) 62 setSidebar(1)
62 sidebar_text.forEach((e,i) =>( 63 btn.forEach((e,i) =>{
63 btn[i].style.width="40px", 64 e.style.width="40px"
64 span[i].style.opacity="0", 65 span[i].style.opacity="0"
65 setTimeout(() => {span[i].textContent=""}, 100) 66 })
66 )) 67 setTimeout(() => {side.style.zIndex="0"}, 300);
67 } 68 }
68} 69}
69 70
70return ( 71const location = useLocation()
71<div id='sidebar'> 72React.useEffect(()=>{
72 <div> 73 if(location.pathname==="/"){SidebarClick(1)}
73 <img src={img0} alt="" width='320px' /> 74 if(location.pathname.includes("news")){SidebarClick(2)}
74 </div> 75 if(location.pathname.includes("records")){SidebarClick(3)}
75 <div id='sidebar-list'> 76 if(location.pathname.includes("leaderboards")){SidebarClick(4)}
76 <button onClick={()=>HandleLock()} id='side-menu'><img src={img1} alt="" /></button> 77 if(location.pathname.includes("discussions")){SidebarClick(5)}
77 <p id='side-grid'></p> {/* p's are spaces between buttons */} 78 if(location.pathname.includes("scorelog")){SidebarClick(6)}
78 <button onClick={()=>SidebarClick(0)} id='side-grid'><img src={img2} alt="" /><span>Home page</span></button> 79 if(location.pathname.includes("profile")){SidebarClick(7)}
79 <button onClick={()=>SidebarClick(1)} id='side-grid'><img src={img3} alt="" /><span>Profile</span></button> 80 if(location.pathname.includes("rules")){SidebarClick(8)}
80 <p id='side-grid'></p> 81 if(location.pathname.includes("about")){SidebarClick(9)}
81 <button onClick={()=>SidebarClick(2)} id='side-grid'><img src={img4} alt="" /><span>News</span></button> 82 // console.log(location.pathname)
82 <button onClick={()=>SidebarClick(3)} id='side-grid'><img src={img5} alt="" /><span>Records</span></button> 83 // eslint-disable-next-line react-hooks/exhaustive-deps
83 <button onClick={()=>SidebarClick(4)} id='side-grid'><img src={img6} alt="" /><span>Discussions</span></button> 84}, [location])
84 <p id='side-grid'></p>
85 <button onClick={()=>SidebarClick(5)} id='side-grid'><img src={img7} alt="" /><span>Leaderboards</span></button>
86 <button onClick={()=>SidebarClick(6)} id='side-grid'><img src={img8} alt="" /><span>Score&nbsp;log</span></button>
87 </div>
88 <div id='sidebar-content'>
89 85
86return (
87 <div id='sidebar'>
88 <div id='logo'> {/* logo */}
89 <img src={logo} alt="" height={"80px"}/>
90 <div id='logo-text'>
91 <span><b>PORTAL 2</b></span><br/>
92 <span>Least Portals</span>
93 </div>
94 </div>
95 <div id='sidebar-list'> {/* List */}
96 <div id='sidebar-toplist'> {/* Top */}
97 <button onClick={()=>HandleLock()}><img src={img1} alt="" /><span>Search</span></button>
98 <span></span>
99
100 <Link to="/" tabIndex={-1}>
101 <button><img src={img2} alt="" /><span>Home&nbsp;Page</span></button>
102 </Link>
103
104 <Link to="/news" tabIndex={-1}>
105 <button><img src={img3} alt="" /><span>News</span></button>
106 </Link>
107
108 <Link to="/records" tabIndex={-1}>
109 <button><img src={img4} alt="" /><span>Records</span></button>
110 </Link>
111
112 <Link to="/leaderboards" tabIndex={-1}>
113 <button><img src={img5} alt="" /><span>Leaderboards</span></button>
114 </Link>
115
116 <Link to="/discussions" tabIndex={-1}>
117 <button><img src={img6} alt="" /><span>Discussions</span></button>
118 </Link>
119
120 <Link to="/scorelog" tabIndex={-1}>
121 <button><img src={img7} alt="" /><span>Score&nbsp;Logs</span></button>
122 </Link>
123 </div>
124 <div id='sidebar-bottomlist'>
125 <span></span>
126
127 <Link to="/profile" tabIndex={-1}>
128 <button><img src={img1} alt="" /><span>Login</span></button>
129 </Link>
130
131 <Link to="/rules" tabIndex={-1}>
132 <button><img src={img8} alt="" /><span>Leaderboard&nbsp;Rules</span></button>
133 </Link>
134
135 <Link to="/about" tabIndex={-1}>
136 <button><img src={img9} alt="" /><span>About&nbsp;P2LP</span></button>
137 </Link>
138 </div>
139 </div>
140 <div>
141 <input type="text" placeholder='Search for map or a player...'/>
142 </div>
90 </div> 143 </div>
91</div> 144 )
92 )
93} 145}
94 146
95 147
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 23:19:40 +0000