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

@@ -11,3 +11,13 @@
--sideBar-DarkText: white;
}
.style {
font-size: 2em;
font-weight: bold;
}
.category-style {
font-size: 1.75em;
font-weight: bold;
}

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

@@ -80,7 +80,7 @@ const Navbar: React.FC<NavbarProps> = ({
"top-[75px] left-[20px]"
} 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>
<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

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

@@ -27,91 +27,64 @@ const Sidebar: React.FC<SideBarProps> = () => {
setTriggerAnimation(false); // Reset 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} > = {
"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">
<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 pt-10
} p-4 z-[90] h-screen overflow-y-auto
transition-transform duration-500 ease-in-out animate-burnIn`}
onMouseLeave={() => setIsCursorOnSidebar(false)}
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
<Theme onClick={handleTheme} />
<ul className="overflow-y-auto">
<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>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>
<h1 className="style"> Followed </h1>
<ul>
{shownStreamers}
</ul>
</div>);
<h1 className="category-style pt-[0.50em]"> Your Categories </h1>
<ul>
{shownCategory}
</ul>
</div>
</>
);
};
export default Sidebar;

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

@@ -8,14 +8,16 @@ interface ThemeProps {
const Theme: React.FC<ThemeProps> = ({ onClick }) => {
return (
<div className='relative top-[0.20em] left-[10em]'>
<button
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"
>
<SunMoonIcon
<SunMoonIcon size={27}
className={`transition-transform duration-300 ease-in-out`}
/>
</button>
</div>
);
};