FEAT: Sidebar update to include followed streamers & categories;

FEAT: Sidebar now alters page width on open/close (DynamicPageContent);
FIX: Properly disallow shortcut keys when typing in an input field;

frontend/src/components/Navigation/Navbar.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Logo from "../Layout/Logo";
-import Button from "../Input/Button";
+import Button, { ToggleButton } from "../Input/Button";
 import Sidebar from "./Sidebar";
 import { Sidebar as SidebarIcon } from "lucide-react";
 import {
@@ -13,6 +13,8 @@ import AuthModal from "../Auth/AuthModal";
 import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
 import QuickSettings from "../Settings/QuickSettings";
+import { useSidebar } from "../../context/SidebarContext";
+import { useQuickSettings } from "../../context/QuickSettingsContext";
 
 interface NavbarProps {
   variant?: "home" | "default";
@@ -21,8 +23,8 @@ interface NavbarProps {
 const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
   const { isLoggedIn } = useAuth();
   const { showAuthModal, setShowAuthModal } = useAuthModal();
-  const [showSideBar, setShowSideBar] = useState(false);
-  const [showQuickSettings, setShowQuickSettings] = useState(false);
+  const { showSideBar, setShowSideBar } = useSidebar();
+  const { showQuickSettings, setShowQuickSettings } = useQuickSettings();
 
   const handleLogout = () => {
     console.log("Logging out...");
@@ -42,10 +44,32 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
     setShowSideBar(!showSideBar);
   };
 
+  // Keyboard shortcut to toggle sidebar
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (
+        e.key === "s" &&
+        document.activeElement == document.body &&
+        isLoggedIn
+      ) {
+        handleSideBar();
+      }
+      if (e.key === "q" && document.activeElement == document.body) {
+        handleQuickSettings();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyPress);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [showSideBar, showQuickSettings, setShowSideBar, isLoggedIn]);
+
   return (
     <div
       id="navbar"
-      className={`flex justify-center items-center ${
+      className={`flex justify-center items-center w-full ${
         variant === "home"
           ? "h-[45vh] flex-col"
           : "h-[15vh] col-span-2 flex-row"
@@ -53,7 +77,11 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
     >
       <Logo variant={variant} />
       <Button
-        extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap"
+        extraClasses={`absolute top-[75px] ${
+          showSideBar
+            ? "left-[16vw] duration-[0.5s]"
+            : "left-[20px] duration-[1s]"
+        } text-[1rem] flex items-center flex-nowrap`}
         onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
       >
         {isLoggedIn ? (
@@ -69,51 +97,47 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         )}
       </Button>
 
+      {/* Sidebar */}
       {isLoggedIn && (
         <>
-          <Button
+          <ToggleButton
             onClick={() => handleSideBar()}
-            extraClasses={`absolute ${
+            extraClasses={`absolute group text-[1rem] top-[20px] ${
               showSideBar
-                ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
-          bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
-          over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `
-                : "top-[75px] left-[20px]"
-            } transition-all duration-300 z-[99]`}
+                ? "left-[16vw] duration-[0.5s]"
+                : "left-[20px] duration-[1s]"
+            } ease-in-out cursor-pointer`}
+            toggled={showSideBar}
           >
-            <SidebarIcon className="top-[0.20em] left-[10em] mr-1 z-[90]" />
-          </Button>
-          <div
-            className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--bg-color)] text-[var(--text-color)] z-[90] overflow-y-auto scrollbar-hide
-              transition-transform transition-opacity duration-500 ease-in-out ${
-                showSideBar
-                  ? "translate-x-0 opacity-100"
-                  : "-translate-x-full opacity-0"
-              }`}
-          >
-            <Sidebar />
-          </div>
+            <SidebarIcon className="top-[0.20em] left-[10em] z-[90]" />
+
+            {showSideBar && (
+              <small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
+                Press S
+              </small>
+            )}
+          </ToggleButton>
+          <Sidebar />
         </>
       )}
 
-      <Button
-        extraClasses={`absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap z-[9999]`}
+      {/* Quick Settings Sidebar */}
+      <ToggleButton
+        extraClasses={`absolute group text-[1rem] top-[20px] ${
+          showQuickSettings ? "right-[21vw]" : "right-[20px]"
+        } cursor-pointer`}
         onClick={() => handleQuickSettings()}
+        toggled={showQuickSettings}
       >
-        <SettingsIcon className="h-15 w-15 mr-1 " />
-        Quick Settings
-      </Button>
+        <SettingsIcon className="h-15 w-15" />
 
-      <div
-        className={`fixed top-0 right-0 w-[250px] h-screen ] z-[90] overflow-y-auto scrollbar-hide
-               transition-opacity duration-500 ease-in-out ${
-                 showQuickSettings
-                   ? "translate-x-0 opacity-100"
-                   : "translate-x-full opacity-0"
-               }`}
-      >
-        <QuickSettings />
-      </div>
+        {showQuickSettings && (
+              <small className="absolute flex items-center top-0 mr-4 right-0 h-full w-full my-auto group-hover:right-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
+                Press Q
+              </small>
+            )}
+      </ToggleButton>
+      <QuickSettings />
 
       <SearchBar />
 

frontend/src/components/Navigation/Sidebar.tsx

@@ -1,75 +1,127 @@
-import React, { useEffect, useState } from "react";
-import { SunMoon as SunMoonIcon } from "lucide-react"
-import Theme from "./Theme";
-import "../../assets/styles/sidebar.css"
+import React, { useState, useEffect } from "react";
+import "../../assets/styles/sidebar.css";
+import { useSidebar } from "../../context/SidebarContext";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../context/AuthContext";
+
+interface Streamer {
+  user_id: number;
+  username: string;
+}
+
+interface Category {
+  category_id: number;
+  category_name: string;
+}
 
 interface SideBarProps {
   extraClasses?: string;
 }
 
-const Sidebar: React.FC<SideBarProps> = () => {
-  const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
-  const [triggerAnimation, setTriggerAnimation] = useState(false);
+const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
+  const { showSideBar } = useSidebar();
+  const navigate = useNavigate();
+  const { username, isLoggedIn } = useAuth();
+  const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
+  const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
+
+  // Fetch followed streamers
   useEffect(() => {
-    const sideBarScroll = () => {
-      document.body.style.overflow = isCursorOnSidebar ? "hidden" : "unset";
+    if (!isLoggedIn) return;
+
+    const fetchFollowedStreamers = async () => {
+      try {
+        const response = await fetch("/api/user/following");
+        if (!response.ok) throw new Error("Failed to fetch followed streamers");
+        const data = await response.json();
+        setFollowedStreamers(data);
+      } catch (error) {
+        console.error("Error fetching followed streamers:", error);
+      }
     };
-    sideBarScroll()
 
-    return () => {
-      document.body.style.overflow = "unset";
+    fetchFollowedStreamers();
+  }, [isLoggedIn]);
+
+  // Fetch followed categories
+  useEffect(() => {
+    if (!isLoggedIn) return;
+
+    const fetchFollowedCategories = async () => {
+      try {
+        const response = await fetch("/api/categories/following");
+        if (!response.ok)
+          throw new Error("Failed to fetch followed categories");
+        const data = await response.json();
+        setFollowedCategories(data);
+      } catch (error) {
+        console.error("Error fetching followed categories:", error);
+      }
     };
-  }, [isCursorOnSidebar]);
 
-
-  const testStreamer: Record<string, string> = {
-    "Markiplier": "Slink1",
-    "Jacksepticeye": "Slink2",
-    "8-BitRyan": "Slink3",
-  };
-
-  const testCategory: Record<string, { dummyLink: string; dummyImage: string }> = {
-    "Action": { dummyLink: "link1", dummyImage: "../../../images/icons/Action.webp" },
-    "Horror": { dummyLink: "link2", dummyImage: "../../../images/icons/Horror.png" },
-    "Psychological": { dummyLink: "link3", dummyImage: "../../../images/icons/Psychological.png" },
-    "Adult": { dummyLink: "link4", dummyImage: "../../../images/icons/R-18.png" },
-    "Shooter": { dummyLink: "link5", dummyImage: "../../../images/icons/Shooter.png" }
-  };
-
-  const shownStreamers = Object.entries(testStreamer).map(([dummyCategory, dummyLink]) => {
-    return (
-      <li key={dummyCategory}>
-        <a href={dummyLink}>{dummyCategory}</a>
-      </li>
-    );
-  });
-
-  const shownCategory = Object.entries(testCategory).map(([dummyCategory, { dummyLink, dummyImage }]) => {
-    return (
-      <li key={dummyCategory} className="flex items-center border border-7 border-black space-x-3 rounded-md p-0 text-center
-      hover:bg-[#800020] hover:scale-110 hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]">
-        <img src={dummyImage} alt={dummyCategory} className="w-[2em] h-[2em] bg-white ml-[0.25em]" />
-        <a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a>
-      </li>
-    );
-  });
+    fetchFollowedCategories();
+  }, [isLoggedIn]);
 
   return (
-    <>
-
-      <div>
-        <h1 className="style"> Followed </h1>
-        <ul>
-          {shownStreamers}
-        </ul>
-
-        <h1 className="category-style pt-[0.50em]"> Your Categories </h1>
-        <ul>
-          {shownCategory}
-        </ul>
-
+    <div
+      id="sidebar"
+      className={`fixed top-0 left-0 w-[15vw] h-screen flex flex-col bg-[var(--bg-color)] text-[var(--text-color)] text-center overflow-y-auto scrollbar-hide
+        transition-all duration-500 ease-in-out ${
+          showSideBar ? "translate-x-0" : "-translate-x-full"
+        } ${extraClasses}`}
+    >
+      {/* Profile Info */}
+      <div className="flex flex-row items-center justify-evenly bg-blue-700/40 py-[1em]">
+        <img
+          src="/images/monkey.png"
+          alt="profile picture"
+          className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
+          onClick={() => navigate(`/user/${username}`)}
+        />
+        <div className="text-center flex flex-col items-center justify-center">
+          <h5 className="font-thin text-[0.85rem] cursor-default">Logged in as</h5>
+          <button
+            className="font-black text-[1.4rem] hover:underline"
+            onClick={() => navigate(`/user/${username}`)}
+          >
+            {username}
+          </button>
+        </div>
       </div>
-    </>
+
+      <div id="following" className="flex flex-col flex-grow justify-evenly gap-4 p-4">
+        <h1 className="style border cursor-default">Following</h1>
+        <div id="streamers-followed" className="flex-grow">
+          <h2 className="text-[1.5rem] cursor-default">Streamers</h2>
+          <ul className="mt-2 space-y-2">
+            {followedStreamers.map((streamer) => (
+              <li
+                key={streamer.user_id}
+                className="cursor-pointer bg-black py-2 rounded-lg text-white hover:text-purple-500 transition-colors"
+                onClick={() => navigate(`/user/${streamer.username}`)}
+              >
+                {streamer.username}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div id="categories-followed" className="flex-grow">
+          <h2 className="text-[1.5rem] cursor-default">Categories</h2>
+          <ul className="mt-2 space-y-2">
+            {followedCategories.map((category) => (
+              <li
+                key={category.category_id}
+                className="cursor-pointer bg-black py-2 rounded-lg text-white hover:text-purple-500 transition-colors"
+                onClick={() => navigate(`/category/${category.category_name}`)}
+              >
+                {category.category_name}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
   );
 };