From 2d1d2cc4e7982c9bbf7daa0ac4ea317960d0416a Mon Sep 17 00:00:00 2001
From: Nidboj132 <lol2s@vp.pl>
Date: Sun, 26 Feb 2023 15:49:11 +0100
Subject: Add files via upload

---
 frontend/src/components/sidebar.js | 95 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 frontend/src/components/sidebar.js

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

diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
new file mode 100644
index 0000000..0bc5a1e
--- /dev/null
+++ b/frontend/src/components/sidebar.js
@@ -0,0 +1,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&nbsp;log</span></button>
+    </div>
+    <div id='sidebar-content'>
+
+    </div>
+</div>
+    )
+}
+
+
-- 
cgit v1.2.3