diff options
Diffstat (limited to 'frontend/src/components/Sidebar.tsx')
| -rw-r--r-- | frontend/src/components/Sidebar.tsx | 90 |
1 files changed, 45 insertions, 45 deletions
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 0a7efa8..8e2573c 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx | |||
| @@ -28,19 +28,19 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo | |||
| 28 | 28 | ||
| 29 | const handle_sidebar_click = (clicked_sidebar_idx: number) => { | 29 | const handle_sidebar_click = (clicked_sidebar_idx: number) => { |
| 30 | const btn = document.querySelectorAll("button.sidebar-button"); | 30 | const btn = document.querySelectorAll("button.sidebar-button"); |
| 31 | if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide() } | 31 | if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide(); } |
| 32 | // clusterfuck | 32 | // clusterfuck |
| 33 | btn.forEach((e, i) => { | 33 | btn.forEach((e, i) => { |
| 34 | btn[i].classList.remove("sidebar-button-selected") | 34 | btn[i].classList.remove("sidebar-button-selected"); |
| 35 | btn[i].classList.add("sidebar-button-deselected") | 35 | btn[i].classList.add("sidebar-button-deselected"); |
| 36 | }) | 36 | }); |
| 37 | btn[clicked_sidebar_idx].classList.add("sidebar-button-selected") | 37 | btn[clicked_sidebar_idx].classList.add("sidebar-button-selected"); |
| 38 | btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected") | 38 | btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected"); |
| 39 | }; | 39 | }; |
| 40 | 40 | ||
| 41 | const _handle_sidebar_hide = () => { | 41 | const _handle_sidebar_hide = () => { |
| 42 | const btn = document.querySelectorAll("button.sidebar-button") as NodeListOf<HTMLElement> | 42 | const btn = document.querySelectorAll("button.sidebar-button") as NodeListOf<HTMLElement>; |
| 43 | const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf<HTMLElement> | 43 | const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf<HTMLElement>; |
| 44 | const side = document.querySelector("#sidebar-list") as HTMLElement; | 44 | const side = document.querySelector("#sidebar-list") as HTMLElement; |
| 45 | const searchbar = document.querySelector("#searchbar") as HTMLInputElement; | 45 | const searchbar = document.querySelector("#searchbar") as HTMLInputElement; |
| 46 | const uploadRunBtn = document.querySelector("#upload-run") as HTMLInputElement; | 46 | const uploadRunBtn = document.querySelector("#upload-run") as HTMLInputElement; |
| @@ -49,42 +49,42 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo | |||
| 49 | if (isSidebarOpen) { | 49 | if (isSidebarOpen) { |
| 50 | if (profile) { | 50 | if (profile) { |
| 51 | const login = document.querySelectorAll(".login>button")[1] as HTMLElement; | 51 | const login = document.querySelectorAll(".login>button")[1] as HTMLElement; |
| 52 | login.style.opacity = "1" | 52 | login.style.opacity = "1"; |
| 53 | uploadRunBtn.style.width = "310px" | 53 | uploadRunBtn.style.width = "310px"; |
| 54 | uploadRunBtn.style.padding = "0.4em 0 0 11px" | 54 | uploadRunBtn.style.padding = "0.4em 0 0 11px"; |
| 55 | uploadRunSpan.style.opacity = "0" | 55 | uploadRunSpan.style.opacity = "0"; |
| 56 | setTimeout(() => { | 56 | setTimeout(() => { |
| 57 | uploadRunSpan.style.opacity = "1" | 57 | uploadRunSpan.style.opacity = "1"; |
| 58 | }, 100) | 58 | }, 100); |
| 59 | } | 59 | } |
| 60 | setSidebarOpen(false); | 60 | setSidebarOpen(false); |
| 61 | side.style.width = "320px" | 61 | side.style.width = "320px"; |
| 62 | btn.forEach((e, i) => { | 62 | btn.forEach((e, i) => { |
| 63 | e.style.width = (window.innerWidth > 1024) ? "310px" : "265px" | 63 | e.style.width = (window.innerWidth > 1024) ? "310px" : "265px"; |
| 64 | e.style.padding = "0.4em 0 0 11px" | 64 | e.style.padding = "0.4em 0 0 11px"; |
| 65 | setTimeout(() => { | 65 | setTimeout(() => { |
| 66 | span[i].style.opacity = "1" | 66 | span[i].style.opacity = "1"; |
| 67 | }, 100) | 67 | }, 100); |
| 68 | }); | 68 | }); |
| 69 | side.style.zIndex = "2" | 69 | side.style.zIndex = "2"; |
| 70 | } else { | 70 | } else { |
| 71 | if (profile) { | 71 | if (profile) { |
| 72 | const login = document.querySelectorAll(".login>button")[1] as HTMLElement; | 72 | const login = document.querySelectorAll(".login>button")[1] as HTMLElement; |
| 73 | login.style.opacity = "0" | 73 | login.style.opacity = "0"; |
| 74 | uploadRunBtn.style.width = "40px" | 74 | uploadRunBtn.style.width = "40px"; |
| 75 | uploadRunBtn.style.padding = "0.4em 0 0 5px" | 75 | uploadRunBtn.style.padding = "0.4em 0 0 5px"; |
| 76 | uploadRunSpan.style.opacity = "0" | 76 | uploadRunSpan.style.opacity = "0"; |
| 77 | } | 77 | } |
| 78 | setSidebarOpen(true); | 78 | setSidebarOpen(true); |
| 79 | side.style.width = "40px"; | 79 | side.style.width = "40px"; |
| 80 | searchbar.focus(); | 80 | searchbar.focus(); |
| 81 | btn.forEach((e, i) => { | 81 | btn.forEach((e, i) => { |
| 82 | e.style.width = "40px" | 82 | e.style.width = "40px"; |
| 83 | e.style.padding = "0.4em 0 0 5px" | 83 | e.style.padding = "0.4em 0 0 5px"; |
| 84 | span[i].style.opacity = "0" | 84 | span[i].style.opacity = "0"; |
| 85 | }) | 85 | }); |
| 86 | setTimeout(() => { | 86 | setTimeout(() => { |
| 87 | side.style.zIndex = "0" | 87 | side.style.zIndex = "0"; |
| 88 | }, 300); | 88 | }, 300); |
| 89 | } | 89 | } |
| 90 | }; | 90 | }; |
| @@ -94,7 +94,7 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo | |||
| 94 | setIsMobileSearchOpen(!isMobileSearchOpen); | 94 | setIsMobileSearchOpen(!isMobileSearchOpen); |
| 95 | } else { | 95 | } else { |
| 96 | if (!isSidebarLocked) { | 96 | if (!isSidebarLocked) { |
| 97 | _handle_sidebar_hide() | 97 | _handle_sidebar_hide(); |
| 98 | setIsSidebarLocked(true); | 98 | setIsSidebarLocked(true); |
| 99 | setTimeout(() => setIsSidebarLocked(false), 300); | 99 | setTimeout(() => setIsSidebarLocked(false), 300); |
| 100 | } | 100 | } |
| @@ -124,14 +124,14 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo | |||
| 124 | }; | 124 | }; |
| 125 | 125 | ||
| 126 | React.useEffect(() => { | 126 | React.useEffect(() => { |
| 127 | if (path === "/") { handle_sidebar_click(1) } | 127 | if (path === "/") { handle_sidebar_click(1); } |
| 128 | else if (path.includes("games")) { handle_sidebar_click(2) } | 128 | else if (path.includes("games")) { handle_sidebar_click(2); } |
| 129 | else if (path.includes("rankings")) { handle_sidebar_click(3) } | 129 | else if (path.includes("rankings")) { handle_sidebar_click(3); } |
| 130 | // else if (path.includes("news")) { handle_sidebar_click(4) } | 130 | // else if (path.includes("news")) { handle_sidebar_click(4) } |
| 131 | // else if (path.includes("scorelog")) { handle_sidebar_click(5) } | 131 | // else if (path.includes("scorelog")) { handle_sidebar_click(5) } |
| 132 | else if (path.includes("profile")) { handle_sidebar_click(4) } | 132 | else if (path.includes("profile")) { handle_sidebar_click(4); } |
| 133 | else if (path.includes("rules")) { handle_sidebar_click(5) } | 133 | else if (path.includes("rules")) { handle_sidebar_click(5); } |
| 134 | else if (path.includes("about")) { handle_sidebar_click(6) } | 134 | else if (path.includes("about")) { handle_sidebar_click(6); } |
| 135 | }, [path]); | 135 | }, [path]); |
| 136 | 136 | ||
| 137 | return ( | 137 | return ( |
| @@ -225,15 +225,15 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo | |||
| 225 | </Link> | 225 | </Link> |
| 226 | ))} | 226 | ))} |
| 227 | {searchData?.players.map((q, index) => | 227 | {searchData?.players.map((q, index) => |
| 228 | ( | 228 | ( |
| 229 | <Link to={ | 229 | <Link to={ |
| 230 | profile && q.steam_id === profile.steam_id ? "/profile" : | 230 | profile && q.steam_id === profile.steam_id ? "/profile" : |
| 231 | `/users/${q.steam_id}` | 231 | `/users/${q.steam_id}` |
| 232 | } className='search-player' key={index} onClick={_close_mobile_search_and_menu}> | 232 | } className='search-player' key={index} onClick={_close_mobile_search_and_menu}> |
| 233 | <img src={q.avatar_link} alt='pfp'></img> | 233 | <img src={q.avatar_link} alt='pfp'></img> |
| 234 | <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span> | 234 | <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span> |
| 235 | </Link> | 235 | </Link> |
| 236 | ))} | 236 | ))} |
| 237 | 237 | ||
| 238 | </div> | 238 | </div> |
| 239 | </div> | 239 | </div> |