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

frontend/src/components/Navigation/Sidebar.tsx

@@ -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
+        extraClasses={`absolute group text-[1rem] top-[9vh] ${
-          ? "left-[16vw] duration-[0.5s]"
+          showSideBar
-          : "left-[20px] duration-[1s]"
+            ? "left-[16vw] duration-[0.5s]"
-          } ease-in-out cursor-pointer z-[50]`}
+            : "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"
+        transition-all duration-500 ease-in-out ${
-          } ${extraClasses}`}
+          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]
+                    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 hover:opacity-50"
+                     rounded-lg overflow-hidden hover:shadow-lg transition-all text-white hover:text-purple-500 cursor-pointer"
-                    onClick={() => navigate(`/category/${category.category_name}`)}
+                    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>

web_server/database/testing_data.sql

@@ -60,7 +60,8 @@ INSERT INTO categories (category_name) VALUES
 ('Dota 2'),
 ('Apex Legends'),
 ('Grand Theft Auto V'),
-('The Legend of Zelda Breath of the Wild'),
+('The Legend of Zelda: Breath of the Wild'),
+('The Legend of Zelda: Tears of the Kingdom'),
 ('Elden Ring'),
 ('Red Dead Redemption 2'),
 ('Cyberpunk 2077'),