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

REFACTOR: Improve Sidebar style and enforce its uniqueness across pages;

Browse Source 
REFACTOR: General improvement of style across frontend;
This commit is contained in:
Chris-1010
2025-02-24 02:07:13 +00:00
parent 38a74e0710
commit 5f13534c7a
13 changed files with 244 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en" class="min-w-[650px]"> <html lang="en" class="min-w-[850px]">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
@@ -7,7 +7,7 @@
<title>Team Software Project</title> <title>Team Software Project</title>
</head> </head>
<body> <body>
<div id="root" class="min-h-screen h-full min-w-[650px] bg-gradient-to-tr from-[#2043ba] via-[#0026a6] to-[#63007a] overflow-x-hidden"></div> <div id="root" class="h-screen min-w-[850px] bg-gradient-to-tr from-[#2043ba] via-[#0026a6] to-[#63007a] overflow-x-hidden"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

4
frontend/src/App.tsx
View File

@@ -10,10 +10,11 @@ import ResetPasswordPage from "./pages/ResetPasswordPage";
import CategoryPage from "./pages/CategoryPage"; import CategoryPage from "./pages/CategoryPage";
import CategoriesPage from "./pages/AllCategoriesPage"; import CategoriesPage from "./pages/AllCategoriesPage";
import ResultsPage from "./pages/ResultsPage"; import ResultsPage from "./pages/ResultsPage";
import { SidebarProvider } from "./context/SidebarContext"; import { SidebarProvider, useSidebar } from "./context/SidebarContext";
import { QuickSettingsProvider } from "./context/QuickSettingsContext"; import { QuickSettingsProvider } from "./context/QuickSettingsContext";
import StreamDashboardPage from "./pages/StreamDashboardPage"; import StreamDashboardPage from "./pages/StreamDashboardPage";
import { Brightness } from "./context/BrightnessContext"; import { Brightness } from "./context/BrightnessContext";
import Sidebar from "./components/Navigation/Sidebar";
function App() { function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -58,6 +59,7 @@ function App() {
<SidebarProvider> <SidebarProvider>
<QuickSettingsProvider> <QuickSettingsProvider>
<BrowserRouter> <BrowserRouter>
{isLoggedIn && window.innerWidth > 900 && <Sidebar />}
<Routes> <Routes>
<Route <Route
path="/" path="/"

10
frontend/src/components/Layout/DynamicPageContent.tsx
View File

@@ -2,9 +2,9 @@ import React from "react";
import Navbar from "../Navigation/Navbar"; import Navbar from "../Navigation/Navbar";
import { useSidebar } from "../../context/SidebarContext"; import { useSidebar } from "../../context/SidebarContext";
interface DynamicPageContentProps { interface DynamicPageContentProps extends React.HTMLProps<HTMLDivElement> {
children: React.ReactNode; children: React.ReactNode;
navbarVariant?: "home" | "default"; navbarVariant?: "home" | "no-navbar" | "default";
className?: string; className?: string;
style?: React.CSSProperties; style?: React.CSSProperties;
} }
@@ -19,12 +19,12 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
return ( return (
<div className={className} style={style}> <div className={className} style={style}>
<Navbar variant={navbarVariant} /> {navbarVariant !== "no-navbar" && <Navbar variant={navbarVariant} />}
<div <div
id="content" id="content"
className={`${ className={`min-w-[850px] ${
showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]" showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]"
} transition-all duration-[500ms] ease-in-out`} } items-start transition-all duration-[500ms] ease-in-out`}
> >
{children} {children}
</div> </div>

2
frontend/src/components/Layout/ListRow.tsx
View File

@@ -89,7 +89,7 @@ const ListRow = forwardRef<
return ( return (
<div <div
className={`${extraClasses} flex w-full rounded-[1.5rem] text-white transition-all ${ className={`${extraClasses} flex w-full relative rounded-[1.5rem] text-white transition-all ${
variant === "search" variant === "search"
? "items-center" ? "items-center"
: "flex-col space-y-4 py-6 px-5 mx-2 mt-5" : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"

2
frontend/src/components/Layout/Logo.tsx
View File

@@ -21,7 +21,7 @@ const Logo: React.FC<LogoProps> = ({
<h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text"> <h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
Go on, have a... Go on, have a...
</h6> </h6>
<div className="flex w-fit min-w-[30vw] bg-logo bg-clip-text animate-moving_text_colour bg-[length:300%_300%] justify-center leading-none transition-all"> <div className="flex w-fit min-w-[calc(12vw+6rem)] bg-logo bg-clip-text animate-moving_text_colour bg-[length:300%_300%] justify-center leading-none transition-all">
<span className={gradient}>G</span> <span className={gradient}>G</span>
<span className={gradient}>A</span> <span className={gradient}>A</span>
<span className={gradient}>N</span> <span className={gradient}>N</span>

50
frontend/src/components/Navigation/Navbar.tsx
View File

@@ -1,8 +1,6 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import Logo from "../Layout/Logo"; import Logo from "../Layout/Logo";
import Button, { ToggleButton } from "../Input/Button"; import Button, { ToggleButton } from "../Input/Button";
import Sidebar from "./Sidebar";
import { Sidebar as SidebarIcon } from "lucide-react";
import { import {
LogIn as LogInIcon, LogIn as LogInIcon,
LogOut as LogOutIcon, LogOut as LogOutIcon,
@@ -24,7 +22,7 @@ interface NavbarProps {
const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => { const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
const { isLoggedIn } = useAuth(); const { isLoggedIn } = useAuth();
const { showAuthModal, setShowAuthModal } = useAuthModal(); const { showAuthModal, setShowAuthModal } = useAuthModal();
const { showSideBar, setShowSideBar } = useSidebar(); const { showSideBar } = useSidebar();
const { showQuickSettings, setShowQuickSettings } = useQuickSettings(); const { showQuickSettings, setShowQuickSettings } = useQuickSettings();
const handleLogout = () => { const handleLogout = () => {
@@ -41,23 +39,11 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
setShowQuickSettings(!showQuickSettings); setShowQuickSettings(!showQuickSettings);
}; };
const handleSideBar = () => {
setShowSideBar(!showSideBar);
};
// Keyboard shortcut to toggle sidebar // Keyboard shortcut to toggle sidebar
useEffect(() => { useEffect(() => {
const handleKeyPress = (e: KeyboardEvent) => { const handleKeyPress = (e: KeyboardEvent) => {
if ( if (e.key === "q" && document.activeElement == document.body)
e.key === "s" &&
document.activeElement == document.body &&
isLoggedIn
) {
handleSideBar();
}
if (e.key === "q" && document.activeElement == document.body) {
handleQuickSettings(); handleQuickSettings();
}
}; };
document.addEventListener("keydown", handleKeyPress); document.addEventListener("keydown", handleKeyPress);
@@ -65,12 +51,12 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
return () => { return () => {
document.removeEventListener("keydown", handleKeyPress); document.removeEventListener("keydown", handleKeyPress);
}; };
}, [showSideBar, showQuickSettings, setShowSideBar, isLoggedIn]); }, [showQuickSettings]);
return ( return (
<div <div
id="navbar" id="navbar"
className={`flex justify-center items-center w-full ${ className={`flex justify-evenly items-center mx-[15vw] ${
variant === "home" variant === "home"
? "h-[45vh] flex-col" ? "h-[45vh] flex-col"
: "h-[15vh] col-span-2 flex-row" : "h-[15vh] col-span-2 flex-row"
@@ -84,7 +70,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
showSideBar showSideBar
? "left-[16vw] duration-[0.5s]" ? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]" : "left-[20px] duration-[1s]"
} text-[1rem] flex items-center flex-nowrap`} } text-[1rem] flex items-center flex-nowrap z-[99]`}
onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))} onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
> >
{isLoggedIn ? ( {isLoggedIn ? (
@@ -100,30 +86,6 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
)} )}
</Button> </Button>
{/* Sidebar */}
{isLoggedIn && (
<>
<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`}
toggled={showSideBar}
>
<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 />
</>
)}
{/* Quick Settings Sidebar */} {/* Quick Settings Sidebar */}
<ToggleButton <ToggleButton
extraClasses={`absolute group text-[1rem] top-[2vh] ${ extraClasses={`absolute group text-[1rem] top-[2vh] ${
@@ -132,7 +94,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
onClick={() => handleQuickSettings()} onClick={() => handleQuickSettings()}
toggled={showQuickSettings} toggled={showQuickSettings}
> >
<SettingsIcon className="h-15 w-15" /> <SettingsIcon className="h-[2vw] w-[2vw]" />
{showQuickSettings && ( {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"> <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">

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

@@ -1,7 +1,9 @@
import React, { useState, useEffect } from "react"; import React, { useEffect, useRef, useState } from "react";
import { useSidebar } from "../../context/SidebarContext"; import { Sidebar as SidebarIcon } from "lucide-react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useAuth } from "../../context/AuthContext"; import { useAuth } from "../../context/AuthContext";
import { useSidebar } from "../../context/SidebarContext";
import { ToggleButton } from "../Input/Button";
interface Streamer { interface Streamer {
user_id: number; user_id: number;
@@ -17,8 +19,8 @@ interface SideBarProps {
extraClasses?: string; extraClasses?: string;
} }
const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => { const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
const { showSideBar } = useSidebar(); const { showSideBar, setShowSideBar } = useSidebar();
const navigate = useNavigate(); const navigate = useNavigate();
const { username, isLoggedIn } = useAuth(); const { username, isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]); const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
@@ -42,6 +44,28 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
fetchFollowedStreamers(); fetchFollowedStreamers();
}, [isLoggedIn]); }, [isLoggedIn]);
const handleSideBar = () => {
setShowSideBar(!showSideBar);
};
// Keyboard shortcut to toggle sidebar
useEffect(() => {
const handleKeyPress = (e: KeyboardEvent) => {
if (
e.key === "s" &&
document.activeElement == document.body &&
isLoggedIn
)
handleSideBar();
};
document.addEventListener("keydown", handleKeyPress);
return () => {
document.removeEventListener("keydown", handleKeyPress);
};
}, [showSideBar, setShowSideBar, isLoggedIn]);
// Fetch followed categories // Fetch followed categories
useEffect(() => { useEffect(() => {
if (!isLoggedIn) return; if (!isLoggedIn) return;
@@ -62,9 +86,27 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
}, [isLoggedIn]); }, [isLoggedIn]);
return ( return (
<>
<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]`}
toggled={showSideBar}
>
<SidebarIcon className="h-[2vw] w-[2vw]" />
{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>
<div <div
id="sidebar" id="sidebar"
className={`fixed top-0 left-0 w-[15vw] h-screen flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide 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 ${ transition-all duration-500 ease-in-out ${
showSideBar ? "translate-x-0" : "-translate-x-full" showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`} } ${extraClasses}`}
@@ -85,14 +127,16 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
className="font-black text-[1.4rem] hover:underline" className="font-black text-[1.4rem] hover:underline"
onClick={() => navigate(`/user/${username}`)} onClick={() => navigate(`/user/${username}`)}
> >
<div className="text-[var(--sideBar-profile-text)]">{username}</div> <div className="text-[var(--sideBar-profile-text)]">
{username}
</div>
</button> </button>
</div> </div>
</div> </div>
<div <div
id="following" id="following"
className="flex flex-col flex-grow justify-evenly gap-4 p-[1rem]" className="flex flex-col flex-grow justify-evenly p-4 gap-4"
> >
<div <div
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300" className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
@@ -101,45 +145,54 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
} }
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
> >
<h1 className="text-[var(--follow-text)] font-bold text-2xl p-[0.75rem] cursor-default"> <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
Following Following
</h1> </h1>
</div> </div>
<div id="streamers-followed" className="flex-grow"> <div
<h2 className="border-b-4 border-t-4 text-2xl cursor-default"> id="streamers-followed"
className="flex flex-col flex-grow items-center"
>
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
Streamers Streamers
</h2> </h2>
<ul className="mt-2 space-y-2"> <div className="flex flex-col flex-grow justify-evenly w-full">
{followedStreamers.map((streamer) => ( {followedStreamers.map((streamer: any) => (
<li <button
key={`streamer-${streamer.user_id}`} key={`streamer-${streamer.username}`}
className="cursor-pointer bg-black py-2 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 transition-colors"
onClick={() => navigate(`/user/${streamer.username}`)} onClick={() => navigate(`/user/${streamer.username}`)}
> >
{streamer.username} {streamer.username}
</li> </button>
))} ))}
</ul> </div>
</div> </div>
<div id="categories-followed" className="flex-grow"> <div
<h2 className="border-b-4 border-t-4 text-[1.5rem] cursor-default"> id="categories-followed"
className="flex flex-col flex-grow items-center"
>
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
Categories Categories
</h2> </h2>
<ul className="mt-2 space-y-2"> <div className="flex flex-col flex-grow justify-evenly w-full">
{followedCategories.map((category) => ( {followedCategories.map((category: any) => (
<li <button
key={category.category_id} key={`category-${category.category_name}`}
className="cursor-pointer bg-black py-2 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 transition-colors"
onClick={() => navigate(`/category/${category.category_name}`)} onClick={() =>
navigate(`/category/${category.category_name}`)
}
> >
{category.category_name} {category.category_name}
</li> </button>
))} ))}
</ul>
</div> </div>
</div> </div>
</div> </div>
</div>
</>
); );
}; };

2
frontend/src/components/Stream/VideoPlayer.tsx
View File

@@ -11,7 +11,7 @@ interface VideoPlayerProps {
const VideoPlayer: React.FC<VideoPlayerProps> = ({ const VideoPlayer: React.FC<VideoPlayerProps> = ({
streamer, streamer,
extraClasses, extraClasses = "",
onStreamDetected, onStreamDetected,
}) => { }) => {
const { streamerName: urlStreamerName } = useParams<{ const { streamerName: urlStreamerName } = useParams<{

5
frontend/src/pages/AllCategoriesPage.tsx
View File

@@ -92,10 +92,7 @@ const AllCategoriesPage: React.FC = () => {
}; };
return ( return (
<DynamicPageContent <DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000] bg-[url(/images/background-pattern.svg)]">
className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<ListRow <ListRow
ref={listRowRef} ref={listRowRef}
type="category" type="category"

8
frontend/src/pages/CategoryPage.tsx
View File

@@ -82,8 +82,7 @@ const CategoryPage: React.FC = () => {
const newCategories = await fetchCategoryStreams(); const newCategories = await fetchCategoryStreams();
if (newCategories && newCategories.length > 0) { if (newCategories && newCategories.length > 0) {
listRowRef.current.addMoreItems(newCategories); listRowRef.current.addMoreItems(newCategories);
} } else console.log("No more data to fetch");
else console.log("No more data to fetch");
} }
}; };
@@ -102,10 +101,7 @@ const CategoryPage: React.FC = () => {
} }
return ( return (
<DynamicPageContent <DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000] bg-[url(/images/background-pattern.svg)]">
className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<div className="pt-8"> <div className="pt-8">
<ListRow <ListRow
type="stream" type="stream"

3
frontend/src/pages/HomePage.tsx
View File

@@ -29,8 +29,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
return ( return (
<DynamicPageContent <DynamicPageContent
navbarVariant="home" navbarVariant="home"
className="h-full min-h-screen animate-moving_bg" className="h-full min-h-screen bg-[url(/images/background-pattern.svg)] animate-moving_bg"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
> >
<ListRow <ListRow
type="stream" type="stream"

22
frontend/src/pages/ResultsPage.tsx
View File

@@ -3,7 +3,7 @@ import { useLocation, useNavigate } from "react-router-dom";
import Button from "../components/Input/Button"; import Button from "../components/Input/Button";
import SearchBar from "../components/Input/SearchBar"; import SearchBar from "../components/Input/SearchBar";
import ListRow from "../components/Layout/ListRow"; import ListRow from "../components/Layout/ListRow";
import Logo from "../components/Layout/Logo"; import DynamicPageContent from "../components/Layout/DynamicPageContent";
const ResultsPage: React.FC = ({}) => { const ResultsPage: React.FC = ({}) => {
const [overflow, setOverflow] = useState(false); const [overflow, setOverflow] = useState(false);
@@ -33,7 +33,11 @@ const ResultsPage: React.FC = ({}) => {
searchResults.streams.length === 0 searchResults.streams.length === 0
) { ) {
return ( return (
<div className="flex flex-col items-center justify-evenly min-h-[70vh] my-[15vh] p-4"> <DynamicPageContent
id="results-page"
navbarVariant="no-navbar"
className="flex flex-col items-center justify-evenly min-h-[70vh] my-[15vh] p-4"
>
<h1 className="text-3xl font-bold mb-4"> <h1 className="text-3xl font-bold mb-4">
Search results for "{query}" Search results for "{query}"
</h1> </h1>
@@ -42,17 +46,16 @@ const ResultsPage: React.FC = ({}) => {
<div className="flex gap-8"> <div className="flex gap-8">
<Button onClick={() => navigate(-1)}>Go Back</Button> <Button onClick={() => navigate(-1)}>Go Back</Button>
</div> </div>
</div> </DynamicPageContent>
); );
} }
return ( return (
<div <DynamicPageContent id="results-page" navbarVariant="no-navbar">
id="results-page" <div className="flex flex-col items-center justify-evenly min-h-[96vh] p-4">
className="flex flex-col items-center justify-evenly min-h-[96vh] p-4" <h1 className="text-3xl font-bold mb-4">
> Search results for "{query}"
<Logo extraClasses="absolute top-[5vh] left-0" /> </h1>
<h1 className="text-3xl font-bold mb-4">Search results for "{query}"</h1>
<SearchBar value={query} /> <SearchBar value={query} />
<div id="results" className="flex flex-col flex-grow w-full"> <div id="results" className="flex flex-col flex-grow w-full">
@@ -139,6 +142,7 @@ const ResultsPage: React.FC = ({}) => {
</Button> </Button>
</div> </div>
</div> </div>
</DynamicPageContent>
); );
}; };

2
frontend/src/pages/VideoPage.tsx
View File

@@ -142,7 +142,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
<ToggleButton <ToggleButton
onClick={toggleChat} onClick={toggleChat}
toggled={isChatOpen} toggled={isChatOpen}
extraClasses="group cursor-pointer absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap" extraClasses="group cursor-pointer absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap z-[50]"
> >
{isChatOpen ? "Hide Chat" : "Show Chat"} {isChatOpen ? "Hide Chat" : "Show Chat"}