Add files via upload

2 files changed, 168 insertions, 0 deletions

diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css
new file mode 100644
index 0000000..9742f0e
--- /dev/null
+++ b/frontend/src/components/sidebar.css
@@ -0,0 +1,73 @@
+#sidebar {

+    background-color: #2b2e46;

+    width: 320px;    height: 100vh;

+    min-height: 840px;

+}

+

+#sidebar>div:nth-child(1){height: 140px;} /* logo */

+

+button#side-grid {

+    border: 0;

+    background-color: #202232;

+    border-radius: 20px;

+    font-size: 18px;

+    color: #cdcfdf;

+    width: 300px;

+    

+    transition: 

+    background-color .2s, 

+    border-radius .5s,

+    width .3s;

+}

+span {

+    font-family: D-DIN;

+    opacity: 1;

+    transition: opacity .1s;

+}

+button#side-grid:hover {

+    background-color: #141520 !important;

+    border-radius: 10px !important;

+    cursor: pointer;

+}

+

+button>img{

+    height: 20px;

+    float: left;

+    padding-left: 4px;

+    filter: invert(0.8);

+    scale: 1.1;

+}

+

+#side-menu { /* just the menu button */

+    border: 0;

+    position: absolute;

+    background-color: transparent;

+    left: 6px;    top: 6px;

+    width: 40px;    height: 40px;

+    cursor: pointer;

+}

+

+#sidebar-list { /* buttons */

+    z-index: 1;

+    min-height: 700px;

+    width: 308px; height: calc(100vh - 140px); /* calc - logo */

+    position: absolute;

+    background-color: #2b2e46;

+    display: grid;

+    padding: 0 6px;

+    row-gap: 8px;

+    grid-template-rows: 

+    60px 40px 40px

+    30px 40px 40px 40px

+    30px 40px 40px;

+

+    transition: width .3s;

+}

+

+#sidebar-content { 

+    position: absolute;

+    background-color: #202232;

+    left: 52px;

+    min-height: 700px;

+    width: 268px;    height: calc(100vh - 140px); /* calc - logo */

+}
\ No newline at end of file
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>

+    )

+}

+

+