daniil/smart-home-tablet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: premium UI redesign — glassmorphism, gradient accents, ambient background
All checks were successful
Deploy / deploy (push) Successful in 2m40s
Details

Browse Source
This commit is contained in:
Cosmo
2026-04-22 18:38:31 +00:00
parent 4874466985
commit eb644ff341
8 changed files with 763 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components/Sidebar.tsx
View File

@@ -20,19 +20,19 @@ export default function Sidebar({ active, onChange }: SidebarProps) {
return (
<nav
style={{
width: 72,
minWidth: 72,
width: 78,
minWidth: 78,
height: '100dvh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
paddingTop: 20,
paddingBottom: 20,
background: 'rgba(0,0,0,0.5)',
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
borderRight: '1px solid rgba(255,255,255,0.05)',
gap: 8,
paddingTop: 24,
paddingBottom: 24,
background: 'rgba(12, 12, 24, 0.6)',
backdropFilter: 'blur(30px)',
WebkitBackdropFilter: 'blur(30px)',
borderRight: '1px solid rgba(255,255,255,0.04)',
gap: 6,
flexShrink: 0,
zIndex: 10,
}}
@@ -40,19 +40,20 @@ export default function Sidebar({ active, onChange }: SidebarProps) {
{/* Logo */}
<div
style={{
width: 44,
height: 44,
borderRadius: 14,
background: 'linear-gradient(135deg, #00d4ff22, #00d4ff44)',
border: '1px solid rgba(0,212,255,0.3)',
width: 48,
height: 48,
borderRadius: 16,
background: 'linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.25))',
border: '1px solid rgba(129,140,248,0.3)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 24,
marginBottom: 28,
flexShrink: 0,
boxShadow: '0 0 20px rgba(99,102,241,0.15)',
}}
>
<Home size={20} color="#00d4ff" />
<Home size={22} color="#818cf8" />
</div>
{/* Nav items */}
@@ -64,19 +65,38 @@ export default function Sidebar({ active, onChange }: SidebarProps) {
onClick={() => onChange(id)}
title={label}
style={{
width: 48,
height: 48,
borderRadius: 14,
width: 52,
height: 52,
borderRadius: 16,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
background: isActive ? 'rgba(0,212,255,0.15)' : 'transparent',
border: isActive ? '1px solid rgba(0,212,255,0.25)' : '1px solid transparent',
transition: 'all 0.2s ease',
gap: 4,
background: isActive
? 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))'
: 'transparent',
border: isActive
? '1px solid rgba(129,140,248,0.25)'
: '1px solid transparent',
transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
flexShrink: 0,
boxShadow: isActive ? '0 0 20px rgba(99,102,241,0.1)' : 'none',
}}
>
<Icon size={22} color={isActive ? '#00d4ff' : 'rgba(255,255,255,0.4)'} />
<Icon
size={20}
color={isActive ? '#a5b4fc' : 'rgba(255,255,255,0.3)'}
strokeWidth={isActive ? 2.2 : 1.8}
/>
<span style={{
fontSize: 9,
fontWeight: isActive ? 600 : 500,
color: isActive ? '#a5b4fc' : 'rgba(255,255,255,0.25)',
letterSpacing: '0.02em',
}}>
{label}
</span>
</button>
)
})}