FIX: Quick Setting Icon

frontend/src/components/Layout/ListRow.tsx

@@ -55,12 +55,12 @@ const ListRow: React.FC<ListRowProps> = ({
       
       <div className="relative overflow-hidden flex items-center z-0">
 
-        <ArrowLeftIcon onClick={slideLeft} size={20} className="mr-1 cursor-pointer" />
+        <ArrowLeftIcon onClick={slideLeft} size={20} className="absolute mr-1 cursor-pointer z-[999]" />
 
         <div
           ref={slider}
           className="flex overflow-x-scroll whitespace-nowrap scroll-smooth scrollbar-hide gap-5"
-          style={{ scrollbarWidth: 'none', padding: "10px"}}
+          style={{ scrollbarWidth: 'none', paddingLeft: "30px", paddingTop: "10px", paddingBottom: "10px" }}
         >
           {items.map((item) => (
             <ListItem
@@ -83,7 +83,7 @@ const ListRow: React.FC<ListRowProps> = ({
           ))}
         </div>
 
-        <ArrowRightIcon onClick={slideRight} size={20} className="relative left-[10px] cursor-pointer" />
+        <ArrowRightIcon onClick={slideRight} size={20} className="absolute right-[10px] cursor-pointer" />
 
       </div>
     </div>

frontend/src/components/Layout/Navbar.tsx

@@ -13,6 +13,7 @@ import Input from "./Input";
 import AuthModal from "../Auth/AuthModal";
 import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
+import QuickSettings from "./QuickSettings";
 
 interface NavbarProps {
   variant?: "home" | "default";
@@ -22,6 +23,7 @@ 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 handleLogout = () => {
     console.log("Logging out...");
@@ -40,11 +42,10 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
   return (
     <div
       id="navbar"
-      className={`flex justify-center items-center ${
+      className={`flex justify-center items-center ${variant === "home"
-        variant === "home"
           ? "h-[45vh] flex-col"
           : "h-[15vh] col-span-2 flex-row"
-      }`}
+        }`}
     >
       <Logo variant={variant} />
       <Button
@@ -68,21 +69,19 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <>
           <Button
             onClick={() => handleSideBar()}
-            extraClasses={`absolute ${
+            extraClasses={`absolute ${showSideBar
-              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]`}
+              } transition-all duration-300 z-[99]`}
           >
             <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(--sideBar-LightBG)] text-[var(--sideBar-LightText)] z-[90] overflow-y-auto scrollbar-hide
-    transition-transform transition-opacity duration-500 ease-in-out ${
+              transition-transform transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
-      showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
+              }`}
-    }`}
           >
             <Sidebar />
           </div>
@@ -96,6 +95,13 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <SettingsIcon className="h-15 w-15 mr-1" />
         Quick Settings
       </Button>
+      
+        <div
+          className={`fix top-0 right-0 w-250px h-screen 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>
 
       <div id="search-bar" className="flex items-center">
         <Input

frontend/src/components/Layout/QuickSettings.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const QuickSettings = () => {
+  return (
+    <div className='bg-white'>QuickSettings</div>
+  )
+}
+
+export default QuickSettings

frontend/src/components/Layout/file.tsx

@@ -1,102 +0,0 @@
-import React from "react";
-
-interface ListItemProps {
-  type: "stream" | "category";
-  id: number;
-  title: string;
-  streamer?: string;
-  streamCategory?: string;
-  viewers: number;
-  thumbnail?: string;
-  onItemClick?: () => void;
-}
-
-interface ListRowProps {
-  type: "stream" | "category";
-  title: string;
-  description: string;
-  items: ListItemProps[];
-  extraClasses?: string;
-  onClick: (itemName: string) => void;
-}
-
-// Row of entries
-const ListRow: React.FC<ListRowProps> = ({
-  title,
-  description,
-  items,
-  onClick,
-  extraClasses = "",
-}) => {
-  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}`}
-    >
-      <div className="space-y-1">
-        <h2 className="text-2xl font-bold">{title}</h2>
-        <p>{description}</p>
-      </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-        {items.map((item) => (
-          <ListItem
-            key={`${item.type}-${item.id}`}
-            id={item.id}
-            type={item.type}
-            title={item.title}
-            streamer={item.type === "stream" ? item.streamer : undefined}
-            streamCategory={
-              item.type === "stream" ? item.streamCategory : undefined
-            }
-            viewers={item.viewers}
-            thumbnail={item.thumbnail}
-            onItemClick={() =>
-              item.type === "stream" && item.streamer
-                ? onClick?.(item.streamer)
-                : onClick?.(item.title)
-            }
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-// Individual list entry component
-export const ListItem: React.FC<ListItemProps> = ({
-  type,
-  title,
-  streamer,
-  streamCategory,
-  viewers,
-  thumbnail,
-  onItemClick,
-}) => {
-  return (
-    <div
-      className="flex flex-col bg-purple-900 rounded-lg overflow-hidden cursor-pointer hover:bg-pink-700 hover:scale-105 transition-all"
-      onClick={onItemClick}
-    >
-      <div className="relative w-full pt-[56.25%] ">
-        {thumbnail ? (
-          <img
-            src={thumbnail}
-            alt={title}
-            className="absolute top-0 left-0 w-full h-full object-cover"
-          />
-        ) : (
-          <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
-        )}
-      </div>
-      <div className="p-3">
-        <h3 className="font-semibold text-lg text-center">{title}</h3>
-        {type === "stream" && <p className="font-bold">{streamer}</p>}
-        {type === "stream" && (
-          <p className="text-sm text-gray-300">{streamCategory}</p>
-        )}
-        <p className="text-sm text-gray-300">{viewers} viewers</p>
-      </div>
-    </div>
-  );
-};
-
-export default ListRow;