From cfac59282da55f4791d6352f15887a15e9ff6ec5 Mon Sep 17 00:00:00 2001
From: Wolfboy248 <121288977+Wolfboy248@users.noreply.github.com>
Date: Wed, 10 Jul 2024 21:51:25 +0200
Subject: Games page, maplist page (#153)

Co-authored-by: Wolfboy248 <105884620+Wolfboy248@users.noreply.github.com>
---
 frontend/src/components/sidebar.js | 42 ++++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 20 deletions(-)

(limited to 'frontend/src/components/sidebar.js')

diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
index 29859ab..6777867 100644
--- a/frontend/src/components/sidebar.js
+++ b/frontend/src/components/sidebar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Link, useLocation } from "react-router-dom";
 
 import "../App.css"
@@ -18,6 +18,7 @@ import Login from "./login.js"
 export default function Sidebar(prop) {
 const {token,setToken} = prop
 const [profile, setProfile] = React.useState(null);
+
 React.useEffect(() => {
     fetch(`https://lp.ardapektezol.com/api/v1/profile`,{
         headers: {
@@ -28,7 +29,6 @@ React.useEffect(() => {
     .then(d => setProfile(d.data))
     }, [token]);
 
-
 // Locks search button for 300ms before it can be clicked again, prevents spam
 const [isLocked, setIsLocked] = React.useState(false);
 function HandleLock(arg) {
@@ -40,34 +40,38 @@ if (!isLocked) {
 }
 
 
+// The menu button
+const [sidebar, setSidebar] = React.useState();
+
 // Clicked buttons
 function SidebarClick(x){
 const btn = document.querySelectorAll("button.sidebar-button");
 
 if(sidebar===1){setSidebar(0);SidebarHide()}
 
+// clusterfuck
 btn.forEach((e,i) =>{
-    btn[i].style.backgroundColor="inherit"
+    btn[i].classList.remove("sidebar-button-selected")
+    btn[i].classList.add("sidebar-button-deselected")
 }) 
-btn[x].style.backgroundColor="#202232"
+btn[x].classList.add("sidebar-button-selected")
+btn[x].classList.remove("sidebar-button-deselected")
 
 }
 
-
-// The menu button
-const [sidebar, setSidebar] = React.useState();
-
 function SidebarHide(){
 const btn   = document.querySelectorAll("button.sidebar-button")
 const span  = document.querySelectorAll("button.sidebar-button>span");
 const side  = document.querySelector("#sidebar-list");
 const login = document.querySelectorAll(".login>button")[1];
+const searchbar = document.querySelector("#searchbar");
 
 if(sidebar===1){
     setSidebar(0)
     side.style.width="320px"
     btn.forEach((e, i) =>{
         e.style.width="310px"
+        e.style.padding = "0.4em 0 0 11px"
         setTimeout(() => {
             span[i].style.opacity="1"
             login.style.opacity="1"
@@ -77,28 +81,29 @@ if(sidebar===1){
     side.style.zIndex="2"
 } else {
     side.style.width="40px";
+    searchbar.focus();
+    setSearch(searchbar.value)
     setSidebar(1)
     btn.forEach((e,i) =>{
         e.style.width="40px"
+        e.style.padding = "0.4em 0 0 5px"
         span[i].style.opacity="0"
     }) 
     login.style.opacity="0"
     setTimeout(() => {
         side.style.zIndex="0"
     }, 300);
-    }
+    }    
 }
-
 // Links
 const location = useLocation()
 React.useEffect(()=>{
     if(location.pathname==="/"){SidebarClick(1)}
     if(location.pathname.includes("news")){SidebarClick(2)}
-    if(location.pathname.includes("records")){SidebarClick(3)}
+    if(location.pathname.includes("games")){SidebarClick(3)}
     if(location.pathname.includes("leaderboards")){SidebarClick(4)}
-    if(location.pathname.includes("discussions")){SidebarClick(5)}
-    if(location.pathname.includes("scorelog")){SidebarClick(6)}
-    if(location.pathname.includes("profile")){SidebarClick(7)}
+    if(location.pathname.includes("scorelog")){SidebarClick(5)}
+    if(location.pathname.includes("profile")){SidebarClick(6)}
     if(location.pathname.includes("rules")){SidebarClick(9)}
     if(location.pathname.includes("about")){SidebarClick(10)}
 
@@ -107,6 +112,7 @@ React.useEffect(()=>{
 
 const [search,setSearch] = React.useState(null)
 const [searchData,setSearchData] = React.useState(null)
+
 React.useEffect(()=>{
     fetch(`https://lp.ardapektezol.com/api/v1/search?q=${search}`)
         .then(r=>r.json())
@@ -139,18 +145,14 @@ return (
                     <button className='sidebar-button'><img src={img3} alt="" /><span>News</span></button>
                 </Link>
 
-                <Link to="/records" tabIndex={-1}>
-                    <button className='sidebar-button'><img src={img4} alt="" /><span>Records</span></button>
+                <Link to="/games" tabIndex={-1}>
+                    <button className='sidebar-button'><img src={img4} alt="" /><span>Games</span></button>
                 </Link>
 
                 <Link to="/leaderboards" tabIndex={-1}>
                     <button className='sidebar-button'><img src={img5} alt="" /><span>Leaderboards</span></button>
                 </Link>
 
-                <Link to="/discussions" tabIndex={-1}>
-                    <button className='sidebar-button'><img src={img6} alt="" /><span>Discussions</span></button>
-                </Link>
-
                 <Link to="/scorelog" tabIndex={-1}>
                     <button className='sidebar-button'><img src={img7} alt="" /><span>Score&nbsp;Logs</span></button>
                 </Link>
-- 
cgit v1.2.3