107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { Home, Cpu, CalendarDays, StickyNote, Settings } from 'lucide-react'
|
|
|
|
type Tab = 'home' | 'devices' | 'calendar' | 'notes' | 'settings'
|
|
|
|
interface SidebarProps {
|
|
active: Tab
|
|
onChange: (tab: Tab) => void
|
|
}
|
|
|
|
const navItems: { id: Tab; icon: any; label: string }[] = [
|
|
{ id: 'home', icon: Home, label: 'Главная' },
|
|
{ id: 'devices', icon: Cpu, label: 'Устройства' },
|
|
{ id: 'calendar', icon: CalendarDays, label: 'Календарь' },
|
|
{ id: 'notes', icon: StickyNote, label: 'Заметки' },
|
|
{ id: 'settings', icon: Settings, label: 'Настройки' },
|
|
]
|
|
|
|
export default function Sidebar({ active, onChange }: SidebarProps) {
|
|
return (
|
|
<nav
|
|
style={{
|
|
width: 78,
|
|
minWidth: 78,
|
|
height: '100dvh',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
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,
|
|
}}
|
|
>
|
|
{/* Logo */}
|
|
<div
|
|
style={{
|
|
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: 28,
|
|
flexShrink: 0,
|
|
boxShadow: '0 0 20px rgba(99,102,241,0.15)',
|
|
}}
|
|
>
|
|
<Home size={22} color="#818cf8" />
|
|
</div>
|
|
|
|
{/* Nav items */}
|
|
{navItems.map(({ id, icon: Icon, label }) => {
|
|
const isActive = active === id
|
|
return (
|
|
<button
|
|
key={id}
|
|
onClick={() => onChange(id)}
|
|
title={label}
|
|
style={{
|
|
width: 52,
|
|
height: 52,
|
|
borderRadius: 16,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
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={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>
|
|
)
|
|
})}
|
|
</nav>
|
|
)
|
|
}
|