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

UPDATE: User Preference SideBar.

Browse Source 
Can try access DB and Render what user wants/follows
This commit is contained in:
EvanLin3141
2025-02-06 00:01:09 +00:00
parent bd7a44ed3c
commit b44ca46034
9 changed files with 72 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/images/icons/Action.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
frontend/public/images/icons/Horror.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
frontend/public/images/icons/Psychological.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
frontend/public/images/icons/R-18.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
frontend/public/images/icons/Shooter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

10
frontend/src/assets/styles/sidebar.css
View File

@@ -10,4 +10,14 @@
--sideBar-DarkBG: black; --sideBar-DarkBG: black;
--sideBar-DarkText: white; --sideBar-DarkText: white;
} }
.style {
font-size: 2em;
font-weight: bold;
}
.category-style {
font-size: 1.75em;
font-weight: bold;
}

4
frontend/src/components/Layout/Navbar.tsx
View File

@@ -77,10 +77,10 @@ const Navbar: React.FC<NavbarProps> = ({
extraClasses={`absolute ${showSideBar ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white extraClasses={`absolute ${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 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 ` : over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all ` :
"top-[75px] left-[20px]" "top-[75px] left-[20px]"
} transition-all duration-300 z-[99]`} } transition-all duration-300 z-[99]`}
> >
<SidebarIcon className="h-15 w-15 mr-1 z-[90]" /> <SidebarIcon className="top-[0.20em] left-[10em] mr-1 z-[90]" />
</Button> </Button>
<div <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 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

141
frontend/src/components/Layout/Sidebar.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { SunMoon as SunMoonIcon} from "lucide-react" import { SunMoon as SunMoonIcon } from "lucide-react"
import Theme from "./Theme"; import Theme from "./Theme";
import "../../assets/styles/sidebar.css" import "../../assets/styles/sidebar.css"
@@ -27,91 +27,64 @@ const Sidebar: React.FC<SideBarProps> = () => {
setTriggerAnimation(false); // Reset animation setTriggerAnimation(false); // Reset animation
setTimeout(() => setTriggerAnimation(true), 0); // Re-trigger animation setTimeout(() => setTriggerAnimation(true), 0); // Re-trigger animation
}; };
const testStreamer: Record<string, string> = {
"Markiplier": "Slink1",
"Jacksepticeye": "Slink2",
"8-BitRyan": "Slink3",
};
return (<div id="sidebar" const testCategory: Record<string, {dummyLink: string; dummyImage: string} > = {
key={triggerAnimation ? 'burn-in' : 'reset'} "Action": {dummyLink : "link1", dummyImage: "../../../images/icons/Action.webp"},
className={`fixed top-0 left-0 w-[250px] ${thisTheme "Horror": {dummyLink : "link2", dummyImage: "../../../images/icons/Horror.png"},
? " bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)]" "Psychological": {dummyLink : "link3", dummyImage: "../../../images/icons/Psychological.png"},
: " bg-[var(--sideBar-DarkBG)] text-[var(--sideBar-DarkText)]" "Adult": {dummyLink : "link4", dummyImage: "../../../images/icons/R-18.png"},
} p-4 z-[90] h-screen overflow-y-auto pt-10 "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">
<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"
key={triggerAnimation ? 'burn-in' : 'reset'}
className={`fixed top-0 left-0 w-[250px] ${thisTheme
? " bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)]"
: " bg-[var(--sideBar-DarkBG)] text-[var(--sideBar-DarkText)]"
} p-4 z-[90] h-screen overflow-y-auto
transition-transform duration-500 ease-in-out animate-burnIn`} transition-transform duration-500 ease-in-out animate-burnIn`}
onMouseLeave={() => setIsCursorOnSidebar(false)} onMouseLeave={() => setIsCursorOnSidebar(false)}
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}> style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
<Theme onClick={handleTheme} /> <Theme onClick={handleTheme} />
<ul className="overflow-y-auto">
<li>1</li> <h1 className="style"> Followed </h1>
<li>1</li> <ul>
<li>1</li> {shownStreamers}
<li>1</li> </ul>
<li>1</li>
<li>1</li> <h1 className="category-style pt-[0.50em]"> Your Categories </h1>
<li>1</li> <ul>
<li>1</li> {shownCategory}
<li>2</li> </ul>
<li>2</li>
<li>2</li> </div>
<li>2</li> </>
<li>1</li> );
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>2</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>);
}; };
export default Sidebar; export default Sidebar;

4
frontend/src/components/Layout/Theme.tsx
View File

@@ -8,14 +8,16 @@ interface ThemeProps {
const Theme: React.FC<ThemeProps> = ({ onClick }) => { const Theme: React.FC<ThemeProps> = ({ onClick }) => {
return ( return (
<div className='relative top-[0.20em] left-[10em]'>
<button <button
onClick={onClick} onClick={onClick}
className="p-2 text-[1.5rem] flex items-center gap-2 text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all" className="p-2 text-[1.5rem] flex items-center gap-2 text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all"
> >
<SunMoonIcon <SunMoonIcon size={27}
className={`transition-transform duration-300 ease-in-out`} className={`transition-transform duration-300 ease-in-out`}
/> />
</button> </button>
</div>
); );
}; };