diff options
Diffstat (limited to 'frontend/src/components/sidebar.js')
| -rw-r--r-- | frontend/src/components/sidebar.js | 95 |
1 files changed, 95 insertions, 0 deletions
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 @@ | |||
| 1 | import React from 'react'; | ||
| 2 | |||
| 3 | import "./sidebar.css"; | ||
| 4 | import img0 from "../imgs/0.png" | ||
| 5 | import img1 from "../imgs/1.png" | ||
| 6 | import img2 from "../imgs/2.png" | ||
| 7 | import img3 from "../imgs/3.png" | ||
| 8 | import img4 from "../imgs/4.png" | ||
| 9 | import img5 from "../imgs/5.png" | ||
| 10 | import img6 from "../imgs/6.png" | ||
| 11 | import img7 from "../imgs/7.png" | ||
| 12 | import img8 from "../imgs/8.png" | ||
| 13 | |||
| 14 | |||
| 15 | export default function Sidebar() { | ||
| 16 | const sidebar_text = ['Home\u00A0page',"Profile","News","Records","Discussions","Leaderboards","Score\u00A0log"] // text on the buttons | ||
| 17 | const [sidebar, setSidebar] = React.useState(); | ||
| 18 | |||
| 19 | |||
| 20 | // Locks button for 200ms before it can be clicked again, prevents spam | ||
| 21 | const [isLocked, setIsLocked] = React.useState(false); | ||
| 22 | function HandleLock(arg) { | ||
| 23 | if (!isLocked) { | ||
| 24 | setIsLocked(true); | ||
| 25 | setTimeout(() => setIsLocked(false), 200); | ||
| 26 | SidebarHide(arg) | ||
| 27 | } | ||
| 28 | } | ||
| 29 | |||
| 30 | |||
| 31 | // Clicked buttons | ||
| 32 | function SidebarClick(x){ | ||
| 33 | const btn = document.querySelectorAll("button#side-grid"); | ||
| 34 | |||
| 35 | |||
| 36 | sidebar_text.forEach((e,i) =>( | ||
| 37 | btn[i].style.backgroundColor="#202232", | ||
| 38 | btn[i].style.borderRadius="20px" | ||
| 39 | )) | ||
| 40 | |||
| 41 | btn[x].style.backgroundColor="#141520" | ||
| 42 | btn[x].style.borderRadius="10px" | ||
| 43 | } | ||
| 44 | |||
| 45 | |||
| 46 | // The menu button | ||
| 47 | function SidebarHide(){ | ||
| 48 | const btn = document.querySelectorAll("button#side-grid"); | ||
| 49 | const span = document.querySelectorAll("#side-grid>span"); | ||
| 50 | const side = document.querySelector("#sidebar-list"); | ||
| 51 | |||
| 52 | if(sidebar===1){ | ||
| 53 | setSidebar(0) | ||
| 54 | side.style.width="308px" | ||
| 55 | sidebar_text.forEach((e, i) =>( | ||
| 56 | btn[i].style.width="300px", | ||
| 57 | setTimeout(() => {span[i].style.opacity="1";span[i].textContent=e}, 200) | ||
| 58 | )) | ||
| 59 | } else { | ||
| 60 | side.style.width="40px"; | ||
| 61 | setSidebar(1) | ||
| 62 | sidebar_text.forEach((e,i) =>( | ||
| 63 | btn[i].style.width="40px", | ||
| 64 | span[i].style.opacity="0", | ||
| 65 | setTimeout(() => {span[i].textContent=""}, 100) | ||
| 66 | )) | ||
| 67 | } | ||
| 68 | } | ||
| 69 | |||
| 70 | return ( | ||
| 71 | <div id='sidebar'> | ||
| 72 | <div> | ||
| 73 | <img src={img0} alt="" width='320px' /> | ||
| 74 | </div> | ||
| 75 | <div id='sidebar-list'> | ||
| 76 | <button onClick={()=>HandleLock()} id='side-menu'><img src={img1} alt="" /></button> | ||
| 77 | <p id='side-grid'></p> {/* p's are spaces between buttons */} | ||
| 78 | <button onClick={()=>SidebarClick(0)} id='side-grid'><img src={img2} alt="" /><span>Home page</span></button> | ||
| 79 | <button onClick={()=>SidebarClick(1)} id='side-grid'><img src={img3} alt="" /><span>Profile</span></button> | ||
| 80 | <p id='side-grid'></p> | ||
| 81 | <button onClick={()=>SidebarClick(2)} id='side-grid'><img src={img4} alt="" /><span>News</span></button> | ||
| 82 | <button onClick={()=>SidebarClick(3)} id='side-grid'><img src={img5} alt="" /><span>Records</span></button> | ||
| 83 | <button onClick={()=>SidebarClick(4)} id='side-grid'><img src={img6} alt="" /><span>Discussions</span></button> | ||
| 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 log</span></button> | ||
| 87 | </div> | ||
| 88 | <div id='sidebar-content'> | ||
| 89 | |||
| 90 | </div> | ||
| 91 | </div> | ||
| 92 | ) | ||
| 93 | } | ||
| 94 | |||
| 95 | |||