From 207a2540101b2f216bde94ae53286d2e52f044e3 Mon Sep 17 00:00:00 2001 From: Wolfboy248 Date: Mon, 25 Nov 2024 09:20:01 +0100 Subject: frontend: begin port to css modules, sidebar refactor --- frontend/src/components/Sidebar_old.tsx | 210 ++++++++++++++++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 frontend/src/components/Sidebar_old.tsx (limited to 'frontend/src/components/Sidebar_old.tsx') diff --git a/frontend/src/components/Sidebar_old.tsx b/frontend/src/components/Sidebar_old.tsx new file mode 100644 index 0000000..4d1cd7a --- /dev/null +++ b/frontend/src/components/Sidebar_old.tsx @@ -0,0 +1,210 @@ +import React, { useRef } from 'react'; +import { Link, useLocation } from 'react-router-dom'; + +import btn from "@css/Button.module.css"; +import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, PortalIcon, SearchIcon, UploadIcon } from '@images/Images'; +import Login from '@components/Login'; +import { UserProfile } from '@customTypes/Profile'; +import { Search } from '@customTypes/Search'; +import { API } from '@api/Api'; +import "@css/Sidebar.css"; + +interface SidebarProps { + setToken: React.Dispatch>; + profile?: UserProfile; + setProfile: React.Dispatch>; + onUploadRun: () => void; +}; + +const Sidebar: React.FC = ({ setToken, profile, setProfile, onUploadRun }) => { + + const btnRef = useRef(null); + const [searchData, setSearchData] = React.useState(undefined); + const [isSidebarLocked, setIsSidebarLocked] = React.useState(false); + const [isSidebarOpen, setSidebarOpen] = React.useState(true); + + const location = useLocation(); + const path = location.pathname; + + const handle_sidebar_click = (clicked_sidebar_idx: number) => { + const btn = document.querySelectorAll("#sidebarBtn"); + if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide() } + // clusterfuck + btn.forEach((e, i) => { + btn[i].classList.remove("sidebar-button-selected") + btn[i].classList.add("sidebar-button-deselected") + }) + btn[clicked_sidebar_idx].classList.add("sidebar-button-selected") + btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected") + }; + + const _handle_sidebar_hide = () => { + var btn = document.querySelectorAll("button.sidebar-button") as NodeListOf + const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf + const side = document.querySelector("#sidebar-list") as HTMLElement; + const searchbar = document.querySelector("#searchbar") as HTMLInputElement; + const uploadRunBtn = document.querySelector("#upload-run") as HTMLInputElement; + const uploadRunSpan = document.querySelector("#upload-run>span") as HTMLInputElement; + + if (isSidebarOpen) { + if (profile) { + const login = document.querySelectorAll(".login>button")[1] as HTMLElement; + login.style.opacity = "1" + uploadRunBtn.style.width = "310px" + uploadRunBtn.style.padding = "0.4em 0 0 11px" + uploadRunSpan.style.opacity = "0" + setTimeout(() => { + uploadRunSpan.style.opacity = "1" + }, 100) + } + setSidebarOpen(false); + 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" + }, 100) + }); + side.style.zIndex = "2" + } else { + if (profile) { + const login = document.querySelectorAll(".login>button")[1] as HTMLElement; + login.style.opacity = "0" + uploadRunBtn.style.width = "40px" + uploadRunBtn.style.padding = "0.4em 0 0 5px" + uploadRunSpan.style.opacity = "0" + } + setSidebarOpen(true); + side.style.width = "40px"; + searchbar.focus(); + btn.forEach((e, i) => { + e.style.width = "40px" + e.style.padding = "0.4em 0 0 5px" + span[i].style.opacity = "0" + }) + setTimeout(() => { + side.style.zIndex = "0" + }, 300); + } + }; + + const _handle_sidebar_lock = () => { + if (!isSidebarLocked) { + _handle_sidebar_hide() + setIsSidebarLocked(true); + setTimeout(() => setIsSidebarLocked(false), 300); + } + }; + + const _handle_search_change = async (q: string) => { + const searchResponse = await API.get_search(q); + setSearchData(searchResponse); + }; + + React.useEffect(() => { + if (path === "/") { handle_sidebar_click(1) } + else if (path.includes("games")) { handle_sidebar_click(2) } + else if (path.includes("rankings")) { handle_sidebar_click(3) } + // else if (path.includes("news")) { handle_sidebar_click(4) } + // else if (path.includes("scorelog")) { handle_sidebar_click(5) } + else if (path.includes("profile")) { handle_sidebar_click(4) } + else if (path.includes("rules")) { handle_sidebar_click(5) } + else if (path.includes("about")) { handle_sidebar_click(6) } + }, [path]); + + React.useEffect(() => { + const btns = document.querySelectorAll("#sidebarBtn"); + btns.forEach((e, num) => { + e.setAttribute("num", num.toString()); + }); + }) + + return ( + + ); +}; + +export default Sidebar; -- cgit v1.2.3