From da7c988469ce2c3e17173f72416808ddb355d224 Mon Sep 17 00:00:00 2001
From: Nidboj132 <lol2s@vp.plm>
Date: Sat, 29 Apr 2023 13:00:05 +0200
Subject: ui update

---
 frontend/src/components/sidebar.js | 148 +++++++++++++++++++++++++------------
 1 file changed, 100 insertions(+), 48 deletions(-)

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

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 @@
 import React from 'react';
+import { Link, useLocation } from "react-router-dom";
 
+import "../App.css"
 import "./sidebar.css";
-import img0 from "../imgs/0.png"
+import logo from "../imgs/logo.png"
 import img1 from "../imgs/1.png"
 import img2 from "../imgs/2.png"
 import img3 from "../imgs/3.png"
@@ -10,19 +12,16 @@ import img5 from "../imgs/5.png"
 import img6 from "../imgs/6.png"
 import img7 from "../imgs/7.png"
 import img8 from "../imgs/8.png"
+import img9 from "../imgs/9.png"
 
+export default function Sidebar(x) {
 
-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
+// Locks search button for 300ms 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);
+        setTimeout(() => setIsLocked(false), 300);
     SidebarHide(arg)
     }
 }
@@ -30,66 +29,119 @@ if (!isLocked) {
 
 // Clicked buttons
 function SidebarClick(x){
-const btn = document.querySelectorAll("button#side-grid");
+const btn = document.querySelectorAll("button");
 
+if(sidebar===1){setSidebar(0);SidebarHide()}
 
-sidebar_text.forEach((e,i) =>(
-    btn[i].style.backgroundColor="#202232",
-    btn[i].style.borderRadius="20px"
-)) 
+btn.forEach((e,i) =>{
+    btn[i].style.backgroundColor="inherit"
+}) 
+btn[x].style.backgroundColor="#202232"
 
-btn[x].style.backgroundColor="#141520"
-btn[x].style.borderRadius="10px"
 }
 
 
 // The menu button
+const [sidebar, setSidebar] = React.useState();
+
 function SidebarHide(){
-const btn   = document.querySelectorAll("button#side-grid");
-const span  = document.querySelectorAll("#side-grid>span");
+const btn   = document.querySelectorAll("button");
+const span  = document.querySelectorAll("button>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)
-    ))
+    side.style.width="320px"
+    btn.forEach((e, i) =>{
+        e.style.width="310px"
+        setTimeout(() => {span[i].style.opacity="1"}, 100)
+    })
+    side.style.zIndex="2"
 } 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)
-    )) 
+    btn.forEach((e,i) =>{
+        e.style.width="40px"
+        span[i].style.opacity="0"
+    }) 
+    setTimeout(() => {side.style.zIndex="0"}, 300);
     }
 }
 
-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&nbsp;log</span></button>
-    </div>
-    <div id='sidebar-content'>
+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("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("rules")){SidebarClick(8)}
+    if(location.pathname.includes("about")){SidebarClick(9)}
+    // console.log(location.pathname)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+},  [location])
 
+return (
+    <div id='sidebar'>
+        <div id='logo'> {/* logo */}
+            <img src={logo} alt="" height={"80px"}/>
+            <div id='logo-text'>
+                <span><b>PORTAL 2</b></span><br/>
+                <span>Least Portals</span>
+            </div>
+        </div>
+        <div id='sidebar-list'> {/* List */}
+            <div id='sidebar-toplist'> {/* Top */} 
+                <button onClick={()=>HandleLock()}><img src={img1} alt="" /><span>Search</span></button>
+                <span></span>
+                
+                <Link to="/" tabIndex={-1}>
+                    <button><img src={img2} alt="" /><span>Home&nbsp;Page</span></button>
+                </Link>
+
+                <Link to="/news" tabIndex={-1}>
+                    <button><img src={img3} alt="" /><span>News</span></button>
+                </Link>
+
+                <Link to="/records" tabIndex={-1}>
+                    <button><img src={img4} alt="" /><span>Records</span></button>
+                </Link>
+
+                <Link to="/leaderboards" tabIndex={-1}>
+                    <button><img src={img5} alt="" /><span>Leaderboards</span></button>
+                </Link>
+
+                <Link to="/discussions" tabIndex={-1}>
+                    <button><img src={img6} alt="" /><span>Discussions</span></button>
+                </Link>
+
+                <Link to="/scorelog" tabIndex={-1}>
+                    <button><img src={img7} alt="" /><span>Score&nbsp;Logs</span></button>
+                </Link>
+            </div>
+            <div id='sidebar-bottomlist'>
+                <span></span>
+
+                <Link to="/profile" tabIndex={-1}>
+                    <button><img src={img1} alt="" /><span>Login</span></button>
+                </Link>
+
+                <Link to="/rules" tabIndex={-1}>
+                    <button><img src={img8} alt="" /><span>Leaderboard&nbsp;Rules</span></button>
+                </Link>
+
+                <Link to="/about" tabIndex={-1}>
+                    <button><img src={img9} alt="" /><span>About&nbsp;P2LP</span></button>
+                </Link>
+            </div>
+        </div>
+        <div> 
+            <input type="text" placeholder='Search for map or a player...'/>
+        </div>
     </div>
-</div>
-    )
+        )
 }
 
 
-- 
cgit v1.2.3