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

UPDATE: Lucide React Icon and Animation for Theme

Browse Source
This commit is contained in:
EvanLin3141
2025-02-05 14:45:24 +00:00
parent 1740b5d921
commit 2c65606efe
4 changed files with 54 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,17 +73,22 @@ const Navbar: React.FC<NavbarProps> = ({
{isLoggedIn && (
<>
<Button onClick={() => handleSideBar()}
extraClasses={`absolute ${
showSideBar ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
<Button onClick={() => handleSideBar()}
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
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]`}
>
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]`}
>
<SidebarIcon className="h-15 w-15 mr-1 z-[90]" />
</Button>
{showSideBar && <Sidebar scrollActiveSideBar={showSideBar} />}
<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 ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
}`}
>
<Sidebar />
</div>
</>
)}

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

@@ -1,16 +1,16 @@
import React, { useEffect, useState } from "react";
import { SunMoon as SunMoonIcon} from "lucide-react"
import Theme from "./Theme";
import "../../assets/styles/sidebar.css"
interface SideBarProps {
extraClasses?: string;
scrollActiveSideBar: boolean;
}
const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
const Sidebar: React.FC<SideBarProps> = () => {
const [thisTheme, setThisTheme] = useState(false);
const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
const [triggerAnimation, setTriggerAnimation] = useState(false);
useEffect(() => {
const sideBarScroll = () => {
document.body.style.overflow = isCursorOnSidebar ? "hidden" : "unset";
@@ -23,17 +23,21 @@ const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
}, [isCursorOnSidebar]);
const handleTheme = () => {
setThisTheme(!thisTheme);
}
setThisTheme(!thisTheme);
setTriggerAnimation(false); // Reset animation
setTimeout(() => setTriggerAnimation(true), 0); // Re-trigger animation
};
return <div id="sidebar" 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 scrollbar-hide`}
onMouseLeave={() => setIsCursorOnSidebar(false)}
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
<Theme onClick={handleTheme}/>
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
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>
@@ -107,7 +111,7 @@ const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
<li>1</li>
<li>1</li>
</ul>
</div>;
</div>);
};
export default Sidebar;

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

@@ -1,18 +1,22 @@
import React from 'react'
import React from 'react';
import { SunMoon as SunMoonIcon } from 'lucide-react';
interface ThemeProps {
children? : React.ReactNode;
onClick : () => void;
children?: React.ReactNode;
onClick: () => void;
}
const Theme: React.FC<ThemeProps> = ( {onClick, children} ) => {
const Theme: React.FC<ThemeProps> = ({ onClick }) => {
return (
<button
onClick={onClick}
className={` p-2 text-[1.5rem] 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`}>
Light/Dark
<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
className={`transition-transform duration-300 ease-in-out`}
/>
</button>
)
}
);
};
export default Theme
export default Theme;

9
frontend/tailwind.config.js
View File

@@ -13,7 +13,8 @@ export default {
moving_text_colour: "moving_text_colour 6s ease-in-out infinite alternate",
moving_bg: 'moving_bg 200s linear infinite',
'border-spin': 'border-spin linear infinite',
floating: "floating 30s linear infinite"
floating: "floating 30s linear infinite",
burnIn: 'burnIn 1s ease-out',
},
@@ -48,6 +49,12 @@ export default {
'80%': { transform: 'translate(10px, -7px) rotateX(-2.5deg) rotateY(1.5deg)' }, /* Top-right tilt */
'100%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' },
},
burnIn: {
'0%' : { opacity: '0'},
'50%' : { opacity: '0.8'},
'100%' : { opacity: '1'},
},
},
},
plugins: [