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

REFACTOR: Update navbar position in project component hierarchy;

Browse Source 
UPDATE: Add navbar 'no-searchbar' variant;

+ last commit - MINOR: Handle of new ChatContext
This commit is contained in:
Chris-1010
2025-02-26 13:23:42 +00:00
parent de68651685
commit d36eaffafb
7 changed files with 57 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,9 +14,10 @@ import { useAuth } from "../../context/AuthContext";
import QuickSettings from "../Settings/QuickSettings";
import { useSidebar } from "../../context/SidebarContext";
import { useQuickSettings } from "../../context/QuickSettingsContext";
import Sidebar from "./Sidebar";
interface NavbarProps {
variant?: "home" | "default";
variant?: "home" | "no-searchbar" | "default";
}
const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
@@ -56,55 +57,53 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
return (
<div
id="navbar"
className={`flex justify-evenly items-center mx-[15vw] ${
className={`relative flex justify-evenly items-center ${
variant === "home"
? "h-[45vh] flex-col"
: "h-[15vh] col-span-2 flex-row"
}`}
>
{isLoggedIn && window.innerWidth > 900 && <Sidebar />}
<Logo variant={variant} />
{/* Login / Logout Button */}
<Button
extraClasses={`absolute top-[2vh] ${
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} text-[1rem] flex items-center flex-nowrap z-[99]`}
onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
>
{isLoggedIn ? (
<>
<LogOutIcon className="h-15 w-15 mr-1" />
Logout
</>
) : (
<>
<LogInIcon className="h-15 w-15 mr-1" />
Login / Register
</>
)}
</Button>
{/* Quick Settings Sidebar */}
<ToggleButton
extraClasses={`absolute group text-[1rem] top-[2vh] ${
showQuickSettings ? "right-[21vw]" : "right-[20px]"
} cursor-pointer`}
onClick={() => handleQuickSettings()}
toggled={showQuickSettings}
>
<SettingsIcon className="h-[2vw] w-[2vw]" />
{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 />
{/* Login / Logout Button */}
<Button
extraClasses={`absolute top-[2vh] ${
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} text-[1rem] flex items-center flex-nowrap z-[99]`}
onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
>
{isLoggedIn ? (
<>
<LogOutIcon className="h-15 w-15 mr-1" />
Logout
</>
) : (
<>
<LogInIcon className="h-15 w-15 mr-1" />
Login / Register
</>
)}
</Button>
{/* Quick Settings Sidebar */}
<ToggleButton
extraClasses={`absolute group text-[1rem] top-[2vh] ${
showQuickSettings ? "right-[21vw]" : "right-[20px]"
} cursor-pointer`}
onClick={() => handleQuickSettings()}
toggled={showQuickSettings}
>
<SettingsIcon className="h-[2vw] w-[2vw]" />
{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 />
{variant != "no-searchbar" && <SearchBar />}
{/* Stream Button */}
{isLoggedIn && !window.location.pathname.includes("go-live") && (