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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite --config vite.config.dev.ts",

frontend/src/App.tsx

@@ -10,6 +10,8 @@ import ResetPasswordPage from "./pages/ResetPasswordPage";
 import CategoryPage from "./pages/CategoryPage";
 import CategoriesPage from "./pages/AllCategoriesPage";
 import ResultsPage from "./pages/ResultsPage";
+import { SidebarProvider } from "./context/SidebarContext";
+import { QuickSettingsProvider } from "./context/QuickSettingsContext";
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -35,31 +37,38 @@ function App() {
       value={{ isLoggedIn, username, user_id, setIsLoggedIn, setUsername }}
     >
       <ContentProvider>
-        <BrowserRouter>
+        <SidebarProvider>
-          <Routes>
+          <QuickSettingsProvider>
-            <Route
+            <BrowserRouter>
-              path="/"
+              <Routes>
-              element={
+                <Route
-                isLoggedIn ? <HomePage variant="personalised" /> : <HomePage />
+                  path="/"
-              }
+                  element={
-            />
+                    isLoggedIn ? (
-
+                      <HomePage variant="personalised" />
-            <Route path="/:streamerName" element={<StreamerRoute />} />
+                    ) : (
-            <Route path="/user/:username" element={<UserPage />} />
+                      <HomePage />
-            <Route
+                    )
-              path="/reset_password/:token"
+                  }
-              element={<ResetPasswordPage />}
+                />
-            ></Route>
+                <Route path="/:streamerName" element={<StreamerRoute />} />
-            <Route
+                <Route path="/user/:username" element={<UserPage />} />
-              path="/category/:category_name"
+                <Route
-              element={<CategoryPage />}
+                  path="/reset_password/:token"
-            ></Route>
+                  element={<ResetPasswordPage />}
-            <Route path="/categories" element={<CategoriesPage />}></Route>
+                ></Route>
-            <Route path="/results" element={<ResultsPage />}></Route>
+                <Route
-            <Route path="/404" element={<NotFoundPage />} />
+                  path="/category/:category_name"
-            <Route path="*" element={<Navigate to="/404" replace />} />
+                  element={<CategoryPage />}
-            </Routes>
+                ></Route>
-        </BrowserRouter>
+                <Route path="/categories" element={<CategoriesPage />}></Route>
+                <Route path="/results" element={<ResultsPage />}></Route>
+                <Route path="/404" element={<NotFoundPage />} />
+                <Route path="*" element={<Navigate to="/404" replace />} />
+              </Routes>
+            </BrowserRouter>
+          </QuickSettingsProvider>
+        </SidebarProvider>
       </ContentProvider>
     </AuthContext.Provider>
   );

