Michael/Menu
1
0 Fork 0
mirror of https://github.com/R0m1k3/Menu.git synced 2026-10-19 05:06:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add global styles and reusable glassmorphism component modules

Browse Source
This commit is contained in:
Michael committed 2026-04-12 08:09:21 +02:00
1 parent 0bfed1adf2
commit b1a411bfdc
12 files changed
+1188 -537
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/ThemeToggle.tsx
+26 -9
View File
@@ -10,7 +10,7 @@ export function ThemeToggle() {
React.useEffect(() => setMounted(true), []);
if (!mounted) return <div style={{ width: '38px', height: '38px' }} />;
if (!mounted) return <div style={{ width: '40px', height: '40px' }} />;
return (
<button
@@ -20,22 +20,39 @@ export function ThemeToggle() {
background: 'var(--card-bg)',
backdropFilter: 'blur(16px)',
WebkitBackdropFilter: 'blur(16px)',
border: '1px solid var(--card-border)',
border: '1.5px solid var(--card-border)',
borderRadius: '50%',
width: '38px',
height: '38px',
width: '40px',
height: '40px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
transition: 'all 260ms ease',
transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
will: 'transform, background, border-color',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'var(--card-hover-bg)';
e.currentTarget.style.borderColor = 'var(--accent-primary)';
e.currentTarget.style.transform = 'translateY(-2px)';
e.currentTarget.style.boxShadow = '0 8px 20px rgba(0, 212, 255, 0.15)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'var(--card-bg)';
e.currentTarget.style.borderColor = 'var(--card-border)';
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = 'none';
}}
onMouseDown={(e) => {
e.currentTarget.style.transform = 'scale(0.95)';
}}
onMouseUp={(e) => {
e.currentTarget.style.transform = 'translateY(-2px)';
}}
onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--card-hover-bg)'; e.currentTarget.style.borderColor = 'var(--card-hover-border)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--card-bg)'; e.currentTarget.style.borderColor = 'var(--card-border)'; }}
>
{theme === 'dark'
? <Sun size={15} color="var(--fg-secondary)" />
: <Moon size={15} color="var(--fg-secondary)" />
? <Sun size={16} color="var(--accent-primary)" strokeWidth={1.8} style={{ transition: 'transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)' }} />
: <Moon size={16} color="var(--accent-primary)" strokeWidth={1.8} style={{ transition: 'transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)' }} />
}
</button>
);