dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FIX: Route to category page upon clicking on a followed category on the sidebar

Browse Source
This commit is contained in:
Chris-1010
2025-02-28 14:50:27 +00:00
parent aaf8300a1c
commit 1d55caff03
4 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/Navigation/Sidebar.tsx
View File

@@ -75,7 +75,8 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
const fetchFollowedCategories = async () => {
try {
const response = await fetch("/api/categories/following");
if (!response.ok) throw new Error("Failed to fetch followed categories");
if (!response.ok)
throw new Error("Failed to fetch followed categories");
const data = await response.json();
setFollowedCategories(data);
} catch (error) {
@@ -90,10 +91,11 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
<>
<ToggleButton
onClick={() => handleSideBar()}
extraClasses={`absolute group text-[1rem] top-[9vh] ${showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer z-[50]`}
extraClasses={`absolute group text-[1rem] top-[9vh] ${
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer z-[50]`}
toggled={showSideBar}
>
<SidebarIcon className="h-[2vw] w-[2vw]" />
@@ -107,8 +109,9 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
<div
id="sidebar"
className={`fixed top-0 left-0 w-[15vw] h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
transition-all duration-500 ease-in-out ${showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`}
transition-all duration-500 ease-in-out ${
showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`}
>
{/* Profile Info */}
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
@@ -159,7 +162,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
{followedStreamers.map((streamer: any) => (
<button
key={`streamer-${streamer.username}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 font-bold transition-colors"
onClick={() => navigate(`/user/${streamer.username}`)}
>
{streamer.username}
@@ -177,21 +180,28 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
</h2>
{/* Followed Categories */}
<div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full">
<div
id="categories-followed"
className="grid grid-cols-1 gap-4 p-4 w-full"
>
{followedCategories.map((category) => {
return (
<div
key={category.category_id}
className="relative flex flex-col items-center justify-center h-full max-h-[50px] border border-[--text-color]
rounded-lg overflow-hidden hover:shadow-lg transition-all hover:opacity-50"
onClick={() => navigate(`/category/${category.category_name}`)}
className="group relative flex flex-col items-center justify-center h-full max-h-[50px] border border-[--text-color]
rounded-lg overflow-hidden hover:shadow-lg transition-all text-white hover:text-purple-500 cursor-pointer"
onClick={() =>
window.location.href = `/category/${category.category_name}`
}
>
<img
src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
src={`/images/category_thumbnails/${category.category_name
.toLowerCase()
.replace(/ /g, "_")}.webp`}
alt={category.category_name}
className="w-full h-28 object-cover"
className="w-full h-28 object-cover group-hover:blur-[3px] transition-all"
/>
<div className="absolute bottom-2 bg-black bg-opacity-60 w-full text-center text-white py-1">
<div className="absolute bottom-2 bg-black bg-opacity-60 font-bold w-full text-center py-1">
{category.category_name}
</div>
</div>