frontend/src/components/Layout/DynamicPageContent.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Navbar from "../Navigation/Navbar";
+import { useSidebar } from "../../context/SidebarContext";
+
+interface DynamicPageContentProps {
+  children: React.ReactNode;
+  navbarVariant?: "home" | "default";
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const DynamicPageContent: React.FC<DynamicPageContentProps> = ({ 
+  children, 
+  navbarVariant = "default",
+  className = "",
+  style
+}) => {
+  const { showSideBar } = useSidebar();
+
+  return (
+    <div className={className} style={style}>
+      <Navbar variant={navbarVariant} />
+      <div id="content" className={`${showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]"} transition-all duration-[500ms] ease-in-out`}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default DynamicPageContent;

frontend/src/components/Layout/ListRow.tsx

@@ -44,7 +44,7 @@ const ListRow: React.FC<ListRowProps> = ({
 
   return (
     <div
-      className={`flex flex-col space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] ${extraClasses}`}
+      className={`flex flex-col w-full space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] transition-all ${extraClasses}`}
     >
       <div className="space-y-1">
         <h2 className="text-2xl font-bold">{title}</h2>

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 { showSideBar, setShowSideBar } = useSidebar();
-  const [showQuickSettings, setShowQuickSettings] = useState(false);
+  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
+                ? "left-[16vw] duration-[0.5s]"
-          bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
+                : "left-[20px] duration-[1s]"
-          over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `
+            } ease-in-out cursor-pointer`}
-                : "top-[75px] left-[20px]"
+            toggled={showSideBar}
-            } transition-all duration-300 z-[99]`}
           >
-            <SidebarIcon className="top-[0.20em] left-[10em] mr-1 z-[90]" />
+            <SidebarIcon className="top-[0.20em] left-[10em] z-[90]" />
-          </Button>
+
-          <div
+            {showSideBar && (
-            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
+              <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">
-              transition-transform transition-opacity duration-500 ease-in-out ${
+                Press S
-                showSideBar
+              </small>
-                  ? "translate-x-0 opacity-100"
+            )}
-                  : "-translate-x-full opacity-0"
+          </ToggleButton>
-              }`}
+          <Sidebar />
-          >
-            <Sidebar />
-          </div>
         </>
       )}
 
-      <Button
+      {/* Quick Settings Sidebar */}
-        extraClasses={`absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap z-[9999]`}
+      <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 " />
+        <SettingsIcon className="h-15 w-15" />
-        Quick Settings
-      </Button>
 
-      <div
+        {showQuickSettings && (
-        className={`fixed top-0 right-0 w-[250px] h-screen ] z-[90] overflow-y-auto scrollbar-hide
+              <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">
-               transition-opacity duration-500 ease-in-out ${
+                Press Q
-                 showQuickSettings
+              </small>
-                   ? "translate-x-0 opacity-100"
+            )}
-                   : "translate-x-full opacity-0"
+      </ToggleButton>
-               }`}
+      <QuickSettings />
-      >
-        <QuickSettings />
-      </div>
 
       <SearchBar />
 

frontend/src/components/Navigation/Sidebar.tsx

@@ -1,75 +1,127 @@
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
-import { SunMoon as SunMoonIcon } from "lucide-react"
+import "../../assets/styles/sidebar.css";
-import Theme from "./Theme";
+import { useSidebar } from "../../context/SidebarContext";
-import "../../assets/styles/sidebar.css"
+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 Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
-  const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
+  const { showSideBar } = useSidebar();
-  const [triggerAnimation, setTriggerAnimation] = useState(false);
+  const navigate = useNavigate();
+  const { username, isLoggedIn } = useAuth();
+  const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
+  const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
+
+  // Fetch followed streamers
   useEffect(() => {
-    const sideBarScroll = () => {
+    if (!isLoggedIn) return;
-      document.body.style.overflow = isCursorOnSidebar ? "hidden" : "unset";
+
+    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 () => {
+    fetchFollowedStreamers();
-      document.body.style.overflow = "unset";
+  }, [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]);
 
-
+    fetchFollowedCategories();
-  const testStreamer: Record<string, string> = {
+  }, [isLoggedIn]);
-    "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>
-    );
-  });
 
   return (
-    <>
+    <div
-
+      id="sidebar"
-      <div>
+      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
-        <h1 className="style"> Followed </h1>
+        transition-all duration-500 ease-in-out ${
-        <ul>
+          showSideBar ? "translate-x-0" : "-translate-x-full"
-          {shownStreamers}
+        } ${extraClasses}`}
-        </ul>
+    >
-
+      {/* Profile Info */}
-        <h1 className="category-style pt-[0.50em]"> Your Categories </h1>
+      <div className="flex flex-row items-center justify-evenly bg-blue-700/40 py-[1em]">
-        <ul>
+        <img
-          {shownCategory}
+          src="/images/monkey.png"
-        </ul>
+          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>
   );
 };
 

frontend/src/components/Video/ChatPanel.tsx

@@ -16,13 +16,11 @@ interface ChatMessage {
 interface ChatPanelProps {
   streamId: number;
   onViewerCountChange?: (count: number) => void;
-  onInputFocus: (focused: boolean) => void;
 }
 
 const ChatPanel: React.FC<ChatPanelProps> = ({
   streamId,
   onViewerCountChange,
-  onInputFocus,
 }) => {
   const { isLoggedIn, username, user_id} = useAuth();
   const { showAuthModal, setShowAuthModal } = useAuthModal();
@@ -205,8 +203,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
               extraClasses="flex-grow w-full focus:w-full"
               maxLength={200}
               onClick={() => !isLoggedIn && setShowAuthModal(true)}
-              onFocus={() => onInputFocus(true)}
-              onBlur={() => onInputFocus(false)}
             />
 
             <button

frontend/src/components/Video/VideoPlayer.tsx

@@ -58,7 +58,7 @@ const VideoPlayer: React.FC = () => {
   }, [streamerName]);
 
   return (
-    <div className="min-w-[65vw] w-full h-full flex justify-center items-center bg-gray-900 rounded-lg">
+    <div className="w-full h-full flex justify-center items-center bg-gray-900 rounded-lg">
       <div ref={videoRef} className="w-full max-w-[160vh] self-center" />
     </div>
   );

frontend/src/context/SidebarContext.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface SidebarContextType {
+  showSideBar: boolean;
+  setShowSideBar: (show: boolean) => void;
+}
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+
+export function SidebarProvider({ children }: { children: ReactNode }) {
+  const [showSideBar, setShowSideBar] = useState(false);
+
+  return (
+    <SidebarContext.Provider value={{ showSideBar, setShowSideBar }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (context === undefined) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+}

frontend/src/pages/AllCategoriesPage.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
-import Navbar from "../components/Navigation/Navbar";
 import { useNavigate } from "react-router-dom";
 import ListRow from "../components/Layout/ListRow";
 import { useCategories } from "../context/ContentContext";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
 
 const AllCategoriesPage: React.FC = () => {
   const { categories, setCategories } = useCategories();
@@ -51,11 +51,10 @@ const AllCategoriesPage: React.FC = () => {
   };
 
   return (
-    <div
+    <DynamicPageContent
       className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
       style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
     >
-      <Navbar />
       <ListRow
         type="category"
         title="All Categories"
@@ -64,7 +63,7 @@ const AllCategoriesPage: React.FC = () => {
         extraClasses="text-center"
         wrap={true}
       />
-    </div>
+    </DynamicPageContent>
   );
 };
 

frontend/src/pages/CategoryPage.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import Navbar from "../components/Navigation/Navbar";
 import ListRow from "../components/Layout/ListRow";
 import { useNavigate } from "react-router-dom";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
 
 interface StreamData {
   type: "stream";
@@ -66,12 +66,10 @@ const CategoryPage: React.FC = () => {
   }
 
   return (
-    <div
+    <DynamicPageContent
       className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
       style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
     >
-      <Navbar />
-
       <div className="pt-8">
         <ListRow
           type="stream"
@@ -89,7 +87,7 @@ const CategoryPage: React.FC = () => {
           No live streams found in this category
         </div>
       )}
-    </div>
+    </DynamicPageContent>
   );
 };
 

frontend/src/pages/HomePage.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import Navbar from "../components/Navigation/Navbar";
 import ListRow from "../components/Layout/ListRow";
 import { useNavigate } from "react-router-dom";
 import { useStreams, useCategories } from "../context/ContentContext";
 import Button from "../components/Input/Button";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
 
 interface HomePageProps {
   variant?: "default" | "personalised";
@@ -23,13 +23,11 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   };
 
   return (
-    <div
+    <DynamicPageContent
-      id="home-page"
+      navbarVariant="home"
-      className="animate-moving_bg h-full"
+      className="h-full min-h-screen animate-moving_bg"
       style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
     >
-      <Navbar variant="home" />
-
       {/* If Personalised_HomePage, display Streams recommended for the logged-in user. Else, live streams with the most viewers. */}
       <ListRow
         type="stream"
@@ -77,7 +75,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
           Show More . . .
         </Button>
       </ListRow>
-    </div>
+    </DynamicPageContent>
   );
 };
 

frontend/src/pages/UserPage.tsx

@@ -8,6 +8,7 @@ import ListItem from "../components/Layout/ListItem";
 import { useFollow } from "../hooks/useFollow";
 import { useNavigate } from "react-router-dom";
 import Button from "../components/Input/Button";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
 
 interface UserProfileData {
   id: number;
@@ -108,14 +109,14 @@ const UserPage: React.FC = () => {
     );
   }
   return (
-    <div
+    <DynamicPageContent
       className={`min-h-screen ${
         profileData.isLive
           ? "bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#2efd2d]"
           : bgColors[userPageVariant]
       } text-white flex flex-col`}
     >
-      <Navbar />
+      
       <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8">
         <div className="grid grid-cols-3 w-full gap-8">
           {/* Profile Section - Left Third */}
@@ -241,7 +242,7 @@ const UserPage: React.FC = () => {
         </div>
       </div>
       {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
-    </div>
+    </DynamicPageContent>
   );
 };
 

frontend/src/pages/VideoPage.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import Navbar from "../components/Navigation/Navbar";
 import { ToggleButton } from "../components/Input/Button";
 import ChatPanel from "../components/Video/ChatPanel";
 import { useNavigate, useParams } from "react-router-dom";
@@ -10,6 +9,8 @@ import VideoPlayer from "../components/Video/VideoPlayer";
 import { SocketProvider } from "../context/SocketContext";
 import AuthModal from "../components/Auth/AuthModal";
 import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import { useSidebar } from "../context/SidebarContext";
 
 interface VideoPageProps {
   streamerId: number;
@@ -28,7 +29,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
   const [streamData, setStreamData] = useState<StreamDataProps>();
   const [viewerCount, setViewerCount] = useState(0);
   const [isChatOpen, setIsChatOpen] = useState(true);
-  const [isInputFocused, setIsInputFocused] = useState(false);
+  const { showSideBar } = useSidebar();
   const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
     useFollow();
   const { showAuthModal, setShowAuthModal } = useAuthModal();
@@ -80,7 +81,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
   // Keyboard shortcut to toggle chat
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
-      if (e.key === "c" && !isInputFocused) {
+      if (e.key === "c" && document.activeElement == document.body) {
         setIsChatOpen((prev) => !prev);
       }
     };
@@ -90,7 +91,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
     return () => {
       document.removeEventListener("keydown", handleKeyPress);
     };
-  }, [isInputFocused]);
+  }, []);
 
   const toggleChat = () => {
     setIsChatOpen((prev) => !prev);
@@ -111,34 +112,39 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 
   return (
     <SocketProvider>
-      <div id="videoPage" className="w-full">
+      {/* Toggle Button for Chat */}
-        <Navbar />
+      <ToggleButton
+        onClick={toggleChat}
+        toggled={isChatOpen}
+        extraClasses="group cursor-pointer absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap"
+      >
+        {isChatOpen ? "Hide Chat" : "Show Chat"}
 
+        <small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">
+          Press C
+        </small>
+      </ToggleButton>
+
+      <DynamicPageContent className="w-full min-h-screen">
         <div
           id="container"
-          className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
+          className={`bg-gray-900 h-full grid ${
-            } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
+            isChatOpen
+              ? showSideBar
+                ? "w-[85vw] duration-[1s]"
+                : "w-[100vw] duration-[0.5s]"
+              : showSideBar
+              ? "w-[110vw] duration-[1s]"
+              : "w-[125vw] duration-[0.5s]"
+          } grid-rows-[auto_1fr] grid-cols-[auto_25vw] transition-all ease-in-out`}
         >
           <div className="relative">
             <VideoPlayer />
           </div>
 
-          <ToggleButton
-            onClick={toggleChat}
-            toggled={isChatOpen}
-            extraClasses="group cursor-pointer absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap"
-          >
-            {isChatOpen ? "Hide Chat" : "Show Chat"}
-
-            <small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">
-              Press C
-            </small>
-          </ToggleButton>
-
           <ChatPanel
             streamId={streamerId}
             onViewerCountChange={(count: number) => setViewerCount(count)}
-            onInputFocus={setIsInputFocused}
           />
 
           {/* Stream Data */}
@@ -244,7 +250,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
             <AuthModal onClose={() => setShowAuthModal(false)} />
           )}
         </div>
-      </div>
+      </DynamicPageContent>
     </SocketProvider>
   );
 };